Real-time communication between AI agents and your frontend. Watch it think. Guide it as it works.
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.
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.
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.
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.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.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.RUN_FINISHED event signals the end. Your UI shows the final state—the user saw the whole journey, not just the destination.AG-UI transforms any agent interaction from an opaque process into a transparent, controllable experience. Here's where it makes the biggest difference.
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.
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.
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.
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.
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.
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.
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.
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.
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.