Comment connecter des agents IA au frontend sans réinventer la roue

Si vous avez déjà essayé de connecter un agent construit avec LangGraph ou CrewAI à une application web, vous vous souvenez probablement de cette chaîne d'actions. D'abord, vous envoyez une requête au LLM. Ensuite, vous configurez le streaming de tokens via Server-Sent Events ou WebSockets. Ensuite, l'agent décide d'appeler un outil, et vous devez afficher une belle barre de progression dans l'interface ou demander la permission à l'utilisateur. À la fin, la moitié de votre code se transforme en un désordre d'événements websocket, de générateurs personnalisés et d'analyseurs JSON.

L'équipe CopilotKit, avec les auteurs de frameworks populaires, a décidé de mettre fin à cela. Ils ont publié AG-UI (Agent-User Interaction Protocol) — un protocole ouvert basé sur les événements pour connecter des interfaces web aux backends d'agents IA.

Où AG-UI s'intègre dans l'architecture moderne

L'architecture des applications alimentées par l'IA se divise progressivement en standards. Une séparation claire des responsabilités émerge maintenant :

• MCP (Model Context Protocol) donne à l'agent l'accès aux bases de données, aux API et aux outils internes.
• A2A (Agent-to-Agent) gère le dialogue et la coordination entre les agents.
• AG-UI connecte le travail de l'agent à l'interface utilisateur.

Cela crée un flux de bout en bout. L'agent récupère les données via MCP, communique avec les services voisins via A2A, et livre le résultat et le processus d'exécution au navigateur via AG-UI.

Ce qu'il y a à l'intérieur du protocole

La base est l'abonnement aux événements. Le backend de l'agent génère des événements à partir de 16 types standard, et l'interface cliente y réagit. Le transport peut être n'importe quoi : SSE, WebSockets, ou de simples webhooks HTTP.

Le protocole inclut plusieurs capacités principales.

La synchronisation d'état fonctionne dans les deux sens. Si l'agent change son état pendant l'exécution, les mises à jour atteignent instantanément le frontend. Si l'utilisateur modifie quelque chose dans l'UI, l'état mis à jour revient à l'agent.

L'UI générative résout le problème des réponses textuelles ternes. L'agent envoie des données structurées que le frontend transforme en composants React familiers : graphiques, tableaux, formulaires de saisie.

Les scénarios d'intervention humaine sont supportés prêts à l'emploi. L'agent met en pause l'exécution et attend que l'utilisateur clique sur un bouton dans l'interface ou confirme une action critique.

Les outils frontend fonctionnent en contact direct avec le backend. L'agent appelle des fonctions directement sur le client, par exemple pour demander la géolocalisation ou basculer un onglet dans l'interface.

Frameworks supportés et SDKs clients

L'avantage principal d'AG-UI est que vous n'aurez pas à écrire l'intégration from scratch. Les développeurs ont déjà préparé des connecteurs prêts à l'emploi pour la plupart des frameworks.

Le support backend inclut :

• LangGraph et CrewAI
• Microsoft Agent Framework et Google ADK
• Pydantic AI, LlamaIndex, Agno et AG2
• Claude Agent SDK

Pour écrire des clients, il y a des SDKs dans des langages populaires : Kotlin, Go, Dart, Java, Rust, C++ et Python. Et la bibliothèque CopilotKit fournit des composants UI prêts à l'emploi pour React.

Comment l'essayer en pratique

Vous pouvez créer une application de test avec une seule commande terminal :

npx create-ag-ui-app my-agent-app

Cette commande lancera un projet prêt à l'emploi avec un frontend et une configuration d'agent.

AG-UI Dojo mérite une attention particulière. C'est une collection d'exemples de code minimalistes allant de 50 à 200 lignes. Vous y trouverez des implémentations de modèles d'interaction spécifiques : de l'état partagé au streaming pas à pas du processus de réflexion de l'agent.

À qui cet outil est destiné

Si vous construisez un simple chatbot textuel, AG-UI sera surdimensionné. Les solutions standard suffisent pour le streaming textuel régulier.

Le protocole brille là où les agents interagissent activement avec l'interface : modification de formulaires, demande de confirmation utilisateur, rendu de widgets et utilisation des API du navigateur. Dans de tels projets, AG-UI fait gagner des semaines de travail sur l'écriture de protocoles de transport.