AG-UI Integração 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 de interface do usuário. A integração do Agent Framework AG-UI fornece conectividade perfeita entre seus agentes e clientes da Web.

O que é AG-UI?

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

  • Remote Agent Hosting: implante agentes de IA como serviços Web acessíveis por vários clientes
  • Streaming em tempo real: transmitir respostas do agente usando eventos enviados pelo servidor (SSE) para feedback imediato
  • Comunicação padronizada: formato de mensagem consistente para interações confiáveis com agentes
  • Gestão de Sessões: Manter o contexto da conversa entre múltiplos pedidos
  • Recursos avançados: aprovações human-in-the-loop, sincronização de estado e renderização personalizada da interface do usuário

Quando usar AG-UI

Considere o uso de AG-UI quando precisar:

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

Cenários AG-UI

AG-UI define sete cenários de apresentação. O suporte ao MAF varia consoante o SDK; Use a secção específica da linguagem nesta página para o nível de suporte atual e orientações de implementação.

  1. Bate-papo agentico: bate-papo básico de streaming com chamadas automáticas de ferramentas
  2. Renderização de ferramentas de back-end: ferramentas executadas em back-end 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. Agentic Generative UI: ferramentas assíncronas para operações de longa execução com atualizações de progresso
  5. Interface do usuário generativa baseada em ferramentas: componentes personalizados da interface do usuário renderizados com base em chamadas de ferramentas
  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

Crie interfaces de usuário do agente com o CopilotKit

O CopilotKit fornece componentes avançados de interface do usuário para criar interfaces de usuário do agente com base no protocolo AG-UI padrão. O CopilotKit suporta interfaces de bate-papo de streaming, chamadas de ferramentas de frontend e backend, interações com participação humana, interfaces de usuário gerativas, estado compartilhado e muito mais. Pode ver exemplos dos vários cenários de interface de agentes que o CopilotKit suporta na aplicação de exemplo AG-UI Dojo.

Para ligar um frontend React do CopilotKit a um Agent Framework AG-UI backend, regista o teu endpoint como um HttpAgent no runtime do CopilotKit. Isto permite que as ferramentas frontend do CopilotKit fluam como ferramentas AG-UI cliente, e todas as funcionalidades AG-UI (streaming, aprovações, sincronização de estado) funcionem automaticamente.

O CopilotKit ajuda-o a concentrar-se nas capacidades do seu agente, ao mesmo tempo que proporciona uma experiência de utilizador polida sem reinventar a roda. Para saber mais sobre como começar com Microsoft Agent Framework e CopilotKit, consulte a documentação de integração do Microsoft Agent Framework para o CopilotKit.

Integração com .NET

A integração .NET expõe um MAF AIAgent como um endpoint HTTP AG-UI. O adaptador de hospedagem converte o fluxo de resposta do agente em eventos AG-UI; O comportamento dos agentes centrais, como a execução e aprovação da ferramenta, mantém-se parte do MAF.

Use a integração .NET para:

Os clientes AG-UI decidem como apresentar eventos de texto, de ferramentas, de aprovação e de estado.

Architecture

O pacote de alojamento C# adiciona um endpoint ASP.NET Core em torno de um agente MAF comum:

AG-UI client -- HTTP POST / SSE --> MapAGUIServer --> AIAgent

MapAGUIServer converte o pedido da AG-UI em mensagens MAF e opções de execução. Depois, converte a resposta de streaming do agente para eventos AG-UI usando o SDK AG-UI .NET.

Instalação

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

Passos seguintes

Comece com o AG-UI

AG-UI vs. Uso Direto do Agente

Embora você possa executar agentes diretamente em seu aplicativo usando métodos run e run(..., stream=True) do Agent Framework, AG-UI fornece recursos adicionais:

Feature Uso direto do agente Integração AG-UI
Deployment Incorporado na aplicação Serviço remoto via HTTP
Acesso para Cliente Aplicação única Vários clientes (web, mobile)
Streaming Iteração assíncrona em processo Server-Sent Eventos (SSE)
Gestão do Estado Gerenciado por aplicativos Sincronização bidirecional em nível de protocolo
Contexto do thread Gerenciado por aplicativos IDs de thread gerenciados por protocolo
Fluxos de trabalho de aprovação Implementação personalizada Suporte de protocolo integrado

Visão geral da arquitetura

A integração AG-UI usa uma arquitetura limpa e modular:

┌─────────────────┐
│  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.)   │
└─────────────────────────┘

Componentes-chave

  • FastAPI Endpoint: Endpoint HTTP que gere streaming SSE, comentários configuráveis para keepalive e encaminhamento de pedidos
  • AgentFrameworkAgent: wrapper leve que adapta os agentes do Agent Framework ao protocolo AG-UI
  • Orquestradores: lidam com diferentes fluxos de execução (padrão, human-in-the-loop, gerenciamento de estado)
  • Event Bridge: converte eventos do Agent Framework em eventos de protocolo AG-UI
  • Adaptadores de mensagem: conversão bidirecional entre os formatos de mensagem AG-UI e Agent Framework
  • Estratégias de confirmação: estratégias extensíveis para mensagens de confirmação específicas do domínio

Como o Agent Framework se traduz em AG-UI

Compreender como os conceitos do Agent Framework são mapeados para AG-UI ajuda a criar integrações eficazes:

Conceito de estrutura de agente AG-UI Equivalente Description
Agent Ponto de Interação do Agente Cada agente se torna um ponto de extremidade HTTP
agent.run() Solicitação HTTP POST Cliente envia mensagens via HTTP
agent.run(..., stream=True) Eventos enviados pelo servidor Streaming de respostas via SSE
Atualizações nas respostas dos agentes AG-UI Eventos TEXT_MESSAGE_CONTENT, TOOL_CALL_START, etc.
Ferramentas funcionais (@tool) Ferramentas de back-end Executado no servidor, os resultados são transmitidos para o cliente
Modo de aprovação da ferramenta Humano no Loop Pedidos de aprovação/respostas via protocolo
Histórico de conversações Gerenciamento de threads threadId Mantém o contexto entre solicitações

Instalação

Instale o pacote de integração AG-UI:

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

Isso instala tanto a estrutura do agente principal como os componentes de integração do AG-UI.

Próximas Etapas

Para começar com a integração AG-UI:

  1. Introdução: crie seu primeiro servidor e cliente AG-UI
  2. Renderização de ferramentas de back-end: adicione ferramentas de função aos seus agentes
  3. Fluxos de trabalho: Exponha fluxos de trabalho multi-agente através de AG-UI
  4. Humano no Ciclo: Implementar fluxos de trabalho de aprovação
  5. Compatibilidade com Aplicações MCP: Use Aplicações MCP com o seu endpoint AG-UI
  6. Gestão de Estado: Sincronizar o estado entre cliente e servidor

Recursos adicionais

Go suporta a AG-UI através de provider/aguiprovider para servidores e clientes.

import "github.com/microsoft/agent-framework-go/provider/aguiprovider"

mux := http.NewServeMux()
mux.Handle("/", aguiprovider.NewJSONHTTPHandler(myAgent, aguiprovider.HandlerConfig{}))

if err := http.ListenAndServe(":8888", mux); err != nil {
    log.Fatal(err)
}

Tip

Consulte os exemplos doAG-UI Go para exemplos completos de servidores e clientes.

  • Last updated on