CopilotKit Showcase

CLI Start Command

Copy-paste command to clone the canonical starter

Pre-Built: CopilotChat

Vanilla CopilotChat with three starter-prompt suggestions — the minimum-viable surface for free-form chat

Chat Customization: CSS

Default CopilotChat re-themed via CopilotKitCSSProperties

Generative UI: Tool Rendering (Default)

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

Generative UI: Tool Rendering (Catch-all)

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

Frontend Tools: In-app Actions

Agent invokes client-side handlers registered with useFrontendTool

Frontend Tools: Async

useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result

Human In the Loop: In-chat

Time-slot picker rendered inline in the chat via `useHumanInTheLoop` — the agent requests user input, the frontend renders a TimePickerCard, and the user's choice resumes the agent.

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

Generative UI: Tool Rendering (Custom)

Custom per-tool renderers (WeatherCard, FlightListCard) plus a wildcard catch-all for every other tool

Generative UI: Tool calls + reasoning

Per-tool renderers (WeatherCard, FlightListCard, custom catchall) interleaved with a reasoningMessage slot rendering the agent's reasoning tokens — combines reasoning-display + tool-rendering in one chat surface.

Generative UI: useComponent

Agent uses tools to trigger UI generation

Generative UI: Agent State

Agent-state-driven Gen UI — the agent plans a live step list via Command(update={steps}); the frontend subscribes through useAgent and renders the steps inside CopilotChat's messageView.children slot.

Shared State: Streaming

Per-token state delta streaming from agent to UI

Shared State: Read + Write

Bidirectional shared state — UI writes preferences via agent.setState; agent writes notes via a Command-returning tool

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).

Sub-Agents

Multiple agents with visible task delegation

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

Chat Customization: Slots

Customize CopilotChat via its slot system

Headless UI: Simple

Minimum viable headless chat — useAgent + useCopilotKit dressed in shadcn/ui primitives. No tool rendering, no generative UI, just text in / text out.

Headless UI: Complete

Full headless surface — hand-rolled CopilotChat replacement that wires every render hook (useRenderTool, useDefaultRenderTool, useComponent, useRenderToolCall, useRenderActivityMessage, useSuggestions, useAttachments) on top of shadcn primitives.

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override.

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer

Human in the Loop: Interrupts

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

Human in the Loop: Headless Interrupts

Same interrupt(...) backend pattern as gen-ui-interrupt, but the time-picker mounts in a separate app-surface pane (left) instead of inline inside the chat — uses useHeadlessInterrupt (custom-event subscribe + manual runAgent forwardedProps.command.resume).

Declarative UI: Dynamic A2UI

Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider

Declarative UI: Fixed A2UI

Render an A2UI tree from a fixed, server-side schema — the agent streams data into a pre-authored component tree

MCP Apps

MCP server-driven UI via activity renderers

Shared State: Frontend Context

Frontend provides read-only context to the agent via useAgentContext

Declarative UI: json-render

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

Beautiful Chat

Canonical polished starter chat — brand fonts, theme tokens, suggestion pills

Attachments

Image and PDF uploads via CopilotChat attachments, processed by a vision-capable agent

Authentication

Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states

Declarative UI: Hashbrown

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

Open Generative UI: Default

Agent composes UI from a registered component library — distinct from Tool Rendering, which attaches a custom renderer to a *named* backend tool. Use Open Generative UI when you want the agent to assemble UI freely from a palette you control.

Open Generative UI: Custom

Same Open Generative UI surface, with the iframe-rendered components able to call back into frontend sandbox functions (e.g., a Calculator app whose buttons trigger handlers in the host page).

Voice

Speech-to-text via @copilotkit/voice with a bundled sample audio button

Agent Config Object

Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt

CLI Start Command

Copy-paste command to clone the canonical starter

Pre-Built: CopilotChat

Natural conversation with frontend tool execution

Human in the Loop: In-app

Human In the Loop: In-chat

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

Generative UI: Tool Rendering (Custom)

Backend agent tools rendered as UI components

Generative UI: useComponent

Agent uses tools to trigger UI generation

Generative UI: Agent State

Long-running agent tasks with generated UI

Shared State: Streaming

Per-token state delta streaming from agent to UI

Shared State: Read + Write

Bidirectional shared state — UI writes preferences via agent.setState; agent writes notes via a Command-returning tool

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).

Sub-Agents

Supervisor delegates to research / writing / critique sub-agents exposed as tools — each delegation appended to a live log in shared state

Beautiful Chat

Canonical polished starter chat — brand fonts, theme tokens, suggestion pills

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

Chat Customization: Slots

Customize CopilotChat via its slot system

Chat Customization: CSS

Default CopilotChat re-themed via CopilotKitCSSProperties

Headless UI: Simple

Minimal custom chat surface built on useAgent

Headless UI: Complete

Full chat implementation built from scratch on useAgent

Authentication

Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states

Attachments

Image and PDF uploads via CopilotChat attachments, processed by a vision-capable agent

Agent Config Object

Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt

Generative UI: Tool Rendering (Default)

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

Generative UI: Tool Rendering (Catch-all)

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

Generative UI: Tool calls + reasoning

Sequential tool calls with reasoning tokens rendered side-by-side

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override.

Human in the Loop: Interrupts

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

Human in the Loop: Headless Interrupts

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

Declarative UI: Dynamic A2UI

Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider

Declarative UI: Fixed A2UI

A2UI rendering against a known client-side schema

MCP Apps

MCP server-driven UI via activity renderers

Frontend Tools: In-app Actions

Agent invokes client-side handlers registered with useFrontendTool

Frontend Tools: Async

useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result

Shared State: Frontend Context

Frontend provides read-only context to the agent via useAgentContext

Voice

Speech-to-text via @copilotkit/voice with a bundled sample audio button

Declarative UI: Hashbrown

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

Declarative UI: json-render

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

Open Generative UI: Default

Agent generates UI from an arbitrary component library

Open Generative UI: Custom

Agent-authored UI that can invoke frontend sandbox functions from inside the iframe

Agent Frameworks

CLI Start Command

Copy-paste command to clone the canonical starter

Pre-Built: CopilotChat

Vanilla CopilotChat with three starter-prompt suggestions — the minimum-viable surface for free-form chat

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

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

Tool Rendering (Custom Catch-all)

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

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

Frontend Tools (Async)

useFrontendTool with an async handler — agent awaits a client-side async operation and uses the returned result

Human In the Loop: In-chat

Time-slot picker rendered inline in the chat via `useHumanInTheLoop` — the agent requests user input, the frontend renders a TimePickerCard, and the user's choice resumes the agent.

MCP Apps

Runtime mcpApps config wires an Excalidraw MCP server; the built-in MCPAppsActivityRenderer renders the sandboxed iframe inline in the chat with no app-side renderer

In-App Human in the Loop (Frontend Tools + async HITL)

Agent requests approval via a frontend tool 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

Human in the Loop: Interrupts

Interactive time-picker rendered inline in the chat. ADK has no LangGraph interrupt() primitive, so this uses the Strategy-B adaptation — the agent calls a frontend schedule_meeting tool (useHumanInTheLoop) whose Promise resolves only once the user picks a slot, giving the same inline-card UX as the LangGraph reference.

Tool Rendering

Custom per-tool renderers (WeatherCard, FlightListCard) plus a wildcard catch-all for every other tool

Tool-Based Generative UI

Agent uses tools to trigger UI generation

Agentic Generative UI

Canonical agent-state-driven Gen UI — the agent plans a live step list and emits it via state["steps"]; the frontend renders it via useAgent

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).

Shared State: Read + Write

Bidirectional shared state — UI writes preferences via agent.setState; agent writes notes via a Command-returning tool

State Streaming

Per-token state delta streaming from agent to UI via PredictStateMapping

Sub-Agents

Multiple agents with visible task delegation

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

Chat Customization (Slots)

Customize CopilotChat via its slot system

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer (Gemini 3.1 thinking mode)

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override.

Declarative Generative UI (A2UI)

Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider; the runtime injects the render_a2ui tool automatically (injectA2UITool=true) and the ag_ui_adk adapter auto-injects generate_a2ui

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema

A2UI Error Recovery

Makes the A2UI validate->retry recovery loop visible — an invalid first render heals to a valid one, and an always-invalid render shows a graceful recovery-exhausted fallback. ADK-only (the recovery loop + hard-fail live in the ag_ui_adk middleware; the langgraph-python runtime path has no equivalent). Backend-owned via get_a2ui_tool (injectA2UITool=false); reuses the declarative-gen-ui catalog.

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

Tool Rendering + Reasoning Chain (testing)

Sequential tool calls with reasoning tokens rendered side-by-side

Declarative UI: json-render

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

Beautiful Chat

Canonical polished starter chat — brand fonts, theme tokens, suggestion pills

Multimodal Attachments

Image and PDF uploads via CopilotChat attachments, processed by a Gemini multimodal agent

Authentication

Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states

Declarative UI: Hashbrown

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

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

Open-Ended Gen UI (Advanced: with frontend function calling)

Agent-authored UI that can invoke frontend sandbox functions from inside the iframe

Voice Input

Speech-to-text via @copilotkit/voice with a bundled sample audio button

Agent Config Object

Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt

CLI Start Command

Copy-paste command to clone the canonical starter

Agentic Chat

Natural conversation with frontend tool execution

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

Chat Customization (Slots)

Customize CopilotChat via its slot system

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

Frontend Tools (Async)

useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result

In-Chat Human in the Loop

User approves agent actions before execution

In-App Human in the Loop (Frontend Tools + async HITL)

In-Chat HITL (useHumanInTheLoop — ergonomic API)

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

In-Chat HITL (Booking)

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

Tool Rendering

Backend agent tools rendered as UI components

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

Tool Rendering (Custom Catch-all)

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

Agentic Generative UI

Long-running agent tasks with generated UI

Tool-Based Generative UI

Frontend-registered chart components rendered by agent tool calls

State Streaming

Per-token state delta streaming from agent to UI

Shared State (Read + Write)

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

Sub-Agents

Multiple agents with visible task delegation

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

Open Generative UI (Minimal)

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

Open Generative UI (Advanced)

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

Declarative Generative UI (A2UI Dynamic)

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

A2UI — Fixed Schema

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

Headless Chat (Complete)

Full custom chat built from scratch on useAgent — no CopilotChat primitives

Beautiful Chat

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

Declarative UI: json-render

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

Declarative UI: Hashbrown

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

Multimodal Attachments

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

Voice Input

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

Agent Config Object

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

Authentication

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

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override.

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer

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

MCP Apps

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

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