Demos
116 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
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 StudioHuman 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.
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 3.1 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 (injectA2UITool=true) and the ag_ui_adk adapter auto-injects generate_a2ui
Google ADKGoogle AI StudioDeclarative Generative UI (A2UI — Fixed Schema)
A2UI rendering against a known client-side schema
Google ADKGoogle AI StudioA2UI 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.
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
Enterprise
Spring AIAgentic Chat
Natural conversation with frontend tool execution
Spring AIChat Customization (CSS)
Default CopilotChat re-themed via scoped CSS overrides
Spring AIFrontend Tools (In-App Actions)
Agent invokes client-side handlers registered with useFrontendTool
Spring AIFrontend Tools (Async)
useFrontendTool with an async handler — agent awaits a client-side async operation and uses the returned result
Spring AIAgentic Generative UI
Long-running agent tasks with generated UI
Spring AIPre-Built: Sidebar
Docked sidebar chat via <CopilotSidebar />
Spring AIPre-Built: Popup
Floating popup chat via <CopilotPopup />
Spring AIChat Customization (Slots)
Customize CopilotChat via its slot system
Spring AIHeadless Chat (Simple)
Minimal custom chat surface built on useAgent
Spring AIReadonly State (Agent Context)
Frontend provides read-only context to the agent via useAgentContext
Spring AIAuthentication
Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states
Spring AIOpen Generative UI (Minimal)
Agent streams HTML + CSS into a sandboxed iframe via the built-in OpenGenerativeUIActivityRenderer
Spring AIOpen Generative UI (Advanced)
Sandboxed UI can call host-side functions (evaluateExpression, notifyHost) via the provider's sandboxFunctions registration
Spring AIVoice
CopilotChat mic button via a runtime mounted with TranscriptionServiceOpenAI; transcribed text is forwarded to the Spring AI backend
Spring AIAgent Config Object
Frontend forwards typed config (tone, expertise, responseLength) to Spring, which rebuilds the system prompt per request
Spring AIA2UI Fixed Schema
Dedicated Spring tool emits a fixed flight-card component tree plus a data model; frontend catalog renders each component
Spring AIHeadless Chat (Complete)
Full chat built from scratch on useAgent plus low-level render hooks (useRenderToolCall, useRenderActivityMessage, useRenderCustomMessages)
Spring AIBeautiful Chat
Polished brand-themed chat surface over the Spring AI agent with seeded suggestion pills
Spring AITool Rendering (Reasoning Chain)
Per-tool renderers (WeatherCard, FlightListCard) plus custom reasoningMessage slot composed in a single chat
Spring AIDeclarative Generative UI
A2UI dynamic-schema against a branded catalog; backend owns the `generate_a2ui` tool
Spring AIShared State (Read + Write)
Bidirectional shared state — UI writes preferences into agent state; the agent's set_notes tool mutates state.notes and emits a STATE_SNAPSHOT back to the UI
Spring AIShared State Streaming
Per-token state streaming — the agent's write_document tool streams content into state.document via STATE_SNAPSHOT events; the frontend renders the growing document live
Spring AISub-Agents
Supervisor delegates to research / writing / critique sub-agents (each its own ChatClient call). Every delegation appends a Delegation entry to state.delegations and emits a STATE_SNAPSHOT for a live UI log
Spring AIMultimodal Attachments
CopilotChat AttachmentsConfig for images + PDFs; sample files inject through the same pipeline as the paperclip upload
Spring AIIn-Chat Human in the Loop
User approves agent actions before execution via text input inside the chat
Spring AIIn-App Human in the Loop
Agent requests approval via useFrontendTool; the approval UI pops up as an app-level modal OUTSIDE the chat
Spring AIHuman in the Loop (Steps)
Multi-step HITL flow where the agent pauses for user confirmation at each step
Spring AITool Rendering
Backend agent tools rendered as UI components
Spring AICLI Start Command
Copy-paste command to clone the canonical Spring AI starter
Spring AITool-Based Generative UI
Frontend registers per-tool component renderers via useComponent; the Spring agent calls render tools that paint chart components inline in the chat
Spring AITool Rendering (Default Catch-all)
Out-of-the-box tool rendering — the Spring backend defines tools; the frontend adds zero custom renderers and relies on CopilotKit's built-in default UI
Spring AITool Rendering (Custom Catch-all)
Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every Spring tool call
Spring AIIn-Chat HITL (Booking)
Time-picker card rendered inline via useHumanInTheLoop for a booking flow against the Spring AI agent
Spring AIMCP Apps
MCP server-driven UI via the runtime mcpApps middleware; sandboxed iframe rendered via the built-in MCPAppsActivityRenderer
Spring AIDeclarative UI: Hashbrown
Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)
Spring AIDeclarative UI: json-render
Streaming structured output via @json-render/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)
Spring AIGenerative UI (Interrupt)
Time-picker card rendered inline via useFrontendTool with an async handler that blocks until the user picks a slot — Strategy B adaptation of LangGraph's interrupt() primitive
Spring AIHeadless Interrupt
Time-picker popup rendered in the app surface (outside the chat) via useFrontendTool with an async handler — headless variant of the interrupt-adapted pattern