Intégration de AG-UI à Agent Framework

AG-UI est un protocole qui vous permet de créer des applications d’agent IA basées sur le web avec des fonctionnalités avancées telles que la diffusion en continu en temps réel, la gestion des états et les composants interactifs de l’interface utilisateur. L’intégration AG-UI Agent Framework fournit une connectivité transparente entre vos agents et clients web.

Qu’est-ce que AG-UI ?

AG-UI est un protocole standardisé permettant de créer des interfaces d’agent IA qui fournissent :

Hébergement d’agents distants : déployer des agents IA en tant que services web accessibles par plusieurs clients
Diffusion en continu en temps réel : Diffuser en continu les réponses de l’agent à l’aide d’Événements Envoyés par le Serveur (SSE) pour un retour immédiat
Communication standardisée : format de message cohérent pour les interactions d’agent fiables
Gestion des sessions : Gérer le contexte de conversation entre plusieurs requêtes
Fonctionnalités avancées : approbations avec intervention humaine, synchronisation d’état et rendu de l’interface utilisateur personnalisé

Quand utiliser AG-UI

Envisagez d’utiliser AG-UI lorsque vous devez :

Créer des applications web ou mobiles qui interagissent avec des agents IA
Déployer des agents en tant que services accessibles par plusieurs utilisateurs simultanés
Diffuser en temps réel les réponses de l'agent pour fournir des commentaires immédiats à l'utilisateur
Implémenter des flux de travail d’approbation où les utilisateurs confirment les actions avant l’exécution
Synchroniser l’état entre le client et le serveur pour des expériences interactives
Afficher des composants d’interface utilisateur personnalisés basés sur des appels d’outil d’agent

Fonctionnalités prises en charge

L’intégration de l'Agent Framework AG-UI prend en charge toutes les 7 fonctionnalités du protocole AG-UI :

Conversation agentique : conversation en continu de base avec appel automatique d’outils
Rendu de l’outil back-end : outils exécutés sur le serveur principal avec des résultats diffusés en continu vers le client
Humain dans la boucle : demandes de validation de fonction nécessitant la confirmation de l'utilisateur
Interface Utilisateur Générative et Agentielle : outils asynchrones pour les opérations de longue durée avec des mises à jour de progression
Interface utilisateur Générative basée sur les outils : composants d’interface utilisateur personnalisés rendus en fonction des appels d’outils
État partagé : synchronisation d’état bidirectionnel entre le client et le serveur
Mises à jour d’état prédictif : diffuser des arguments d’outil en tant que mises à jour d’état optimistes

Générer des interfaces utilisateur d’agent avec CopilotKit

CopilotKit fournit des composants d’interface utilisateur riches pour la création d’interfaces utilisateur d’agent basées sur le protocole standard AG-UI. CopilotKit prend en charge les interfaces de conversation en streaming, l’appel d’outils frontend et back-end, les interactions humaines dans la boucle, l’interface utilisateur générative, l’état partagé et bien plus encore. Vous pouvez voir des exemples des différents scénarios d’interface utilisateur de l’agent pris en charge par CopilotKit dans l’exemple d’applicationAG-UI Dojo .

CopilotKit vous aide à vous concentrer sur les fonctionnalités de votre agent tout en offrant une expérience utilisateur polie sans réinventer la roue. Pour en savoir plus sur la prise en main de Microsoft Agent Framework et copilotKit, consultez la documentation relative à l’intégration de Microsoft Agent Framework pour CopilotKit .

AG-UI par rapport à l’utilisation de l’agent direct

Même si vous pouvez exécuter des agents directement dans votre application à l’aide des méthodes Run et RunStreamingAsync du Framework Agent, AG-UI offre des fonctionnalités supplémentaires :

Caractéristique	Utilisation directe de l’agent	intégration de AG-UI
Déploiement	Incorporé dans l’application	Service distant via HTTP
Accès client	Application unique	Plusieurs clients (web, mobile)
Diffusion en continu	Itération asynchrone en cours	événements Server-Sent (SSE)
Gestion de l’état	Géré par l’application	Instantanés d’état au niveau du protocole
Contexte de session	Géré par l’application	ID de session gérés par protocole
Flux de travail d’approbation	Implémentation personnalisée	Modèle d’intergiciel intégré

Présentation de l'architecture

L’intégration AG-UI utilise ASP.NET Core et suit une architecture propre basée sur les intergiciels :

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

Composants clés

Point de terminaison ASP.NET Core : MapAGUI la méthode d’extension gère les requêtes HTTP et la diffusion en continu SSE
AIAgent : Agent Framework agent créé à partir IChatClient ou implémentation personnalisée
Pipeline middleware : intergiciel facultatif pour les approbations, la gestion des états et la logique personnalisée
Adaptateur de protocole : convertit les types Agent Framework et les événements de protocole AG-UI
Client de chat : Microsoft.Extensions.AI client de chat (Azure OpenAI, OpenAI, Ollama, etc.)

Comment Agent Framework se traduit en AG-UI

Comprendre comment les concepts d’Agent Framework sont mappés à AG-UI vous aide à créer des intégrations efficaces :

