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

Funcionalidades Suportadas

A integração do Agent Framework AG-UI suporta todos os 7 recursos do protocolo AG-UI:

Bate-papo agentico: bate-papo básico de streaming com chamadas automáticas de ferramentas
Renderização de ferramentas de back-end: ferramentas executadas em back-end com resultados transmitidos para o cliente
Human in the Loop: Solicitações de aprovação de função para confirmação do usuário
Agentic Generative UI: ferramentas assíncronas para operações de longa execução com atualizações de progresso
Interface do usuário generativa baseada em ferramentas: componentes personalizados da interface do usuário renderizados com base em chamadas de ferramentas
Estado compartilhado: sincronização de estado bidirecional entre cliente e servidor
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. Você pode ver exemplos dos vários cenários de interface do usuário do agente que o CopilotKit suporta na aplicação de exemplo AG-UI Dojo.

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 a usar o Microsoft Agent Framework e o CopilotKit, consulte a documentação da integração do Microsoft Agent Framework para CopilotKit .

AG-UI vs. Uso Direto do Agente

Embora você possa executar agentes diretamente em seu aplicativo usando métodos Run e RunStreamingAsync do Agent Framework, AG-UI fornece recursos adicionais:

Característica	Uso direto do agente	Integração AG-UI
Implantação	Incorporado na aplicação	Serviço remoto via HTTP
Acesso para Cliente	Aplicação única	Vários clientes (web, mobile)
Serviço de streaming	Iteração assíncrona em processo	Server-Sent Eventos (SSE)
Gestão do Estado	Gerenciado por aplicativos	Instantâneos de estado no nível do protocolo
Contexto da Sessão	Gerenciado por aplicativos	IDs de sessão geridos por protocolo
Fluxos de trabalho de aprovação	Implementação personalizada	Padrão de middleware integrado

Visão geral da arquitetura

A integração AG-UI usa o ASP.NET Core e segue uma arquitetura limpa baseada em middleware:

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

Componentes-chave

ASP.NET Core Endpoint: MapAGUI o método de extensão lida com solicitações HTTP e streaming SSE
AIAgent: agente do Agent Framework criado a partir de IChatClient ou implementação personalizada
Pipeline de middleware: middleware opcional para aprovações, gerenciamento de estado e lógica personalizada
Adaptador de protocolo: converte entre tipos do Agent Framework e eventos de protocolo AG-UI
Cliente de chat: Microsoft.Extensions.AI cliente de chat (Azure OpenAI, OpenAI, Ollama, etc.)

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
`AIAgent`	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.RunStreamingAsync()`	Eventos enviados pelo servidor	Streaming de respostas via SSE
`AgentResponseUpdate`	AG-UI Eventos	Convertido em eventos de protocolo automaticamente
`AIFunctionFactory.Create()`	Ferramentas de back-end	Executado no servidor, resultados transmitidos
`ApprovalRequiredAIFunction`	Humano no Loop	Middleware converte para um protocolo de aprovação
`AgentSession`	Gestão de Sessões	`ConversationId` mantém o contexto
`ChatResponseFormat.ForJsonSchema<T>()`	Instantâneos de estado	A saída estruturada transforma-se em eventos de estado

Installation

A integração AG-UI está incluída no pacote de hospedagem ASP.NET Core:

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

Este pacote inclui todas as dependências necessárias para AG-UI integração, incluindo Microsoft.Extensions.AI.

Próximas Etapas

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

Introdução: crie seu primeiro servidor e cliente AG-UI
Renderização de ferramentas de back-end: adicione ferramentas de função aos seus agentes

Recursos adicionais

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:

Característica	Uso direto do agente	Integração AG-UI
Implantação	Incorporado na aplicação	Serviço remoto via HTTP
Acesso para Cliente	Aplicação única	Vários clientes (web, mobile)
Serviço de 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

Ponto de extremidade FastAPI: ponto de extremidade HTTP que lida com streaming SSE e roteamento de solicitações
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 extremidade 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 da conversa	Gerenciamento de threads	`threadId` Mantém o contexto entre solicitações

Installation

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:

Introdução: crie seu primeiro servidor e cliente AG-UI
Renderização de ferramentas de back-end: adicione ferramentas de função aos seus agentes

Recursos adicionais

Documentação do Agent Framework
Documentação do ProtocoloAG-UI
AG-UI Dojo App - Exemplo de aplicação que demonstra a integração com o Agent Framework
Repositório GitHub do Agent Framework

Feedback

Esta página foi útil?

Last updated on 2026-01-28

Partilhar via

AG-UI Integração com o Agent Framework

O que é AG-UI?

Quando usar AG-UI

Funcionalidades Suportadas

Crie interfaces de usuário do agente com o CopilotKit

AG-UI vs. Uso Direto do Agente

Visão geral da arquitetura

Componentes-chave

Como o Agent Framework se traduz em AG-UI

Installation

Próximas Etapas

Recursos adicionais

AG-UI vs. Uso Direto do Agente

Visão geral da arquitetura

Componentes-chave

Como o Agent Framework se traduz em AG-UI

Installation

Próximas Etapas

Recursos adicionais

Feedback

Recursos adicionais