Hoe AI-agents met de frontend verbinden zonder het wiel opnieuw uit te vinden

Als je ooit hebt geprobeerd een agent die je met LangGraph of CrewAI hebt gebouwd aan een webapplicatie te koppelen, herinner je je waarschijnlijk deze reeks acties. Eerst stuur je een verzoek naar de LLM. Vervolgens stel je token-streaming in via Server-Sent Events of WebSockets. Daarna besluit de agent een tool aan te roepen, en moet je een mooie voortgangsbalk in de interface weergeven of de gebruiker om toestemming vragen. Uiteindelijk verandert de helft van je codebase in een rommeltje van websocket-events, aangepaste generators en JSON-parsers.

Het CopilotKit-team, samen met de auteurs van populaire frameworks, besloot hier een einde aan te maken. Ze hebben AG-UI (Agent-User Interaction Protocol) uitgebracht — een open, event-driven protocol voor het verbinden van webinterfaces met AI-agent backends.

Waar AG-UI past in moderne architectuur

De architectuur van AI-aangedreven applicaties splitst zich geleidelijk uit in standaarden. Een duidelijke scheiding van verantwoordelijkheden komt nu naar voren:

• MCP (Model Context Protocol) geeft de agent toegang tot databases, API's en interne tools.
• A2A (Agent-to-Agent) regelt de dialoog en coördinatie tussen agents.
• AG-UI verbindt het werk van de agent met de gebruikersinterface.

Dit creëert een end-to-end stroom. De agent haalt data via MCP, communiceert met naburige services via A2A en levert het resultaat en het uitvoeringsproces via AG-UI aan de browser.

Wat er in het protocol zit

De basis is event-subscription. De agent backend genereert events van 16 standaard types, en de client interface reageert erop. Het transport kan van alles zijn: SSE, WebSockets of gewone HTTP webhooks.

Het protocol bevat verschillende kernmogelijkheden.

State-synchronisatie werkt beide kanten op. Als de agent zijn state tijdens de uitvoering wijzigt, bereiken de updates onmiddellijk de frontend. Als de gebruiker iets in de UI wijzigt, gaat de bijgewerkte state terug naar de agent.

Generative UI lost het probleem op van droge tekstreacties. De agent stuurt gestructureerde data die de frontend omzet in vertrouwde React-componenten: grafieken, tabellen, invoerformulieren.

Human-in-the-loop-scenario's worden out-of-the-box ondersteund. De agent pauzeert de uitvoering en wacht tot de gebruiker op een knop in de interface klikt of een kritieke actie bevestigt.

Frontend-tools werken in directe verbinding met de backend. De agent roept functies rechtstreeks aan op de client, bijvoorbeeld om geolocatie op te vragen of een tabblad in de interface te schakelen.

Ondersteunde frameworks en client SDK's

Het grote voordeel van AG-UI is dat je geen integratie vanaf nul hoeft te schrijven. Ontwikkelaars hebben al kant-en-klare connectors voorbereid voor de meeste frameworks.

Backend-ondersteuning omvat:

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

Voor het schrijven van clients zijn er SDK's in populaire talen: Kotlin, Go, Dart, Java, Rust, C++ en Python. En de CopilotKit-bibliotheek biedt kant-en-klare UI-componenten voor React out-of-the-box.

Hoe het in de praktijk te proberen

Je kunt een testapplicatie maken met één terminalopdracht:

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

Met deze opdracht wordt een kant-en-klaar project opgezet met een geconfigureerde frontend en agent-setup.

AG-UI Dojo verdient speciale aandacht. Het is een verzameling minimalistische codevoorbeelden variërend van 50 tot 200 regels. Daar vind je implementaties van specifieke interactiepatronen: van gedeelde state tot stapsgewijze streaming van het denkproces van de agent.

Voor wie dit instrument bedoeld is

Als je een eenvoudige tekst-chatbot bouwt, is AG-UI overkill. Standaardoplossingen zijn voldoende voor reguliere tekst-streaming.

Het protocol schittert daar waar agents actief met de interface interageren: formulieren wijzigen, gebruikersbevestiging vereisen, widgets renderen en browser-API's gebruiken. In dergelijke projecten bespaart AG-UI weken werk aan het schrijven van transportprotocollen.