data:{"type":"RUN_STARTED",...}data:{"type":"TEXT_MESSAGE_CONTENT","delta":"The"}data:{"type":"TEXT_MESSAGE_CONTENT","delta":" weather"}data:{"type":"TOOL_CALL_START",...}data:{"type":"TOOL_CALL_RESULT",...}data:{"type":"RUN_FINISHED",...}
The frontend does not need to understand AG2 internals. It reacts to event types. At the lowest level, consuming AG-UI is just opening an SSE stream:
const response = await fetch("/chat", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "text/event-stream"
},
body: JSON.stringify(runAgentInput)
});
But in practice, you don’t parse SSE manually.
CopilotKit understands AG-UI natively. You keep the same backend (AGUIStream), and simply point CopilotKit to that endpoint. Proxy AG‐UI traffic through a Next.js API route.
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { HttpAgent } from "@ag-ui/client";
import { NextRequest } from "next/server";
// You can use any service adapter here for multi-agent support
// Use ExperimentalEmptyAdapter since AG2 handles the LLM directly
const serviceAdapter = new ExperimentalEmptyAdapter();
const runtime = new CopilotRuntime({
agents: {
weather_agent: new HttpAgent({
url: "http://localhost:8000/chat"
})
}
});
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter,
endpoint: "/api/copilotkit",
});
return handleRequest(req);
};
Finally, wrap your app with CopilotKit and render the chat. CopilotKit subscribes to the AG‐UI stream and renders messages, tool progress and state updates in real time.
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotChat } from "@copilotkit/react-ui";
<CopilotKit runtimeUrl="/api/copilotkit" agent="weather_agent">
<CopilotChat />
</CopilotKit>
That's the complete loop. The weather example in the build-with-ag2 repository shows this minimal streaming setup.
Multi-Agent Orchestration
The current AG-UI integration wraps a single ConversableAgent. Multi-agent workflows (group chats, delegation, nested conversations) still run inside AG2, but they are exposed through one interaction surface.
To model staged or multi-agent UX, use an orchestrator agent with ContextVariables. It is a shared state that agents use to coordinate, track progress, and make decisions across a conversation.
When a tool updates context_variables, AGUIStream automatically emits a STATE_SNAPSHOT event.
The frontend can consume that snapshot to:
- Highlight which agent is active
- Show pipeline progress
- Render stage-specific UI
Here's the pattern:
from autogen import ConversableAgent
from autogen.ag_ui import AGUIStream
def submit_plan(plan: str, context): # context injected automatically
"""Submit the plan and move to draft stage."""
context["active_agent"] = "drafter"
context["stage"] = "drafting"
context["plan"] = plan
return {"status": "plan submitted"}
def submit_draft(draft: str, context):
"""Submit the draft and move to review stage."""
context["active_agent"] = "reviewer"
context["stage"] = "reviewing"
context["draft"] = draft
return {"status": "draft submitted"}
def submit_review(approved: bool, context):
"""Submit review and finalize."""
context["stage"] = "complete" if approved else "revising"
return {"status": "review complete"}
orchestrator = ConversableAgent(
name="orchestrator",
system_message="You coordinate a multi-stage workflow.",
llm_config=llm_config,
functions=[submit_plan, submit_draft, submit_review],
)
stream = AGUIStream(orchestrator)
Each tool call that updates context triggers a STATE_SNAPSHOT. The frontend reads active_agent and stage from the snapshot and updates the UI accordingly.
The factory example shows this pattern with a 3-panel UI: agent pipeline, document preview and conversation log.
Native multi-agent support is actively being developed. This orchestrator pattern is the current workaround.
What This Enables for Agent Builders
With this integration, you can keep AG2 where it’s strong and still ship real UIs without protocol glue. You can:
✅ Build AG2 agent teams and expose them as AG‐UI endpoints with one wrapper (AGUIStream).
✅ Connect those endpoints to CopilotKit (or any AG‐UI client) without custom WebSocket or polling infrastructure.
✅ Reuse AG2 agent logic across products while keeping a single frontend contract (AG-UI) instead of inventing new payloads for every application
✅ Stream agent runs, tool progress and state in real time using CopilotKit components, so users see what the system is doing instead of waiting on a single final response.
Getting Started
You can start building with this integration today.
👉 Explore the AG2 documentation
👉 Check out the CopilotKit / AG2 docs to get started
👉 Check out our example repo for a minimal integration setup
👉 Explore the build-with-ag2 AG‐UI examples: weather/ directory shows a single-agent chat with tools, factory/ directory demonstrates a multi-stage pipeline using ContextVariables
👉 Try the AG2 demo in the AG-UI Dojo playground
AG-UI Dojo
What's Next
This launch makes AG2 a first‐class backend for AG‐UI‐compatible frontends.
On the CopilotKit side, the focus is on richer AG‐UI rendering components, better devtools for inspecting AG‐UI streams and more starter projects that bundle AG2 + CopilotKit out of the box.
Native multi-agent support in AG‐UI is an active focus. The AG2 and CopilotKit teams are working together to bring first-class multi-agent patterns to the protocol so you won't need the orchestrator workaround.
Over the next few weeks, expect more reference implementations, clearer integration patterns and production-grade examples that show how these layers work together in real applications.