Ag2 Ag Ui
- 36 installs
- 8 repo stars
- Updated July 27, 2026
- ag2ai/ag2-skills
ag2-ag-ui is a Claude Code skill that exposes an AG2 beta Agent over the AG-UI protocol so a web frontend can stream responses and render tool calls.
About
ag2-ag-ui is a Claude Code skill that exposes an AG2 beta Agent over the AG-UI protocol so a web frontend can stream responses, render tool calls, sync shared state and track sub-task steps. It wraps the agent with AGUIStream and mounts it in FastAPI. A developer uses it when they want a web UI, such as CopilotKit or a custom React app, in front of an AG2 agent rather than a CLI or script.
- Exposes an AG2 beta Agent over the AG-UI protocol for web frontends
- Streams text and reasoning, renders tool calls and syncs shared state via FastAPI
- Includes a CopilotKit React/Next.js integration and a reference starter
Ag2 Ag Ui by the numbers
- 36 all-time installs (skills.sh)
- Ranked #8,638 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
- Data as of Aug 1, 2026 (Skillselion catalog sync)
ag2-ag-ui capabilities & compatibility
Free skill; running the agent needs an LLM provider API key such as OpenAI.
- Capabilities
- agent frontend · ag ui protocol · response streaming · tool call rendering · state sync
- Works with
- openai
- Use cases
- orchestration · frontend · api development
- Pricing
- Bring your own API key
What ag2-ag-ui says it does
Wraps the agent with `AGUIStream(agent)` and mounts it in FastAPI via `stream.dispatch(...)` or `stream.build_asgi()`.
The user is building a web UI (React / Next.js / anything HTTP+SSE) that should talk to an AG2 beta agent.
npx skills add https://github.com/ag2ai/ag2-skills --skill ag2-ag-uiAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 36 |
|---|---|
| repo stars | ★ 8 |
| Last updated | July 27, 2026 |
| Repository | ag2ai/ag2-skills ↗ |
What it does
Put a web frontend in front of an AG2 agent by exposing it over the AG-UI protocol with FastAPI.
Who is it for?
Developers putting a React/Next.js or CopilotKit web UI in front of an AG2 agent with streaming and shared state.
Skip if: A custom narrow-purpose API where you own the contract end-to-end, or CLI-only agents.
When should I use this skill?
The user wants a web frontend talking to an AG2 agent over a standard streaming protocol instead of a CLI.
What you get
The agent is served over AG-UI with streaming text, reasoning, tool-call and state-sync events to the frontend.
By the numbers
- 8-row AG-UI feature support table
- installs via pip install ag2[ag-ui]
Files
AG-UI integration
When to use
- The user is building a web UI (React / Next.js / anything HTTP+SSE) that should talk to an AG2 beta agent.
- They want streaming text, reasoning, tool-call rendering, shared state sync, or sub-task step tracking surfaced to the frontend with a standard protocol — not a custom REST/WebSocket contract.
- They're using or considering CopilotKit (the recommended React client).
For a custom narrow-purpose API where you own the contract end-to-end, skip AG-UI and write a plain endpoint instead.
Supported AG-UI features
| Feature | Status |
|---|---|
Run lifecycle (RUN_STARTED / RUN_FINISHED / RUN_ERROR) | ✓ |
Streaming text events (TEXT_MESSAGE_START / _CONTENT / _END / _CHUNK) | ✓ |
Reasoning events (REASONING_START / _END, REASONING_MESSAGE_START / _CONTENT / _END) | ✓ |
Backend tool lifecycle (TOOL_CALL_START / _ARGS / _RESULT / _END) | ✓ |
Frontend-tool dispatch (TOOL_CALL_CHUNK for client tools in RunAgentInput.tools) | ✓ |
Shared-state snapshots (STATE_SNAPSHOT) | ✓ |
Sub-task steps (STEP_STARTED / STEP_FINISHED, emitted on TaskStarted / TaskCompleted) | ✓ |
| Human input checkpoints surfaced as AG-UI events | ✗ — no human-input event family; hitl_hook passes through to agent.ask |
Installation
pip install "ag2[ag-ui]"Required. Run this install before delivering the code. If you cannot run commands, state the exact pip install command.60-second recipe — FastAPI server
```python title="run_ag_ui.py" from fastapi import FastAPI, Header from fastapi.responses import StreamingResponse
from autogen.beta import Agent from autogen.beta.ag_ui import AGUIStream, RunAgentInput from autogen.beta.config import OpenAIConfig
agent = Agent( name="support_bot", prompt="You help users with billing questions.", config=OpenAIConfig(model="gpt-4o-mini"), )
stream = AGUIStream(agent) app = FastAPI()
@app.post("/chat") async def run_agent(message: RunAgentInput, accept: str | None = Header(None)) -> StreamingResponse: return StreamingResponse( stream.dispatch(message, accept=accept), media_type=accept or "text/event-stream", )
uvicorn run_ag_ui:app --reload --port 8000
Test:
curl -N -X POST http://127.0.0.1:8000/chat \ -H "Content-Type: application/json" \ -H "Accept: text/event-stream" \ -d '{"thread_id":"t1","run_id":"r1","messages":[{"id":"m1","role":"user","content":"Hello"}],"state":{},"context":[],"tools":[]}'
## Lower-friction alternative — `build_asgi()`
If you don't need custom auth / middleware, mount the ASGI endpoint directly:
from autogen.beta.ag_ui import AGUIStream from fastapi import FastAPI
app = FastAPI() stream = AGUIStream(agent) app.mount("/chat", stream.build_asgi())
## CopilotKit frontend (recommended for React / Next.js)
Two ways to start:
Option A — CopilotKit bootstrap
npx copilotkit@latest create -f ag2
Option B — clone the reference starter
https://github.com/ag2ai/ag2-copilotkit-starter
The starter layout:
ag2-copilotkit-starter/ ├── agent-py/ # Python backend (AG2 + AG-UI) └── ui-react/ # React + CopilotKit frontend
Backend serves `/chat` on port 8008 by default. The Next.js route at `ui-react/app/api/copilotkit/route.ts` bridges the UI to the backend:
import { HttpAgent } from "@ag-ui/client"; import { CopilotRuntime, ExperimentalEmptyAdapter, copilotRuntimeNextJSAppRouterEndpoint } from "@copilotkit/runtime"; import { NextRequest } from "next/server";
const agent = new HttpAgent({ url: "http://localhost:8008/chat" }); const runtime = new CopilotRuntime({ agents: { weather_agent: agent } });
export async function POST(req: NextRequest) { const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({ runtime, serviceAdapter: new ExperimentalEmptyAdapter(), endpoint: "/api/copilotkit", }); return handleRequest(req); }
Wrap your app:
import { CopilotKit } from "@copilotkit/react-core"; import "@copilotkit/react-ui/styles.css";
export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> <CopilotKit agent="weather_agent" runtimeUrl="/api/copilotkit"> {children} </CopilotKit> </body> </html> ); }
Render chat (`<CopilotChat />`), and use `useCopilotAction({...})` in client components to render generative UI tied to backend tool calls.
## Production checklist
- **CORS** — allow your frontend origin on the AG-UI backend (`POST`, `OPTIONS`, auth headers).
- **Auth** — protect both `/api/copilotkit` (Next.js route) and backend `/chat`. Don't rely on client-only secrets.
- **SSE buffering** — verify backend response is `Content-Type: text/event-stream` and that proxy layers (Nginx, CloudFront, etc.) don't buffer SSE.
- **Timeouts / retries** — conservative values for long-running tool workflows; only retry idempotent requests.
- **Tool inputs are untrusted** — validate and authorize server-side before invoking privileged tools. Log tool execution with request IDs.
- **Tool name parity** — frontend `useCopilotAction` `name` must match backend `@tool` name exactly.
## Going deeper
- `website/docs/beta/ag-ui/index.mdx` — `AGUIStream`, supported events, basic server.
- `website/docs/beta/ag-ui/copilotkit-quickstart.mdx` — full React + CopilotKit walkthrough (file layout, route, layout, chat component, weather-card example).
- AG-UI protocol: https://docs.ag-ui.com/introduction
- Reference starter: https://github.com/ag2ai/ag2-copilotkit-starter
- For protocol-level testing: AG2 Dojo profile https://dojo.ag-ui.com/ag2/feature/agentic_chat
## Common pitfalls
- **Missing `ag-ui` extra** — `pip install "ag2[ag-ui]"` is required; without it `from autogen.beta.ag_ui import AGUIStream` will fail.
- **CORS blocked** — frontend can't hit the backend in dev. Add `CORSMiddleware` to the FastAPI app for the dev origin.
- **No streaming output** — proxy or `Content-Type` issue. Test with raw `curl -N` first to isolate.
- **Tool UI not rendering** — tool name on the React side (`useCopilotAction({ name: "..." })`) doesn't exactly match the backend `@tool` name.
- **Putting the endpoint behind a SSE-incompatible proxy** — many proxies buffer event-stream responses by default. Disable buffering on the route.
- **Trying to use `AGUIStream` with classic `ConversableAgent`** — the description here covers `autogen.beta.Agent`. Classic AG2 agents can be exposed differently; check the AG2 docs for that path.
Related skills
Setup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196k
Lark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402k
CavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7k
Lark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16k
Running Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72
Codex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10