Concept d’infrastructure de l’agent	équivalent AG-UI	Descriptif
`AIAgent`	Point de terminaison de l’agent	Chaque agent devient un point de terminaison HTTP
`agent.Run()`	Requête HTTP POST	Le client envoie des messages via HTTP
`agent.RunStreamingAsync()`	Événements envoyés par le serveur	Diffusion en continu des réponses via SSE
`AgentResponseUpdate`	événements AG-UI	Converti automatiquement en événements de protocole
`AIFunctionFactory.Create()`	Outils principaux	Exécuté sur le serveur, les résultats sont diffusés en continu
`ApprovalRequiredAIFunction`	Humain dans la boucle	Le middleware est converti en protocole d’approbation.
`AgentSession`	Gestion des sessions	`ConversationId` maintient le contexte
`ChatResponseFormat.ForJsonSchema<T>()`	Captures d’état	La sortie structurée devient des événements d’état

Installation

L’intégration AG-UI est incluse dans le package d’hébergement ASP.NET Core :

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

Ce package inclut toutes les dépendances nécessaires pour AG-UI intégration, notamment Microsoft.Extensions.AI.

Étapes suivantes

Pour commencer à intégrer AG-UI :

Prise en main : Créer votre premier serveur et client AG-UI
Rendu de l’outil principal : ajouter des outils de fonction à vos agents

Ressources additionnelles

AG-UI par rapport à l’utilisation de l’agent direct

Même si vous pouvez exécuter des agents directement dans votre application à l’aide des méthodes run et run(..., stream=True) du Framework Agent, AG-UI offre des fonctionnalités supplémentaires :

Caractéristique	Utilisation directe de l’agent	intégration de AG-UI
Déploiement	Incorporé dans l’application	Service distant via HTTP
Accès client	Application unique	Plusieurs clients (web, mobile)
Diffusion en continu	Itération asynchrone en cours	événements Server-Sent (SSE)
Gestion de l’état	Géré par l’application	Synchronisation au niveau du protocole bidirectionnel
Contexte de thread	Géré par l’application	ID de thread géré par protocole
Flux de travail d’approbation	Implémentation personnalisée	Prise en charge intégrée du protocole

Présentation de l'architecture

L’intégration AG-UI utilise une architecture propre et modulaire :

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

Composants clés

Point de terminaison FastAPI : point de terminaison HTTP qui gère le routage de streaming et de requête SSE
AgentFrameworkAgent : wrapper léger qui adapte les agents Agent Framework à AG-UI protocole
Orchestrateurs : gérer différents flux d’exécution (par défaut, human-in-the-loop, gestion d’état)
Pont d’événements : convertit les événements Agent Framework en événements de protocole AG-UI
Adaptateurs de message : conversion bidirectionnelle entre AG-UI et les formats de message Agent Framework
Stratégies de confirmation : stratégies extensibles pour les messages de confirmation spécifiques au domaine

Comment Agent Framework se traduit en AG-UI

Comprendre comment les concepts d’Agent Framework sont mappés à AG-UI vous aide à créer des intégrations efficaces :

Concept d’infrastructure de l’agent	équivalent AG-UI	Descriptif
`Agent`	Point de terminaison d'Agent	Chaque agent devient un point de terminaison HTTP
`agent.run()`	Requête HTTP POST	Le client envoie des messages via HTTP
`agent.run(..., stream=True)`	Événements envoyés par le serveur	Diffusion en continu des réponses via SSE
Mises à jour de la réponse de l’agent	événements AG-UI	`TEXT_MESSAGE_CONTENT`, `TOOL_CALL_START`, etc.
Outils de fonction (`@tool`)	Outils principaux	Exécuté sur le serveur, les résultats sont diffusés en continu vers le client
Mode d’approbation de l’outil	Humain dans la boucle	Demandes/réponses d’approbation via le protocole
Historique des conversations	Gestion des threads	`threadId` maintient le contexte entre les requêtes

Installation

Installez le package d’intégration AG-UI :

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

Cela installe à la fois l’infrastructure de l’agent principal et les composants d’intégration AG-UI.

Étapes suivantes

Pour commencer à intégrer AG-UI :

Prise en main : Créer votre premier serveur et client AG-UI
Rendu de l’outil principal : ajouter des outils de fonction à vos agents

Ressources additionnelles

Documentation de l’infrastructure de l’agent
Documentation du protocoleAG-UI
AG-UI Application Dojo - Exemple d’application illustrant l’intégration d’Agent Framework
Dépôt GitHub pour Agent Framework

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-11-11

Partager via

Intégration de AG-UI à Agent Framework

Qu’est-ce que AG-UI ?

Quand utiliser AG-UI

Fonctionnalités prises en charge

Générer des interfaces utilisateur d’agent avec CopilotKit

AG-UI par rapport à l’utilisation de l’agent direct

Présentation de l'architecture

Composants clés

Comment Agent Framework se traduit en AG-UI

Installation

Étapes suivantes

Ressources additionnelles

AG-UI par rapport à l’utilisation de l’agent direct

Présentation de l'architecture

Composants clés

Comment Agent Framework se traduit en AG-UI

Installation

Étapes suivantes

Ressources additionnelles

Commentaires

Ressources supplémentaires