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

/demos/hitl-in-app

In-Chat HITL (useHumanInTheLoop — ergonomic API)

Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook

/demos/hitl-in-chat

In-Chat HITL (Booking)

Time-picker card rendered inline via useHumanInTheLoop for a booking flow

/demos/hitl-in-chat

Multimodal Attachments

Image + PDF attachments via CopilotChat — images flow natively to GPT-4o vision; PDFs flatten to text via pypdf

/demos/multimodal

Voice Input

Audio transcription via OpenAI Whisper — mic + bundled sample round-trip populate the chat composer

/demos/voice

Headless Interrupt (testing)

Resolve interrupts from a plain button grid — no chat, no useInterrupt render prop

/demos/interrupt-headless

Generative UI14

Tool Rendering (Default Catch-all)

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

/demos/tool-rendering-default-catchall

Tool Rendering (Custom Catch-all)

Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call

/demos/tool-rendering-custom-catchall

Agentic Generative UI

Long-running agent tasks with generated UI

/demos/gen-ui-agent

Tool-Based Generative UI

Frontend-registered chart components rendered by agent tool calls

/demos/gen-ui-tool-based

Open Generative UI (Minimal)

Agent streams HTML/CSS into a sandboxed iframe via the runtime's openGenerativeUI middleware

/demos/open-gen-ui

Open Generative UI (Advanced)

Sandboxed UI invokes host-registered sandbox functions via Websandbox.connection.remote

/demos/open-gen-ui-advanced

Declarative Generative UI (A2UI Dynamic)

Agent generates dynamic A2UI surfaces from a frontend-registered component catalog

/demos/declarative-gen-ui

A2UI — Fixed Schema

Backend-authored JSON schema + frontend catalog renderers; agent streams only data

/demos/a2ui-fixed-schema

Beautiful Chat

Flagship showcase combining A2UI (fixed + dynamic), Open Generative UI, shared todos state, and HITL in a single polished cell

/demos/beautiful-chat

Declarative UI: json-render

Streaming hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)

/demos/declarative-json-render

Declarative UI: Hashbrown

Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)

/demos/declarative-hashbrown

MCP Apps

No-tools agent + runtime mcpApps middleware pointing at the public Excalidraw MCP server — the built-in MCPAppsActivityRenderer paints sandboxed iframes inline

/demos/mcp-apps

Tool Rendering (Reasoning Chain)

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

/demos/tool-rendering-reasoning-chain

In-Chat HITL (useInterrupt — low-level primitive)

Interactive component rendered inline in the chat via the lower-level `useInterrupt` primitive — direct control over the interrupt lifecycle

/demos/gen-ui-interrupt

Agent Capabilities3

Tool Rendering

Backend agent tools rendered as UI components

/demos/tool-rendering

Agent Config Object

Forwarded provider properties (tone / expertise / responseLength) reshape the agent's system prompt per turn

/demos/agent-config

Authentication

Bearer-token gated runtime route via the V2 onRequest hook — sign out exercises the 401 path without white-screening

/demos/auth

Agent State4

Shared State (Read + Write)

Bidirectional agent state — UI writes preferences, agent writes notes back

/demos/shared-state-read-write

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

/demos/readonly-state-agent-context

Shared State: Read-only

Recipe editor publishes form state via agent.setState; the agent reads the recipe context but does not mutate it (no backend tool — neutral default agent).

/demos/shared-state-read

State Streaming

Per-token state delta streaming from agent to UI

/demos/shared-state-streaming

Multi-Agent1

Sub-Agents

Multiple agents with visible task delegation

/demos/subagents