Bring Agents to Any Frontend: AG-UI's Real-Time Streaming Protocol
Why a protocol matters
AI agents have grown beyond simple answer generators. Modern agents reason step by step, call external tools, update application state, and collaborate with humans in real time. That complexity exposes a recurring problem: every project invents its own way for agents to stream outputs, signal tool calls, and accept user corrections. Ad-hoc sockets and custom APIs work for prototypes but don’t scale across teams or products.
Core ideas behind AG-UI
AG-UI is a streaming event protocol that defines a shared contract between agents and frontends. Instead of returning a single final payload, agents emit a continuous sequence of JSON events so UIs can render partial results, show tool-call progress, and accept mid-run user input.
Key event types include:
- TEXT_MESSAGE_CONTENT for token-by-token streamed responses.
- TOOL_CALL_START / ARGS / END for external function or tool invocations.
- STATE_SNAPSHOT and STATE_DELTA for keeping frontend state synchronized with the backend.
- Lifecycle events such as RUN_STARTED and RUN_FINISHED to frame interactions.
All events flow over standard transports like HTTP Server-Sent Events (SSE) or WebSockets, so developers rarely need to invent custom protocols.
How frontends and backends interact
A frontend subscribes once to an AG-UI stream and then receives a structured flow of events. That single subscription can:
- Render tokenized text streaming into chat or editor experiences.
- Update charts and dashboards incrementally using STATE_DELTA patches.
- Show progress and arguments for tool calls as TOOL_CALL events arrive.
- Send user corrections back to the agent mid-run.
Because the protocol is event-based and typed, backend frameworks and UIs can evolve independently while remaining interoperable as long as they adhere to AG-UI.
Integrations and SDKs
AG-UI is already supported natively by several agent frameworks and libraries, lowering the barrier to adoption:
- Mastra (TypeScript): native AG-UI with strong typing.
- LangGraph: orchestration nodes emit structured AG-UI events.
- CrewAI: multi-agent coordination surfaced to UIs.
- Agno: full-stack multi-agent backends ready for dashboards.
- LlamaIndex: interactive data retrieval with live evidence streaming.
- Pydantic AI: Python SDK with example apps like the AG-UI Dojo.
- CopilotKit: frontend toolkit with React components that subscribe to AG-UI streams.
Partner and cloud integrations are in progress across major providers, and language SDKs are expanding beyond TypeScript and Python to Kotlin, .NET, Go, Rust, Nim, and Java.
Real-world use cases
AG-UI powers a range of practical scenarios:
- Healthcare dashboards stream patient vitals and agent reasoning without page reloads.
- Financial analytics show live, incremental stock-analysis output as agents reason.
- Data migration, summarization, and form-filling are handled as single SSE streams that emit only STATE_DELTA patches, reducing bandwidth and avoiding jarring reloads.
- 24/7 customer support bots display typing indicators, tool-call progress, and final answers in one unified chat experience.
For developers, AG-UI enables code-assistants and editor integrations that stream suggestions token-by-token, mirroring experiences like GitHub Copilot with minimal glue code.
AG-UI Dojo and getting started
CopilotKit’s AG-UI Dojo offers runnable demos and checklists for the six primitives needed in production agent UIs: streaming chat with tool hooks, human-in-the-loop planning, generative UI patterns, shared state, and predictive state updates for collaboration. The Dojo helps teams validate event ordering, payload shape, and state sync before shipping.
npx create-ag-ui-app@latest
#then
<pick your agent framework>
#For details and patterns, see the quickstart blog: go.copilotkit.ai/ag-ui-cli-blog.
Roadmap and community
The public roadmap focuses on SDK maturity, improved debugging and observability, transport optimizations for large payloads, and more sample apps. Community contributions from Mastra, LangGraph, Pydantic AI, and others help shape the spec and tooling, ensuring AG-UI solves real developer problems rather than theoretical ones.
Interoperability and speed of iteration
By standardizing the messy middle between agents and frontends, AG-UI reduces duplication and speeds prototyping. Teams can swap agent backends while keeping the same frontend, iterate on UIs without reworking backends, and ship responsive, transparent interfaces faster than with bespoke streaming solutions.