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

scénarios AG-UI

AG-UI définit sept scénarios de présentation. La prise en charge de MAF varie selon le Kit de développement logiciel (SDK) ; utilisez la section spécifique à la langue de cette page pour obtenir les instructions de prise en charge et d’implémentation actuelles.

  1. Conversation agentique : conversation en continu de base avec appel automatique d’outils
  2. 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
  3. Humain dans la boucle : demandes de validation de fonction nécessitant la confirmation de l'utilisateur
  4. Interface Utilisateur Générative et Agentielle : outils asynchrones pour les opérations de longue durée avec des mises à jour de progression
  5. Interface utilisateur Générative basée sur les outils : composants d’interface utilisateur personnalisés rendus en fonction des appels d’outils
  6. État partagé : synchronisation d’état bidirectionnel entre le client et le serveur
  7. 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 de scénarios d’interface utilisateur d’agent pris en charge par CopilotKit dans l'application d'exemple AG-UI Dojo.

Pour connecter un front-end CopilotKit React à un back-end Agent Framework AG-UI, inscrivez votre point de terminaison en tant qu'élément HttpAgent dans l'environnement d'exécution CopilotKit. Cela permet aux outils front-end de CopilotKit de passer en tant qu’outils clients AG-UI, et toutes les fonctionnalités de AG-UI (streaming, approbations, synchronisation d’état) fonctionnent automatiquement.

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 sur l'intégration de Microsoft Agent Framework à CopilotKit.

Intégration de .NET

L’intégration .NET expose un maF AIAgent en tant que point de terminaison HTTP AG-UI. L’adaptateur d’hébergement convertit le flux de réponse de l’agent en événements AG-UI ; le comportement de l’agent principal, tel que l’exécution de l’outil et l’approbation, fait partie de MAF.

Utilisez l’intégration .NET pour :

AG-UI clients décident comment afficher le texte, l’outil, l’approbation et les événements d’état.

Architecture

Le package d’hébergement C# ajoute un point de terminaison ASP.NET Core autour d’un agent MAF ordinaire :

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

MapAGUIServer adapte la requête AG-UI aux messages MAF et exécute les options d’exécution. Il convertit ensuite la réponse de streaming de l'agent en événements AG-UI à l'aide du KIT de développement logiciel (SDK) AG-UI .NET.

Installation

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

Étapes suivantes

Bien démarrer avec AG-UI

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 :

Fonctionnalité Utilisation directe de l’agent intégration de AG-UI
Deployment 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

Vue d’ensemble 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 la diffusion en continu SSE, les commentaires keepalive configurables et le routage des requêtes
  • 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 Description
Agent 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.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 de la conversation 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.

Prochaines étapes

Pour commencer à intégrer AG-UI :

  1. Prise en main : Créer votre premier serveur et client AG-UI
  2. Rendu de l’outil principal : ajouter des outils de fonction à vos agents
  3. Les flux de travail : Exposer les flux de travail multi-agents via AG-UI
  4. Human-in-the-Loop : Implémenter des flux de travail d’approbation
  5. Compatibilité des applications MCP : utiliser des applications MCP avec votre point de terminaison AG-UI
  6. Gestion de l’état : synchroniser l’état entre le client et le serveur

Ressources additionnelles

Go prend en charge AG-UI via provider/aguiprovider, pour les serveurs comme pour les clients.

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

Consultez les exemples AG-UI Go pour voir des exemples complets de serveur et de client.

  • Last updated on