Kompatibilitas Aplikasi MCP dengan AG-UI

Nota

Dokumentasi kompatibilitas MCP Apps untuk integrasi .NET AG-UI akan segera hadir.

Titik akhir Python AG-UI Agent Framework kompatibel dengan fitur MCP Apps dalam ekosistem AG-UI. McP Apps memungkinkan aplikasi frontend untuk menyematkan alat dan sumber daya bertenaga MCP bersama agen AG-UI Anda — tidak ada perubahan yang diperlukan di sisi Python.

Architecture

Dukungan MCP Apps disediakan oleh TypeScript MCPAppsMiddleware CopilotKit (@ag-ui/mcp-apps-middleware), yang berfungsi antara frontend dan backend Agent Framework Anda.

┌─────────────────────────┐
│  Frontend               │
│  (CopilotKit / AG-UI)   │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  CopilotKit Runtime /   │
│  Node.js Proxy          │
│  + MCPAppsMiddleware    │
└────────┬────────────────┘
         │ AG-UI protocol
         ▼
┌─────────────────────────┐
│  Agent Framework        │
│  FastAPI AG-UI Endpoint │
└─────────────────────────┘

Lapisan middleware menangani penemuan alat MCP, permintaan sumber daya yang diproksi oleh iframe, dan penyelesaian ui/resourceUri. Titik akhir Python AG-UI Anda menerima permintaan AG-UI standar dan tidak menyadari lapisan Aplikasi MCP.

Tidak Diperlukan Perubahan di Sisi Python

Integrasi MCP Apps sepenuhnya ditangani oleh middleware TypeScript. Penyiapan yang add_agent_framework_fastapi_endpoint() ada berfungsi sebagaimana adanya.

from agent_framework import Agent
from agent_framework.ag_ui import add_agent_framework_fastapi_endpoint
from fastapi import FastAPI

app = FastAPI()
agent = Agent(name="my-agent", instructions="...", client=chat_client)

# This endpoint is MCP Apps-compatible with no additional configuration
add_agent_framework_fastapi_endpoint(app, agent, "/")

Pendekatan ini konsisten dengan cara kerja Aplikasi MCP dengan semua integrasi AG-UI Python lainnya — lapisan Aplikasi MCP selalu berada di middleware TypeScript, bukan di backend Python.

Menyiapkan Middleware

Untuk menggunakan MCP Apps dengan backend Agent Framework Anda, siapkan Runtime CopilotKit atau proxy Node.js yang menyertakan MCPAppsMiddleware dan mengarah ke titik akhir Python Anda.

// Example Node.js proxy configuration (TypeScript)
import { MCPAppsMiddleware } from "@ag-ui/mcp-apps-middleware";

const middleware = new MCPAppsMiddleware({
  agents: [
    {
      name: "my-agent",
      url: "http://localhost:8888/",  // Your MAF AG-UI endpoint
    },
  ],
  mcpApps: [
    // MCP app configurations
  ],
});

Untuk petunjuk penyiapan lengkap, lihat dokumentasi Aplikasi MCP CopilotKit dan dokumentasi aplikasi MCPAG-UI.

Apa yang Tidak Ada dalam Cakupan

Berikut ini secara eksplisit tidak bagian dari integrasi Python AG-UI:

  • Tidak Python MCPAppsMiddleware: Middleware MCP Apps hanya berjalan di lapisan TypeScript.
  • FastAPI tidak menangani permintaan MCP yang diproksi melalui iframe: Proksi sumber daya ditangani oleh middleware Node.js.
  • Tidak ada penemuan ui/resourceUri sisi Python: Resolusi URI sumber daya adalah masalah middleware.

Jika aplikasi Anda tidak memerlukan lapisan middleware MCP Apps, Agen Framework AG-UI Anda berfungsi langsung dengan klien yang kompatibel dengan AG-UI.

Langkah berikutnya

Manajemen Negara

Sumber Daya Tambahan

  • Last updated on