Agent Frameworks
CopilotKit integration with PydanticAI
Copy-paste command to clone the canonical starter
npx copilotkit@latest init --framework pydantic-ai
Natural conversation with frontend tool execution
Docked sidebar chat via <CopilotSidebar />
Floating popup chat via <CopilotPopup />
Customize CopilotChat via its slot system
Default CopilotChat re-themed via CopilotKitCSSProperties
Minimal custom chat surface built on useAgent
Agent invokes client-side handlers registered with useFrontendTool
useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result
User approves agent actions before execution
Agent requests approval via useFrontendTool with an async handler; the approval UI pops up as an app-level modal OUTSIDE the chat, and a completion callback resolves the pending tool Promise with the user's decision
Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook
Time-picker card rendered inline via useHumanInTheLoop for a booking flow
Backend agent tools rendered as UI components
Out-of-the-box tool rendering — backend defines the tools; the frontend adds zero custom renderers and relies on CopilotKit's built-in default UI
Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call
Long-running agent tasks with generated UI
Frontend-registered chart components rendered by agent tool calls
Per-token state delta streaming from agent to UI
Bidirectional agent state — UI writes preferences, agent writes notes back
Multiple agents with visible task delegation
Frontend provides read-only context to the agent via useAgentContext
Agent streams HTML/CSS into a sandboxed iframe via the runtime's openGenerativeUI middleware
Sandboxed UI invokes host-registered sandbox functions via Websandbox.connection.remote
Agent generates dynamic A2UI surfaces from a frontend-registered component catalog
Backend-authored JSON schema + frontend catalog renderers; agent streams only data
Full custom chat built from scratch on useAgent — no CopilotChat primitives
Flagship showcase combining A2UI (fixed + dynamic), Open Generative UI, shared todos state, and HITL in a single polished cell
BYOC (bring-your-own-components) demo rendering a streaming JSON spec via @json-render/react against a Zod-validated catalog
BYOC demo using @hashbrownai/react's useJsonParser + useUiKit for progressive streaming-JSON UI rendering
Image + PDF attachments via CopilotChat — images flow natively to GPT-4o vision; PDFs flatten to text via pypdf
Audio transcription via OpenAI Whisper — mic + bundled sample round-trip populate the chat composer
Forwarded provider properties (tone / expertise / responseLength) reshape the agent's system prompt per turn
Bearer-token gated runtime route via the V2 onRequest hook — sign out exercises the 401 path without white-screening
Reasoning chain rendered via a custom amber slot — backed by a gpt-5 reasoning model whose Responses-API reasoning items the AG-UI bridge translates to REASONING events
Built-in CopilotChatReasoningMessage card rendering REASONING events emitted by a gpt-5 reasoning agent — zero-config frontend
Reasoning + sequential tool calls (get_weather, search_flights, get_stock_price, roll_dice) in a single cell — gpt-5 reasoning model emits REASONING events between each tool call
No-tools agent + runtime mcpApps middleware pointing at the public Excalidraw MCP server — the built-in MCPAppsActivityRenderer paints sandboxed iframes inline
Interactive component rendered inline in the chat via the lower-level `useInterrupt` primitive — direct control over the interrupt lifecycle
Resolve interrupts from a plain button grid — no chat, no useInterrupt render prop
