Demos

36 results

Emerging

LangGraph (FastAPI)LangGraph Platform

CLI Start Command

Copy-paste command to clone the canonical starter

LangGraph (FastAPI)LangGraph Platform

Agentic Chat

Natural conversation with frontend tool execution

LangGraph (FastAPI)LangGraph Platform

Tool Rendering

Backend agent tools rendered as UI components

LangGraph (FastAPI)LangGraph Platform

In-Chat Human in the Loop (Original)

User approves agent actions before execution

LangGraph (FastAPI)LangGraph Platform

Agentic Generative UI

Long-running agent tasks with generated UI

LangGraph (FastAPI)LangGraph Platform

Tool-Based Generative UI

Agent uses tools to trigger UI generation

LangGraph (FastAPI)LangGraph Platform

State Streaming

Per-token state delta streaming from agent to UI

LangGraph (FastAPI)LangGraph Platform

Shared State (Read + Write)

Bidirectional shared state — UI writes preferences, agent writes notes

LangGraph (FastAPI)LangGraph Platform

Sub-Agents

Multiple agents with visible task delegation

LangGraph (FastAPI)LangGraph Platform

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

LangGraph (FastAPI)LangGraph Platform

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

LangGraph (FastAPI)LangGraph Platform

Chat Customization (Slots)

Customize CopilotChat via its slot system

LangGraph (FastAPI)LangGraph Platform

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

LangGraph (FastAPI)LangGraph Platform

Beautiful Chat

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

LangGraph (FastAPI)LangGraph Platform

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

LangGraph (FastAPI)LangGraph Platform

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

LangGraph (FastAPI)LangGraph Platform

Authentication

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

LangGraph (FastAPI)LangGraph Platform

Multimodal Attachments

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

LangGraph (FastAPI)LangGraph Platform

Agent Config Object

Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt

LangGraph (FastAPI)LangGraph Platform

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

LangGraph (FastAPI)LangGraph Platform

Tool Rendering (Custom Catch-all)

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

LangGraph (FastAPI)LangGraph Platform

Tool Rendering + Reasoning Chain (testing)

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

LangGraph (FastAPI)LangGraph Platform

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

LangGraph (FastAPI)LangGraph Platform

Headless Interrupt (testing)

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

LangGraph (FastAPI)LangGraph Platform

Declarative Generative UI (A2UI)

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

LangGraph (FastAPI)LangGraph Platform

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema

LangGraph (FastAPI)LangGraph Platform

MCP Apps

MCP server-driven UI via activity renderers

LangGraph (FastAPI)LangGraph Platform

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

LangGraph (FastAPI)LangGraph Platform

Frontend Tools (Async)

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

LangGraph (FastAPI)LangGraph Platform

In-App Human in the Loop (Frontend Tools + async HITL)

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 (FastAPI)LangGraph Platform

In-Chat HITL (useHumanInTheLoop — ergonomic API)

Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook

LangGraph (FastAPI)LangGraph Platform

In-Chat HITL (Booking)

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

LangGraph (FastAPI)LangGraph Platform

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

LangGraph (FastAPI)LangGraph Platform

Voice Input

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

LangGraph (FastAPI)LangGraph Platform

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

LangGraph (FastAPI)LangGraph Platform

Open-Ended Gen UI (Advanced: with frontend function calling)

Agent-authored UI that can invoke frontend sandbox functions from inside the iframe

76b653f39
CopilotKit Showcase