Compartir a través de

integración de AG-UI con Agent Framework

AG-UI es un protocolo que permite crear aplicaciones de agente de IA basadas en web con características avanzadas, como streaming en tiempo real, administración de estado y componentes de interfaz de usuario interactivos. La integración de Agent Framework AG-UI proporciona conectividad sin problemas entre los agentes y los clientes web.

¿Qué es AG-UI?

AG-UI es un protocolo estandarizado para crear interfaces de agente de IA que proporciona:

  • Hospedaje de agente remoto: implementación de agentes de IA como servicios web accesibles por varios clientes
  • Streaming en tiempo real: transmisión de respuestas del agente mediante eventos enviados por el servidor (EES) para retroalimentación inmediata
  • Comunicación estandarizada: formato de mensaje coherente para interacciones de agente confiables
  • Administración de sesiones: mantener el contexto de conversación en varias solicitudes
  • Características avanzadas: aprobaciones con intervención humana, sincronización de estado y renderizado personalizado de la interfaz de usuario

Cuándo usar AG-UI

Considere la posibilidad de usar AG-UI cuando necesite:

  • Creación de aplicaciones web o móviles que interactúan con agentes de inteligencia artificial
  • Implementación de agentes como servicios accesibles por varios usuarios simultáneos
  • Emitir respuestas del agente en tiempo real para proporcionar retroalimentación inmediata al usuario.
  • Implementación de flujos de trabajo de aprobación en los que los usuarios confirman acciones antes de la ejecución
  • Sincronizar el estado entre el cliente y el servidor para experiencias interactivas
  • Representación de componentes de interfaz de usuario personalizados basados en llamadas a herramientas de agente

Características compatibles

La integración de Agent Framework AG-UI admite todas las 7 características del protocolo AG-UI:

  1. Chat de agente: chat de streaming básico con llamadas automáticas a herramientas
  2. Representación de herramientas de back-end: herramientas ejecutadas en back-end con resultados transmitidos al cliente
  3. Human in the Loop: Solicitudes de aprobación de funcionalidades para confirmar por el usuario
  4. Interfaz generativa de usuario agente: herramientas asíncronas para operaciones de larga duración con actualizaciones sobre el progreso
  5. Interfaz de usuario generativa basada en herramientas: componentes de interfaz de usuario personalizados representados en función de las llamadas a herramientas
  6. Estado compartido: sincronización de estado bidireccional entre el cliente y el servidor
  7. Actualizaciones de estado predictivo: argumentos de la herramienta de transmisión como actualizaciones de estado optimista

Compilación de interfaces de usuario del agente con CopilotKit

CopilotKit proporciona componentes enriquecidos de la interfaz de usuario para crear interfaces de usuario de agente basadas en el protocolo estándar AG-UI. CopilotKit admite interfaces de chat en streaming, llamadas de front-end y back-end, interacciones humanas en el bucle, interfaz de usuario generativa, estado compartido y mucho más. Puede ver un ejemplo de los distintos escenarios de interfaz de usuario del agente compatibles con CopilotKit en la aplicación de ejemplo AG-UI Dojo .

CopilotKit le ayuda a centrarse en las funcionalidades del agente al tiempo que ofrece una experiencia de usuario pulida sin reinventar la rueda. Para obtener más información sobre cómo empezar a trabajar con Microsoft Agent Framework y CopilotKit, consulte la documentación de integración de Microsoft Agent Framework para CopilotKit .

AG-UI frente al uso del agente directo

Aunque puede ejecutar agentes directamente en su aplicación utilizando los métodos Run y RunStreamingAsync del Marco de Agente, AG-UI proporciona capacidades adicionales.

Característica Uso del agente directo integración de AG-UI
Despliegue Incrustado en la aplicación Servicio remoto a través de HTTP
Acceso de cliente Aplicación única Varios clientes (web, móviles)
Transmisión en línea Iteración asincrónica en proceso Server-Sent Eventos (SSE)
Administración de estados Administrado por la aplicación Instantáneas de estado de nivel de protocolo
Contexto de sesión Administrado por la aplicación Identificadores de sesión administrados por protocolo
Flujos de trabajo de aprobación Implementación personalizada Patrón de middleware integrado

Introducción a la arquitectura

La integración de AG-UI usa ASP.NET Core y sigue una arquitectura limpia basada en middleware:

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

Componentes clave

  • ASP.NET Core Endpoint: MapAGUI el método de extensión maneja las solicitudes HTTP y la transmisión SSE.
  • AIAgent: agente de Agent Framework creado a partir de IChatClient o implementación personalizada
  • Pipeline de middleware: middleware opcional para aprobaciones, administración de estado y lógica personalizada
  • Adaptador de Protocolo: convierte entre tipos de framework de agente y eventos de protocolo de AG-UI
  • Cliente de chat: Microsoft.Extensions.AI cliente de chat (Azure OpenAI, OpenAI, Ollama, etc.)

