CopilotKit Showcase

CrewAI Conversational Flows

CopilotKit integration with CrewAI Conversational Flows

38 demos·7 categories·integration crewai-conversational-flows

Chat UI12

Agentic Chat

Natural conversation with frontend tool execution

/demos/agentic-chat

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

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

/demos/prebuilt-sidebar

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

/demos/prebuilt-popup

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

Reasoning: Default

Built-in CopilotChat reasoning rendering backed by native CrewAI Flow reasoning events

/demos/reasoning-default

Reasoning: Custom

Native CrewAI reasoning tokens rendered through a custom reasoning message slot

/demos/reasoning-custom

Voice Input

Speech-to-text transcription via @copilotkit/voice mounted on a per-demo runtime

/demos/voice

Beautiful Chat

Flagship showcase - polished brand-styled chat with A2UI, Open Generative UI, and shared-state todos

/demos/beautiful-chat

Multimodal Attachments

Image and PDF uploads routed through the AG-UI attachment pipeline

/demos/multimodal

Interactivity8

In-Chat Human in the Loop (original)

Original CrewAI HITL demo — kept for backwards-compat

/demos/hitl

In-Chat Human in the Loop

User approves agent actions before execution

/demos/hitl-in-chat

In-Chat HITL (Booking)

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

/demos/hitl-in-chat

In-App Human in the Loop

Agent requests approval via useFrontendTool; the approval UI pops up as an app-level modal OUTSIDE the chat

/demos/hitl-in-app

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

/demos/frontend-tools

Frontend Tools (Async)

useFrontendTool with an async handler

/demos/frontend-tools-async

Human in the Loop: Interrupts

Native CrewAI Flow human feedback rendered inline through useInterrupt

/demos/gen-ui-interrupt

Headless Interrupt

Native CrewAI Flow human feedback rendered in the app surface outside chat

/demos/interrupt-headless

Generative UI11

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

/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

Tool Rendering + Reasoning Chain

Sequential tool calls with reasoning tokens side-by-side

/demos/tool-rendering-reasoning-chain

Agentic Generative UI

Long-running agent tasks with generated UI

/demos/gen-ui-agent

Tool-Based Generative UI

Agent uses tools to trigger UI generation

/demos/gen-ui-tool-based

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

/demos/open-gen-ui

Open-Ended Gen UI (Advanced)

Agent-authored UI that invokes host sandbox functions from inside the iframe

/demos/open-gen-ui-advanced

Declarative Generative UI (A2UI - Dynamic Schema)

Branded A2UI components generated by a secondary LLM against a custom catalog

/demos/declarative-gen-ui

A2UI Fixed-Schema

Pre-authored component tree; the agent streams only data into the data model

/demos/a2ui-fixed-schema

A2UI Error Recovery

CrewAI Flow-owned validate-to-retry recovery that heals a malformed render or shows a graceful exhausted fallback

/demos/a2ui-recovery

MCP Apps

MCP server-driven UI via activity renderers

/demos/mcp-apps

Agent Capabilities1

Tool Rendering

Custom per-tool renderers plus a wildcard catch-all for every other tool

/demos/tool-rendering

Agent State3

Shared State (Read + Write)

Bidirectional shared state - UI writes preferences, agent writes notes

/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

Multi-Agent1

Sub-Agents

Supervisor delegates to research / writing / critique CrewAI sub-crews with a live delegation log

/demos/subagents

Platform2

Agent Config Object

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

/demos/agent-config

Authentication

Runtime-level bearer-token auth via the V2 onRequest hook

/demos/auth