CopilotKit Showcase

MS Agent Framework (.NET)

CopilotKit integration with Microsoft Agent Framework for .NET via AG-UI protocol. Full feature parity including generative UI, shared state, human-in-the-loop, sub-agents, and streaming.

39 demos·7 categories·integration ms-agent-dotnet

Chat UI11

Beautiful Chat

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

/demos/beautiful-chat

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

Multimodal Attachments

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

/demos/multimodal

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

Interactivity6

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 (simulated notes DB query) and uses the returned result

/demos/frontend-tools-async

In-Chat Human in the Loop (Original)

User approves agent actions before execution

/demos/hitl

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

/demos/hitl-in-app

In-Chat HITL (useHumanInTheLoop — ergonomic API)

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

/demos/hitl-in-chat

Headless Interrupt (testing)

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

/demos/interrupt-headless

Generative UI16

Tool-Based Generative UI

Agent uses tools to trigger UI generation

/demos/gen-ui-tool-based

Declarative Generative UI (A2UI)

Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider; runtime injects the render_a2ui tool automatically

/demos/declarative-gen-ui

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema

/demos/a2ui-fixed-schema

A2UI 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. Backend-owned; reuses the declarative-gen-ui catalog.

/demos/a2ui-recovery

MCP Apps

MCP server-driven UI via activity renderers

/demos/mcp-apps

Agentic Generative UI

Long-running agent tasks with generated UI

/demos/gen-ui-agent

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 (testing)

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

/demos/tool-rendering-reasoning-chain

Reasoning (Custom Render)

Custom reasoning slot renders the model's visible thinking chain

/demos/reasoning-custom

Reasoning (Default Render)

Built-in CopilotChatReasoningMessage renders without a custom slot

/demos/reasoning-default

BYOC Hashbrown

Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)

/demos/declarative-hashbrown

BYOC json-render

Streaming hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)

/demos/declarative-json-render

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

/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

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 Capabilities1

Tool Rendering

Backend agent tools rendered as UI components

/demos/tool-rendering

Agent State3

Shared State (Read + Write)

Bidirectional agent state — UI writes preferences, agent writes notes back via a set_notes tool

/demos/shared-state-read-write

State Streaming

Per-token state delta streaming from agent to UI

/demos/shared-state-streaming

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

/demos/readonly-state-agent-context

Multi-Agent1

Sub-Agents

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

/demos/subagents

Platform1

Agent Config Object

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

/demos/agent-config