CopilotKit Showcase

LangGraph (TypeScript)

TypeScript variant of the LangGraph integration. Uses @langchain/langgraph to define a graph-based agent with tool calling, shared state, and memory, connected to CopilotKit via the LangGraph AG-UI adapter.

39 demos·7 categories·integration langgraph-typescript

Chat UI12

Beautiful Chat

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

/demos/beautiful-chat

Pre-Built: CopilotChat

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

/demos/agentic-chat

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

Chat Customization: CSS

Default CopilotChat re-themed via CopilotKitCSSProperties

/demos/chat-customization-css

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.

/demos/headless-simple

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.

/demos/headless-complete

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer

/demos/reasoning-custom

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override.

/demos/reasoning-default

Attachments

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

/demos/multimodal

Voice

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

/demos/voice

Interactivity6

Frontend Tools: In-app Actions

Agent invokes client-side handlers registered with useFrontendTool

/demos/frontend-tools

Frontend Tools: Async

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

/demos/frontend-tools-async

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.

/demos/hitl-in-chat

Human in the Loop: In-app

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

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

/demos/gen-ui-interrupt

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

/demos/interrupt-headless

Generative UI13

Declarative UI: Dynamic A2UI

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

/demos/declarative-gen-ui

Declarative UI: Fixed A2UI

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

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

/demos/a2ui-recovery

MCP Apps

MCP server-driven UI via activity renderers

/demos/mcp-apps

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.

/demos/gen-ui-agent

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

/demos/tool-rendering-default-catchall

Generative UI: Tool Rendering (Catch-all)

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

/demos/tool-rendering-custom-catchall

Generative UI: Tool Rendering (Custom)

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

/demos/tool-rendering

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.

/demos/tool-rendering-reasoning-chain

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

/demos/open-gen-ui

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

/demos/open-gen-ui-advanced

Agent State4

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