CopilotKit Showcase

LlamaIndex

CopilotKit integration with LlamaIndex

37 demos·6 categories·integration llamaindex

Chat UI13

Beautiful Chat

Polished starter chat with brand-styled CopilotChat surface

/demos/beautiful-chat

Agentic Chat

Natural conversation with frontend tool execution

/demos/agentic-chat

Agentic Chat (Reasoning)

Visible reasoning / thinking chain rendered via a custom messageView slot

/demos/reasoning-custom

Reasoning (Default Render)

Reasoning rendered via CopilotKit's built-in collapsible card with zero custom config

/demos/reasoning-default

Authentication

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

/demos/auth

Voice Input

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

/demos/voice

Multimodal Attachments

Image and PDF uploads via CopilotChat attachments, processed by a vision-capable agent (gpt-4o)

/demos/multimodal

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

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 — agent awaits a simulated client-side notes DB query and uses the returned result

/demos/frontend-tools-async

In-Chat HITL (useHumanInTheLoop)

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

/demos/hitl-in-chat

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

/demos/hitl-in-app

In-Chat Human in the Loop (Original)

User approves agent actions before execution

/demos/hitl

In-Chat HITL (Booking)

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

/demos/hitl-in-chat

Headless Interrupt (testing)

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

/demos/interrupt-headless

Generative UI11

Tool-Based Generative UI

Agent uses tools to trigger UI generation (bar / pie chart components)

/demos/gen-ui-tool-based

MCP Apps

MCP server-driven UI via activity renderers

/demos/mcp-apps

Tool Rendering (Default Catch-all)

Out-of-the-box tool rendering — backend defines tools; frontend adds zero custom renderers and uses 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

Declarative Generative UI (A2UI)

Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton/PieChart/BarChart) wired via a2ui.catalog on the provider; agent owns the generate_a2ui tool

/demos/declarative-gen-ui

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema; the agent streams flight data into a pre-authored component tree

/demos/a2ui-fixed-schema

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library inside a sandboxed iframe

/demos/open-gen-ui

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

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

/demos/open-gen-ui-advanced

Tool Rendering + Reasoning Chain (testing)

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 — direct control over the interrupt lifecycle

/demos/gen-ui-interrupt

Agent Capabilities2

Tool Rendering

Backend agent tools rendered as UI components

/demos/tool-rendering

Sub-Agents

Supervisor delegates to research / writing / critique sub-agents (each a stand-alone LlamaIndex FunctionAgent). Every delegation appends to a live log in shared agent state

/demos/subagents

Agent State3

Shared State (Read + Write)

Bidirectional shared state — UI writes preferences via agent.setState; agent writes notes via the set_notes tool. Backend reads preferences from state every turn through LlamaIndex's <state> prelude

/demos/shared-state-read-write

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

/demos/readonly-state-agent-context

State Streaming

Per-token state delta streaming from agent to UI

/demos/shared-state-streaming

Platform1

Agent Config Object

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

/demos/agent-config