Demos
76 resultsMost Popular
LangGraph (Python)LangGraph PlatformCLI Start Command
Copy-paste command to clone the canonical starter
LangGraph (Python)LangGraph PlatformPre-Built: CopilotChat
Vanilla CopilotChat with three starter-prompt suggestions — the minimum-viable surface for free-form chat
LangGraph (Python)LangGraph PlatformChat Customization: CSS
Default CopilotChat re-themed via CopilotKitCSSProperties
LangGraph (Python)LangGraph PlatformGenerative 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
LangGraph (Python)LangGraph PlatformGenerative UI: Tool Rendering (Catch-all)
Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call
LangGraph (Python)LangGraph PlatformFrontend Tools: In-app Actions
Agent invokes client-side handlers registered with useFrontendTool
LangGraph (Python)LangGraph PlatformFrontend Tools: Async
useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result
LangGraph (Python)LangGraph PlatformHuman 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.
LangGraph (Python)LangGraph PlatformHuman 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
LangGraph (Python)LangGraph PlatformGenerative UI: Tool Rendering (Custom)
Custom per-tool renderers (WeatherCard, FlightListCard) plus a wildcard catch-all for every other tool
LangGraph (Python)LangGraph PlatformGenerative 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.
LangGraph (Python)LangGraph PlatformGenerative UI: useComponent
Agent uses tools to trigger UI generation
LangGraph (Python)LangGraph PlatformGenerative 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.
LangGraph (Python)LangGraph PlatformShared State: Streaming
Per-token state delta streaming from agent to UI
LangGraph (Python)LangGraph PlatformShared State: Read + Write
Bidirectional shared state — UI writes preferences via agent.setState; agent writes notes via a Command-returning tool
LangGraph (Python)LangGraph PlatformShared 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).
LangGraph (Python)LangGraph PlatformSub-Agents
Multiple agents with visible task delegation
LangGraph (Python)LangGraph PlatformPre-Built: Sidebar
Docked sidebar chat via <CopilotSidebar />
LangGraph (Python)LangGraph PlatformPre-Built: Popup
Floating popup chat via <CopilotPopup />
LangGraph (Python)LangGraph PlatformChat Customization: Slots
Customize CopilotChat via its slot system
LangGraph (Python)LangGraph PlatformHeadless UI: Simple
Minimum viable headless chat — useAgent + useCopilotKit dressed in shadcn/ui primitives. No tool rendering, no generative UI, just text in / text out.
LangGraph (Python)LangGraph PlatformHeadless 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.
LangGraph (Python)LangGraph PlatformReasoning: Default
Built-in CopilotChatReasoningMessage rendering with no slot override.
LangGraph (Python)LangGraph PlatformReasoning: Custom
Visible reasoning/thinking chain alongside the final answer
LangGraph (Python)LangGraph PlatformHuman in the Loop: Interrupts
Interactive component rendered inline in the chat via the lower-level `useInterrupt` primitive — direct control over the LangGraph interrupt lifecycle
LangGraph (Python)LangGraph PlatformHuman 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).
LangGraph (Python)LangGraph PlatformDeclarative UI: Dynamic A2UI
Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider; runtime injects the render_a2ui tool automatically
LangGraph (Python)LangGraph PlatformDeclarative UI: Fixed A2UI
Render an A2UI tree from a fixed, server-side schema — the agent streams data into a pre-authored component tree
LangGraph (Python)LangGraph PlatformMCP Apps
MCP server-driven UI via activity renderers
LangGraph (Python)LangGraph PlatformShared State: Frontend Context
Frontend provides read-only context to the agent via useAgentContext
LangGraph (Python)LangGraph PlatformDeclarative UI: json-render
Streaming hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)
LangGraph (Python)LangGraph PlatformBeautiful Chat
Canonical polished starter chat — brand fonts, theme tokens, suggestion pills
LangGraph (Python)LangGraph PlatformAttachments
Image and PDF uploads via CopilotChat attachments, processed by a vision-capable agent
LangGraph (Python)LangGraph PlatformAuthentication
Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states
LangGraph (Python)LangGraph PlatformDeclarative UI: Hashbrown
Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)
LangGraph (Python)LangGraph PlatformOpen 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.
LangGraph (Python)LangGraph PlatformOpen 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).
LangGraph (Python)LangGraph PlatformVoice
Speech-to-text via @copilotkit/voice with a bundled sample audio button
LangGraph (Python)LangGraph PlatformAgent Config Object
Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt
Agent Frameworks
Google ADKGoogle AI StudioCLI Start Command
Copy-paste command to clone the canonical starter
Google ADKGoogle AI StudioPre-Built: CopilotChat
Vanilla CopilotChat with three starter-prompt suggestions — the minimum-viable surface for free-form chat
Google ADKGoogle AI StudioChat Customization (CSS)
Default CopilotChat re-themed via CopilotKitCSSProperties
Google ADKGoogle AI StudioTool 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
Google ADKGoogle AI StudioTool Rendering (Custom Catch-all)
Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call
Google ADKGoogle AI StudioFrontend Tools (In-App Actions)
Agent invokes client-side handlers registered with useFrontendTool
Google ADKGoogle AI StudioFrontend Tools (Async)
useFrontendTool with an async handler — agent awaits a client-side async operation and uses the returned result
Google ADKGoogle AI StudioHuman 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.
Google ADKGoogle AI StudioMCP 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
Google ADKGoogle AI StudioIn-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
Google ADKGoogle AI StudioTool Rendering
Custom per-tool renderers (WeatherCard, FlightListCard) plus a wildcard catch-all for every other tool
Google ADKGoogle AI StudioTool-Based Generative UI
Agent uses tools to trigger UI generation
Google ADKGoogle AI StudioAgentic 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
Google ADKGoogle AI StudioShared 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).
Google ADKGoogle AI StudioShared State: Read + Write
Bidirectional shared state — UI writes preferences via agent.setState; agent writes notes via a Command-returning tool
Google ADKGoogle AI StudioState Streaming
Per-token state delta streaming from agent to UI via PredictStateMapping
Google ADKGoogle AI StudioSub-Agents
Multiple agents with visible task delegation
Google ADKGoogle AI StudioPre-Built: Sidebar
Docked sidebar chat via <CopilotSidebar />
Google ADKGoogle AI StudioPre-Built: Popup
Floating popup chat via <CopilotPopup />
Google ADKGoogle AI StudioChat Customization (Slots)
Customize CopilotChat via its slot system
Google ADKGoogle AI StudioHeadless Chat (Simple)
Minimal custom chat surface built on useAgent
Google ADKGoogle AI StudioHeadless Chat (Complete)
Full chat implementation built from scratch on useAgent
Google ADKGoogle AI StudioReasoning: Custom
Visible reasoning/thinking chain alongside the final answer (Gemini 2.5 thinking mode)
Google ADKGoogle AI StudioReasoning: Default
Built-in CopilotChatReasoningMessage rendering with no slot override.
Google ADKGoogle AI StudioDeclarative 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
Google ADKGoogle AI StudioDeclarative Generative UI (A2UI — Fixed Schema)
A2UI rendering against a known client-side schema
Google ADKGoogle AI StudioReadonly State (Agent Context)
Frontend provides read-only context to the agent via useAgentContext
Google ADKGoogle AI StudioTool Rendering + Reasoning Chain (testing)
Sequential tool calls with reasoning tokens rendered side-by-side
Google ADKGoogle AI StudioDeclarative UI: json-render
Streaming hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)
Google ADKGoogle AI StudioBeautiful Chat
Canonical polished starter chat — brand fonts, theme tokens, suggestion pills
Google ADKGoogle AI StudioMultimodal Attachments
Image and PDF uploads via CopilotChat attachments, processed by a Gemini multimodal agent
Google ADKGoogle AI StudioAuthentication
Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states
Google ADKGoogle AI StudioDeclarative UI: Hashbrown
Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)
Google ADKGoogle AI StudioFully Open-Ended Generative UI
Agent generates UI from an arbitrary component library
Google ADKGoogle AI StudioOpen-Ended Gen UI (Advanced: with frontend function calling)
Agent-authored UI that can invoke frontend sandbox functions from inside the iframe
Google ADKGoogle AI StudioVoice Input
Speech-to-text via @copilotkit/voice with a bundled sample audio button
Google ADKGoogle AI StudioAgent Config Object
Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt