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

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. Backend-owned via get_a2ui_tools (injectA2UITool=false); reuses the declarative-gen-ui catalog.

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

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. Backend-owned via getA2UITools (injectA2UITool=false); reuses the declarative-gen-ui catalog.

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. Backend-owned via get_a2ui_tool (injectA2UITool=false); reuses the declarative-gen-ui catalog. Also shipped for langgraph (python/fastapi/typescript) and strands (python/typescript).

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

Emerging

CLI Start Command

Copy-paste command to clone the canonical starter

Agentic Chat

Natural conversation with frontend tool execution

Tool Rendering

Backend agent tools rendered as UI components

In-Chat Human in the Loop (Original)

User approves agent actions before execution

Agentic Generative UI

Long-running agent tasks with generated UI

Tool-Based Generative UI

Agent uses tools to trigger UI generation

State Streaming

Per-token state delta streaming from agent to UI

Shared State (Read + Write)

Bidirectional shared state — UI writes preferences, agent writes notes

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

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

Beautiful Chat

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

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

Authentication

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

Multimodal 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

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

Tool Rendering + Reasoning Chain (testing)

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

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

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

Headless Interrupt (testing)

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

Declarative Generative UI (A2UI)

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

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema

A2UI Error Recovery

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

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

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

Voice Input

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

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

CLI Start Command

Copy-paste command to clone the canonical starter

Agentic Chat

Natural conversation with frontend tool execution

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

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

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

Frontend Tools (Async)

useFrontendTool with an async handler

In-Chat HITL (useHumanInTheLoop)

Inline approval/decision surface via the ergonomic useHumanInTheLoop hook

In-Chat HITL (Booking)

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

In-App Human in the Loop

Agent requests approval via async useFrontendTool; UI pops as an app-level modal

In-Chat HITL (Steps)

Agent pauses for user approval via step-based human-in-the-loop

Tool Rendering

Custom render for tool calls inline in the chat stream

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

Tool Rendering + Reasoning Chain

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

Agentic Generative UI

Long-running agent tasks with generated UI

Tool-Based Generative UI

Agent uses tools to trigger UI generation

Declarative Generative UI (A2UI)

Dynamic A2UI BYOC via a custom catalog

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. The Strands adapter runs the recovery loop on its auto-inject path; reuses the declarative-gen-ui catalog.

Shared State (Read + Write)

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

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

State Streaming

Per-token state delta streaming from agent to UI

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

Multimodal Attachments

Image and PDF uploads via CopilotChat attachments

Voice Input

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

Authentication

Bearer-token gate via runtime onRequest hook

Agent Config Object

Forward a typed config object (tone / expertise / response length) from provider to agent

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 (Minimal)

Agent-authored HTML/CSS/SVG in a sandboxed iframe, minimal variant

Open Generative UI (Advanced)

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

MCP Apps

MCP server-driven UI via activity renderers

Beautiful Chat

Polished landing-style chat surface with brand theming and suggestion pills

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

Headless Interrupt (testing)

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

CLI Start Command

Copy-paste command to clone the canonical starter

Agentic Chat

Natural conversation with frontend tool execution

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

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

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

Frontend Tools (Async)

useFrontendTool with an async handler

In-Chat HITL (useHumanInTheLoop)

Inline approval/decision surface via the ergonomic useHumanInTheLoop hook

In-Chat HITL (Booking)

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

In-App Human in the Loop

Agent requests approval via async useFrontendTool; UI pops as an app-level modal

In-Chat HITL (Steps)

Agent pauses for user approval via step-based human-in-the-loop

Tool Rendering

Custom render for tool calls inline in the chat stream

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

Tool Rendering + Reasoning Chain

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

Agentic Generative UI

Long-running agent tasks with generated UI

Tool-Based Generative UI

Agent uses tools to trigger UI generation

Declarative Generative UI (A2UI)

Dynamic A2UI BYOC via a custom catalog

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. The Strands adapter runs the recovery loop on its auto-inject path; reuses the declarative-gen-ui catalog.