CopilotKit Showcase

Agno

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

37 demos·7 categories·integration agno

Chat UI12

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 CopilotKit CSS variables

/demos/chat-customization-css

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

/demos/headless-simple

Voice Input

Microphone + sample-audio button → /transcribe endpoint → text injected into the chat composer

/demos/voice

Multimodal Attachments

Image + PDF attachments forwarded to a vision-capable Agno agent via CopilotChat's attachments config

/demos/multimodal

Agentic Chat (Reasoning)

Visible reasoning / thinking chain rendered via a custom reasoningMessage slot on the reasoning-enabled Agno agent

/demos/reasoning-custom

Reasoning (Default Render)

Zero-config rendering of the agent's reasoning chain via CopilotKit's built-in reasoning message

/demos/reasoning-default

Headless Chat (Complete)

Full chat built from scratch on useAgent — custom bubbles, input bar, and manual generative-UI composition via useRenderToolCall

/demos/headless-complete

Beautiful Chat

Polished landing-style chat shell over the shared Agno agent — gradient background, suggestion pills, and an example dashboard surface

/demos/beautiful-chat

Interactivity8

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

/demos/frontend-tools-async

In-Chat Human in the Loop

User approves agent actions before execution

/demos/hitl

In-Chat Human in the Loop (Time Picker)

Agent proposes a meeting time; user confirms or adjusts via an in-chat card before the agent proceeds

/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, branded for the booking scenario

/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

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 — Agno 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 — Agno adaptation of the LangGraph headless interrupt pattern

/demos/interrupt-headless

Generative UI9

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 — frontend renders a haiku card from a generate_haiku tool call

/demos/gen-ui-tool-based

MCP Apps

MCP-provided tools rendered inline as sandboxed UI via the runtime's mcpApps middleware

/demos/mcp-apps

Open Generative UI

Agent-authored HTML + CSS streamed into a sandboxed iframe via the runtime's openGenerativeUI middleware

/demos/open-gen-ui

Open Generative UI (Advanced)

Sandboxed iframe with host-side sandbox functions the agent's UI can call back into via Websandbox.connection.remote

/demos/open-gen-ui-advanced

Tool Rendering (Default Catch-all)

Out-of-the-box default tool-call card via useDefaultRenderTool()

/demos/tool-rendering-default-catchall

Tool Rendering (Custom Catch-all)

Single branded wildcard renderer via useDefaultRenderTool

/demos/tool-rendering-custom-catchall

A2UI Fixed Schema

Schema is authored ahead of time as JSON; the agent only streams data into the data model. `display_flight` emits an a2ui_operations container directly with no secondary LLM call

/demos/a2ui-fixed-schema

Declarative Generative UI (A2UI Dynamic)

Agent dynamically composes UI per turn from a registered frontend catalog — secondary LLM call inside the backend `generate_a2ui` tool emits an a2ui_operations container that the A2UI middleware forwards to the catalog renderer