Compatibilidade de aplicativos MCP com AG-UI

Os endpoints AG-UI em Python do Agent Framework são compatíveis com o recurso MCP Apps do ecossistema de AG-UI. Os Aplicativos MCP permitem que aplicativos de front-end insiram ferramentas e recursos alimentados por MCP ao lado do agente AG-UI , sem alterações necessárias no lado Python.

Arquitetura

O suporte aos Aplicativos MCP é fornecido pelo TypeScript MCPAppsMiddleware do CopilotKit (@ag-ui/mcp-apps-middleware), que fica entre o front-end e o back-end do Agent Framework:

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

A camada de middleware lida com a descoberta de ferramentas MCP, solicitações de recursos com proxy de iframe e ui/resourceUri resolução. Seu endpoint Python AG-UI recebe solicitações padrão de AG-UI e desconhece a camada de Aplicativos MCP.

Nenhuma alteração do lado Python necessária

A integração dos Aplicativos MCP é totalmente tratada pelo middleware TypeScript. Sua configuração existente add_agent_framework_fastapi_endpoint() funciona como está:

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, "/")

Essa abordagem é consistente com o funcionamento dos Aplicativos MCP com todas as outras integrações AG-UI Python – a camada de Aplicativos MCP está sempre no middleware TypeScript, não no back-end Python.

Configurando o middleware

Para usar aplicativos MCP com o back-end do Agent Framework, configure um runtime do CopilotKit ou um proxy Node.js que inclua MCPAppsMiddleware e aponte para seu endpoint Python.

// 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
  ],
});

Para obter instruções completas sobre a instalação, consulte a documentação dos Aplicativos MCP do CopilotKit e a documentação dos Aplicativos MCP da AG-UI.

O que não está no escopo

A seguir estão explicitamente não parte da integração Python AG-UI:

• No Python MCPAppsMiddleware: o middleware dos Aplicativos MCP é executado somente na camada TypeScript.
• Nenhuma manipulação de solicitações MCP com proxie de iframe pelo FastAPI: o proxy de recursos é tratado pelo middleware Node.js.
• Não há descoberta no lado do ui/resourceUri Python: a resolução do URI do recurso é uma responsabilidade do middleware.

Se o aplicativo não precisar da camada de middleware dos Aplicativos MCP, o ponto de extremidade do Framework de Agente AG-UI funciona diretamente com qualquer cliente compatível com AG-UI.

Próximas Etapas 

Recursos adicionais

• Documentação de Aplicativos AG-UI MCP
• Documentação dos aplicativos MCP do CopilotKit
• Repositório do Agent Framework no GitHub