AG-UI & MCP: Standardizing Agentic Web Interfaces

As web applications evolve to include intelligent, adaptive behavior—from AI-generated suggestions to real-time task assistance—the need for structured, standardized interaction between agents and user interfaces is becoming critical. Relying on ad hoc APIs or closed SDKs leads to brittle integrations, limited extensibility, and inconsistent UX patterns. This talk introduces two open protocols — AG-UI (Agent-User Interaction Protocol) and MCP (Model Context Protocol) — designed to bring clarity, modularity, and interoperability to the way agents interact with modern web frontends.
MCP's enable dynamic context hydration and semantic grounding, allowing agents to operate on structured and unstructured inputs tailored to specific tasks. AG-UI specifies how agents exchange intents, updates, and feedback with the user interface in real time. Together, they provide a consistent way to connect agents with UI components across frameworks like Angular, React, Vue, or vanilla JavaScript.
You’ll see how these protocols can be applied in real-world frontend code to build intelligent, user-facing features — without relying on deeply coupled integrations. This session is aimed at developers who want to integrate AI in a way that’s modular, testable, and understandable.

Transcript

1. AG-UI & MCP Standardizing Agentic Web Interfaces c't <webdev> Max Marschall @MaxOSchulte Consultant / Architect @ Thinktecture
2. Model Context Protocol (MCP) In this Session The Agent–User Interaction (AG-UI) Protocol
3. The Model Context Protocol Think of MCP like a USB-C port for AI applications. [...] MCP provides a standardized way to connect AI applications to external systems. https://modelcontextprotocol.io/docs/getting-started/intro
4. HOST • LLM applications (Claude Desktop, IDEs) that initiate connections The Model Context Protocol CLIENT • 1:1 connection handler inside host, manages protocol communication SERVER • Provides context, tools, and capabilities to clients • Servers can't talk to each other
5. • Do not repeat your self • (KISS) • No standardization across implementations • Fragile when systems change Why should we care?
6. M x N ➡ M+N App 1 App 3 App 2 Database Documentation FAQ App 1 App 3 App 2 Database Documentation FAQ MCP M AI Applications N Tools, Ressources, Prompts ➡
7. • Build once, connect everywhere • Open-source and vendor-neutral • Based on proven patterns The MCP Idea 💡
8. The Model Context Proctocol
9. The Model Context Proctocol
10. The Model Context Proctocol
11. • Tools • Ressources • Prompts • Elicitation • Sampling • Server Composition • Progress Report Features More to come (e.g. MCP-UI)
12. ... is the ability to connect a large language model (LLM) to reliable sources of information to ensure accurate and relevant results. • Improves relevance • Prevents hallucinations • Connects to real-world • Alternatives: Retrievel-Augmented Generation (RAG) & Fine-Tuning Grounding
13. ... is to provide an automated way to add concise contextual information based on the changing requirements. Examples: • Web search / web access • Documentation access Context-Hydration
14. https://modelcontextprotocol.info/docs/clients/ Feature Support Missing features Clients from MCP proposer
15. • Limit your tools • Scope your tools • Tool compatibility • Feature compatibility Best Practices
16. • Different tools by authentication / authorization • Update tool lists depending on preceding queries • Agent Skill enable / disable MCPs • Tool change (command) Context Size Solution: Dynamic Tools
17. • Async-Tools • MCP-UI • Code execution • (Antrophic / Claude) Agent Skills + MCP = RAG-MCP. Not “more tools,” but a better relationship to tools Outlook
18. Model Context Protocol (MCP) In this Session The Agent–User Interaction (AG-UI) Protocol
19. The Agent–User Interaction (AG-UI) Protocol AG-UI is an open, lightweight, event-based protocol that standardizes how AI agents connect to user-facing applications. https://docs.ag-ui.com/introduction
20. The Full Protocol Stack
21. • MCP connects agents to tools & context • A2A enables agent-to-agent communication • No standard for agent-to-user interaction • Each framework invented custom protocols Missing Link
22. Standardisations Without AG-UI With AG-UI Framework fragmentation Every UI must code adapters for LangGraph, CrewAI, Mastra, etc. (M×N problem) Single protocol; any framework works with any UI (M+N) State synchronization Manual polling or complex WebSocket logic JSON Patch state deltas, standardized sync Human-in-the-loop Custom approval workflows per app Standardized HITL events built into protocol Debugging Server-side logs only; UI-agent communication is a black box Full client-side event tracing, transparent execution Generative UI No standard for agents to specify UI components Built-in component rendering events
23. Ecosystem Pydantic AI
24. AG-UI Server https://ai.pydantic.dev/ui/ag-ui/#examples https://docs.copilotkit.ai/pydantic-ai/quickstart/pydantic-ai?path=exiting-agent • Major framework support • "Simple" one-line expose • Fine grained control possible
25. CopilotKit Framework • Manages Communication • Helps with state • Human in the loop (HITL) • Use ready react components AG-UI Client https://docs.copilotkit.ai/pydantic-ai/quickstart/pydantic-ai?path=exiting-agent
26. Server Communication Events Category Description Lifecycle Events Monitor the progression of agent runs Text Message Events Handle streaming textual content Tool Call Events Manage tool executions by agents State Management Events Synchronize state between agents and UI Activity Events Represent ongoing activity progress Special Events Support custom functionality Draft Events Proposed events under development https://docs.ag-ui.com/concepts/events ➡ ∑16 standard events
27. • SSE (Server-Sent Events) - Default, text-based, HTTP • Binary Protocol - High performance, custom serialization • WebSocket - Bidirectional, low latency • HTTP Polling - Fallback for restrictive networks Communication Transport
28. 1. TEXT_MESSAGE_START { messageId, role: "assistant" } 2. TEXT_MESSAGE_CONTENT (×N) { messageId, delta: "Hello" } { messageId, delta: " world" } 3. TEXT_MESSAGE_END { messageId } Text / Tool Streaming Event Pattern 1. TOOL_CALL_START { toolCallId: "call_123", toolName: "search_database" } 2. TOOL_CALL_ARGS { toolCallId: "call_123", args: { query: "users" } } 3. TOOL_CALL_END { toolCallId: "call_123", result: [...] }
29. • Bi-directional state management • STATE_SNAPSHOT Complete state object for initialization or refresh • STATE_DELTA JSON Patch (RFC 6902) for ef fi cient incremental updates State
30. Static • Agent speci fi es exact component and props to render • E.g. Component is mapped to a speci fi c event in the UI UI Capbilities Declarative • Agent describes intent, framework selects components • Agent knows about components and props
31. • Simple request/response with no streaming • Batch processing without user interaction • Static content delivery • Ultra-low latency requirements (<10ms) No-Usecase
32. • Keep Humans in the loop • Visual Feedback • Actual questions and commits • Increase acceptance through observability • Loading placeholder effect AG-UI
33. • Documentation: docs.ag-ui.com • GitHub: github.com/ag-ui-protocol/ag-ui • AG-UI Dojo: https://dojo.ag-ui.com/pydantic-ai/ AG-UI Ressources
34. It's a wrap! • Slides: https://thinktecture.com/max-marschall • Contact: @MaxOSchulte, max.marschall@thinktecture.com