CopilotKit Showcase

AWS Strands (Python)

CopilotKit integration with AWS Strands

41 demos·6 categories·integration strands

Chat UI13

Agentic Chat

Natural conversation with frontend tool execution

/demos/agentic-chat

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

/demos/chat-customization-css

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

/demos/prebuilt-sidebar

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

/demos/prebuilt-popup

Chat Customization (Slots)

Customize CopilotChat via its slot system

/demos/chat-slots

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

/demos/headless-simple

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

/demos/headless-complete

Multimodal Attachments

Image and PDF uploads via CopilotChat attachments

/demos/multimodal

Voice Input

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

/demos/voice

Authentication

Bearer-token gate via runtime onRequest hook

/demos/auth

Beautiful Chat

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

/demos/beautiful-chat

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override, so the bridge's reasoning start/content/end events land in the default renderer.

/demos/reasoning-default

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer via a custom reasoningMessage slot.

/demos/reasoning-custom

Interactivity7

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

/demos/frontend-tools

Frontend Tools (Async)

useFrontendTool with an async handler

/demos/frontend-tools-async

In-Chat HITL (Steps)

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

/demos/hitl

In-Chat HITL (useHumanInTheLoop)

Inline approval/decision surface via the ergonomic 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

In-App Human in the Loop

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

/demos/hitl-in-app

Headless Interrupt (testing)

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

/demos/interrupt-headless

Generative UI15

Tool Rendering

Custom render for tool calls inline in the chat stream

/demos/tool-rendering

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

Agent uses tools to trigger UI generation

/demos/gen-ui-tool-based

Declarative Generative UI (A2UI)

Dynamic A2UI BYOC via a custom catalog

/demos/declarative-gen-ui

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema

/demos/a2ui-fixed-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.

/demos/a2ui-recovery

Declarative UI: Hashbrown

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

/demos/declarative-hashbrown

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

Open Generative UI (Minimal)

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

/demos/open-gen-ui

Open Generative UI (Advanced)

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

/demos/open-gen-ui-advanced

MCP Apps

MCP server-driven UI via activity renderers

/demos/mcp-apps

Tool Rendering + Reasoning Chain

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

/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, driven by Strands' native `tool_context.interrupt()` on the backend

/demos/gen-ui-interrupt

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

Platform1

Agent Config Object

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

/demos/agent-config