CopilotKit Showcase

AG2

CopilotKit integration with AG2. Supports the full range of CopilotKit features including generative UI, shared state, human-in-the-loop, sub-agents, and streaming.

35 demos·7 categories·integration ag2

Chat UI11

Agentic Chat

Natural conversation with frontend tool execution

/demos/agentic-chat

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

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

/demos/multimodal

Simplified flagship cell that combines A2UI Dynamic + Open Generative UI on a single dedicated runtime — agent picks branded catalog components for structured visuals and free-form sandboxed UI for everything else

/demos/beautiful-chat

Interactivity8

In-Chat HITL (useHumanInTheLoop)

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

/demos/hitl-in-chat

In-Chat HITL (Booking)

Time-picker card rendered inline via useHumanInTheLoop for a booking flow — same surface as hitl-in-chat with a booking-focused framing

/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

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 client-side async operation and uses the returned result

/demos/frontend-tools-async

Gen UI Interrupt (Frontend Tool + async Promise)

In-chat time-picker card via useFrontendTool with an async handler that blocks until the user picks a slot — AG2 adaptation of the LangGraph interrupt() primitive

/demos/gen-ui-interrupt

Headless Interrupt (Frontend Tool + async Promise)

Time-picker popup rendered outside the chat in the app surface via useFrontendTool with an async handler — AG2 adaptation of the LangGraph headless interrupt pattern