integração do AG-UI com o Agent Framework

O AG-UI é um protocolo que permite criar aplicativos de agente de IA baseados na Web com recursos avançados, como streaming em tempo real, gerenciamento de estado e componentes interativos da interface do usuário. A integração AG-UI do Agent Framework fornece conectividade perfeita entre seus agentes e clientes Web.

O que é AG-UI?

AG-UI é um protocolo padronizado para a criação de interfaces de agente de IA que fornece:

• Hospedagem de agente remoto: implantar agentes de IA como serviços Web acessíveis por vários clientes
• Streaming em tempo real: transmitir respostas do agente usando Server-Sent Events (SSE) para feedback imediato
• Comunicação Padronizada: formato de mensagem consistente para interações de agente confiável
• Gerenciamento de Sessão: manter o contexto de conversa em várias solicitações
• Recursos Avançados: aprovações com intervenção humana, sincronização de estado e renderização de UI personalizada

Quando usar AG-UI

Considere usar AG-UI quando precisar:

• Criar aplicativos Web ou móveis que interagem com agentes de IA
• Implantar agentes como serviços acessíveis por vários usuários simultâneos
• Transmitir respostas do agente em tempo real para fornecer comentários imediatos do usuário
• Implementar fluxos de trabalho de aprovação em que os usuários confirmam ações antes da execução
• Sincronizar o estado entre o cliente e o servidor para experiências interativas
• Renderizar componentes de interface do usuário personalizados com base em chamadas de ferramenta de agente

Recursos suportados

A integração AG-UI do Agent Framework dá suporte a todos os 7 recursos de protocolo AG-UI:

1. Chat Agentic: Chat de streaming básico com chamada automática de ferramenta
2. Renderização de Ferramentas do Backend: ferramentas executadas no backend com resultados transmitidos para o cliente
3. Human in the Loop: Solicitações de aprovação de função para confirmação do usuário
4. Interface do usuário do Agentic Generative: ferramentas assíncronas para operações de execução prolongada com atualizações de progresso
5. Interface do usuário generativa baseada em ferramentas: componentes de interface do usuário personalizados renderizados com base em chamadas de ferramenta
6. Estado Compartilhado: sincronização de estado bidirecional entre cliente e servidor
7. Atualizações de Estado Preditivo: Transmitir argumentos da ferramenta como atualizações de estado otimistas

Construir interfaces de usuário do agente com CopilotKit

O CopilotKit fornece componentes ricos de interface de usuário para criar interfaces de usuário de agentes com base no protocolo padrão AG-UI. O CopilotKit dá suporte a interfaces de chat de streaming, chamada de ferramenta de front-end &back-end, interações humanas no loop, interface do usuário generativa, estado compartilhado e muito mais. Você pode ver exemplos dos vários cenários de interface do usuário do agente compatíveis com o CopilotKit no aplicativo de exemplo AG-UI Dojo.

Para conectar um front-end do CopilotKit React a um back-end do Agent Framework AG-UI, registre seu endpoint como um HttpAgent no runtime do CopilotKit. Isso permite que as ferramentas de front-end do CopilotKit fluam como ferramentas de cliente AG-UI e todos os recursos de AG-UI (streaming, aprovações, sincronização de estado) funcionam automaticamente.

O CopilotKit ajuda você a se concentrar nas funcionalidades do agente ao mesmo tempo em que oferece uma experiência de usuário polida sem reinventar a roda. Para saber mais sobre como começar a usar o Microsoft Agent Framework e o CopilotKit, consulte a documentação sobre a integração do Microsoft Agent Framework com o CopilotKit.

┌─────────────────┐
│  Web Client     │
│  (Browser/App)  │
└────────┬────────┘
         │ HTTP POST + SSE
         ▼
┌─────────────────────────┐
│  ASP.NET Core           │
│  MapAGUI("/", agent)    │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  AIAgent                │
│  (with Middleware)      │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  IChatClient            │
│  (Azure OpenAI, etc.)   │
└─────────────────────────┘

dotnet add package Microsoft.Agents.AI.Hosting.AGUI.AspNetCore

┌─────────────────┐
│  Web Client     │
│  (Browser/App)  │
└────────┬────────┘
         │ HTTP POST + SSE
         ▼
┌─────────────────────────┐
│  FastAPI Endpoint       │
│  (add_agent_framework_  │
│   fastapi_endpoint)     │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  AgentFrameworkAgent    │
│  (Protocol Wrapper)     │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Orchestrators          │
│  (Execution Flow Logic) │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Agent              │
│  (Agent Framework)      │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Chat Client            │
│  (Azure OpenAI, etc.)   │
└─────────────────────────┘

pip install agent-framework-ag-ui --pre