The Problem It Solves

Traditional AI interactions are black boxes. You send a request, stare at a loading spinner, and eventually get a wall of text. You have no idea what the agent is doing, no way to guide it, and no ability to stop it if it goes off track.

Without AG-UI

You send a prompt and wait. Maybe 10 seconds, maybe 30. A loading spinner. Then a wall of text appears all at once.

If the agent called tools, made decisions, or went down the wrong path along the way—you never saw any of it. No visibility, no control, no way to course-correct.

Every agent framework (LangChain, CrewAI, AutoGen) requires its own custom WebSocket implementation to show real-time progress.

Send and pray. You're a passenger, not a pilot.

With AG-UI

Tokens stream in as they're generated. You see tool calls happen in real time. Progress updates tell you exactly what the agent is doing right now.

If the agent needs approval before taking an action—like deleting a file or sending an email—it pauses and asks. You're watching and guiding, not just waiting.

One protocol works with every agent framework. Build the frontend once, connect any backend.

Real-time visibility. You're in control.

How It Works at Runtime

  1. Frontend opens a connection. Your app connects to the agent's endpoint—typically via Server-Sent Events (SSE), though AG-UI is transport-agnostic and also supports WebSockets and HTTP Binary. This connection is the pipe through which all events will flow.
  2. Run begins. A RUN_STARTED event arrives with a run ID. Your UI can now show an "Agent is working…" indicator—the user immediately knows something is happening.
  3. Text streams in token by token. TEXT_MESSAGE_CONTENT events deliver the agent's words in small chunks (deltas). Users see the response forming in real time, not all at once.
  4. Agent calls a tool. TOOL_CALL_START and TOOL_CALL_ARGS events show which tool is being invoked and with what parameters. Your UI can display "Searching database…" with the actual query visible.
  5. Tool result arrives. The tool's response flows back through the event stream. Your UI updates to show what the agent found—full transparency into every step.
  6. Agent needs approval. For sensitive actions (sending an email, deleting a file, making a payment), the agent pauses and requests confirmation. The user sees exactly what the agent wants to do and clicks Approve or Deny.
  7. Run completes. A RUN_FINISHED event signals the end. Your UI shows the final state—the user saw the whole journey, not just the destination.

Where AG-UI Shows Up

AG-UI transforms any agent interaction from an opaque process into a transparent, controllable experience. Here's where it makes the biggest difference.

AI Coding Assistants

Watch your AI assistant think through a problem, see it search files and read documentation in real time, and approve or reject code changes before they're applied.

"I can see the agent reading my codebase, deciding which files to change, and I approve each edit."

Customer Service Dashboards

Support agents see the AI looking up customer data, formulating responses, and calling tools—in real time. They can intervene before the AI sends a response.

"The AI drafted a refund response. I saw it pulling order history and approved the reply before it went out."

Data Analysis Workflows

Watch the agent query databases, process results, and build visualizations step by step. If it's going in the wrong direction, redirect it before it wastes time.

"I watched the agent run three SQL queries, saw it heading the wrong way, and redirected on the second query."

Document Review

See the agent work through a contract or report section by section. It highlights issues, suggests changes, and waits for your approval on sensitive edits.

"The agent flagged three contract clauses in real time. I approved two edits and overrode the third."

Multi-Agent Orchestration

When multiple agents work together (via A2A), AG-UI shows you the whole picture: which agent is active, what it's doing, and how the workflow is progressing.

"I could see Agent A hand off to Agent B, watch B process the request, and see the result flow back."

Approval Workflows

Human-in-the-loop by design. The agent pauses at decision points, shows you what it wants to do, and only proceeds after you approve. Critical for high-stakes actions.

"Before sending the payment, the agent showed me the amount, recipient, and reason—and waited for my OK."

Why It Matters

Think of the difference between receiving a letter and watching someone type a message to you. AG-UI turns agents from letter-senders into live collaborators.

AG-UI defines 16+ structured event types—text deltas, tool calls, state changes, lifecycle events, activity updates. Each one gives your frontend specific, actionable information about what the agent is doing right now.

Human-in-the-loop is built into the protocol. Agents can pause for approval before executing actions, ensuring your users stay in control of what the agent does on their behalf.

It works across frameworks—Microsoft Agent Framework, Google ADK, AWS Strands, LangGraph, CrewAI, and 10+ more all support it. Developed by CopilotKit with backing from Oracle, Microsoft, Google, and AWS.

Key Concepts in Plain Language

The Standard

AG-UI transforms agents from background processes into interactive collaborators. Structured events replace raw text streams, giving you visibility and control over every step of the agent's work.

What It Looks Like

When an agent works through AG-UI, your frontend receives a stream of structured events. Here's what a simple interaction looks like:

{ "type": "RUN_STARTED",           "runId": "run-42", "threadId": "thread-7" }
{ "type": "TEXT_MESSAGE_START",    "messageId": "msg-1" }
{ "type": "TEXT_MESSAGE_CONTENT",  "messageId": "msg-1", "delta": "Let me look that up" }
{ "type": "TEXT_MESSAGE_CONTENT",  "messageId": "msg-1", "delta": " for you..." }
{ "type": "TEXT_MESSAGE_END",      "messageId": "msg-1" }
{ "type": "TOOL_CALL_START",      "toolCallId": "tc-1", "toolCallName": "search_database" }
{ "type": "TOOL_CALL_ARGS",       "toolCallId": "tc-1", "delta": "{\"query\": \"monthly sales\"}" }
{ "type": "TOOL_CALL_END",        "toolCallId": "tc-1" }
{ "type": "TEXT_MESSAGE_START",    "messageId": "msg-2" }
{ "type": "TEXT_MESSAGE_CONTENT",  "messageId": "msg-2", "delta": "Here are the results..." }
{ "type": "TEXT_MESSAGE_END",      "messageId": "msg-2" }
{ "type": "RUN_FINISHED",         "runId": "run-42" }

Each event tells your UI exactly what to show: text streaming in, tool calls happening, the run completing. Your frontend reacts to each event type with the appropriate visual update.

How to Apply This

What to Watch Out For

Honest Limitations

  • • AG-UI launched in May 2025 and some features (reasoning events, interrupt/branching) are still in draft status. The core events are stable, but expect the edges to evolve.
  • • Event-based programming has a learning curve. If your team is used to simple request/response patterns, AG-UI's streaming model takes adjustment.
  • • Not all agent frameworks are supported yet—OpenAI Agent SDK and AWS Bedrock Agents integrations are still in development.
  • • For simple, single-response agents (ask a question, get an answer), AG-UI is overkill. A basic API call works fine for that.
  • • State synchronization requires careful design. If your agent's state is complex, the snapshot-delta pattern needs thoughtful implementation.

Get Started