Cómo se traduce Agent Framework en AG-UI

Comprender cómo se asignan los conceptos de Agent Framework a AG-UI le ayuda a crear integraciones eficaces:

Concepto del marco de trabajo del agente AG-UI equivalente Description
AIAgent Punto de conexión del agente Cada agente se convierte en un punto de conexión HTTP.
agent.Run() Solicitud HTTP POST El cliente envía mensajes a través de HTTP
agent.RunStreamingAsync() Eventos enviados por el servidor Streaming de respuestas a través de SSE
AgentResponseUpdate eventos de AG-UI Convertido automáticamente en eventos de protocolo
AIFunctionFactory.Create() Herramientas de back-end Ejecución en el servidor, resultados transmitidos en secuencias
ApprovalRequiredAIFunction Humano en el Bucle El middleware se convierte en protocolo de aprobación
AgentSession Administración de sesiones ConversationId mantiene el contexto
ChatResponseFormat.ForJsonSchema<T>() Instantáneas de estado La salida estructurada se convierte en eventos de estado

Installation

La integración de AG-UI se incluye en el paquete de hospedaje ASP.NET Core:

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

Este paquete incluye todas las dependencias necesarias para AG-UI integración, incluido Microsoft.Extensions.AI.

Pasos siguientes

Para empezar a trabajar con la integración de AG-UI:

  1. Introducción: Compilación del primer servidor y cliente de AG-UI
  2. Representación de herramientas de back-end: agregar herramientas de función a los agentes

Recursos adicionales

AG-UI frente al uso del agente directo

Aunque puede ejecutar agentes directamente en su aplicación utilizando los métodos run y run(..., stream=True) del Marco de Agente, AG-UI proporciona capacidades adicionales.

Característica Uso del agente directo integración de AG-UI
Despliegue Incrustado en la aplicación Servicio remoto a través de HTTP
Acceso de cliente Aplicación única Varios clientes (web, móviles)
Transmisión en línea Iteración asincrónica en proceso Server-Sent Eventos (SSE)
Administración de estados Administrado por la aplicación Sincronización de nivel de protocolo bidireccional
Contexto de hilo Administrado por la aplicación Identificadores de subprocesos administrados mediante protocolo
Flujos de trabajo de aprobación Implementación personalizada Compatibilidad con protocolos integrados

Introducción a la arquitectura

La integración de AG-UI usa una arquitectura modular limpia:

┌─────────────────┐
│  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 clave

  • Punto de conexión de FastAPI: punto de conexión HTTP que controla el enrutamiento de solicitudes y streaming de SSE
  • AgentFrameworkAgent: contenedor ligero que adapta los agentes de Agent Framework al protocolo AG-UI
  • Orquestadores: manejan diferentes flujos de ejecución (predeterminado, con intervención humana, gestión de estado)
  • Puente de Eventos: convierte eventos de Agent Framework en eventos de protocolo de AG-UI
  • Adaptadores de Mensajes: conversión bidireccional entre AG-UI y formatos de mensaje de Agent Framework
  • Estrategias de confirmación: estrategias extensibles para mensajes de confirmación específicos del dominio

Cómo se traduce Agent Framework en AG-UI

Comprender cómo se asignan los conceptos de Agent Framework a AG-UI le ayuda a crear integraciones eficaces:

Concepto del marco de trabajo del agente AG-UI equivalente Description
Agent Punto de conexión del agente Cada agente se convierte en un punto de conexión HTTP.
agent.run() Solicitud HTTP POST El cliente envía mensajes a través de HTTP
agent.run(..., stream=True) Eventos enviados por el servidor Streaming de respuestas a través de SSE
Actualizaciones de respuesta del agente eventos de AG-UI TEXT_MESSAGE_CONTENT, TOOL_CALL_START, etc.
Herramientas de funciones (@tool) Herramientas de back-end Ejecutados en el servidor, los resultados son enviados al cliente
Modo de aprobación de herramientas Humano en el Bucle Solicitudes o respuestas de aprobación a través del protocolo
Historial de conversaciones Administración de subprocesos threadId mantiene el contexto entre las solicitudes.

Installation

Instale el paquete de integración de AG-UI:

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

Esto instala tanto el marco de trabajo del agente principal como los componentes de integración de AG-UI.

Pasos siguientes

Para empezar a trabajar con la integración de AG-UI:

  1. Introducción: Compilación del primer servidor y cliente de AG-UI
  2. Representación de herramientas de back-end: agregar herramientas de función a los agentes

Recursos adicionales

  • Last updated on