Prebuilt Components
Drop-in chat components with a full customization ladder — from pure CSS to fully headless.
Pre-built components for agentic chat
CopilotKit ships three prebuilt chat surfaces — CopilotChat, CopilotSidebar, and CopilotPopup — that connect directly to your agent. Each is a wrapper around the same primitives with a different layout; pick the one that fits your app and you're done. They all handle streaming, generative UI, and deep customization out of the box.
The customization ladder
One of CopilotKit's design principles is that you should never have to throw the prebuilt UI away to get the look you want. Start at the top of this ladder and step down only when you need more control.
Render <CopilotChat>, <CopilotSidebar>, or <CopilotPopup> and ship.
Streaming, tool calls, generative UI, suggestions — all wired.
Override theme tokens (--copilot-kit-primary-color, etc.) or target
.copilotKit... classes. Keep every feature, change every color.
Swap the welcome screen, message bubble, composer, disclaimer, header, or toggle button with your own React component. Recursive — drill down as deep as you want.
Compose your own chat from the low-level hooks (useAgent,
useCopilotKit, useRenderToolCall). Any layout, any design system, or
even non-chat surfaces.
Everything below Level 1 is incremental — you can freely mix CSS variables, a custom welcome slot, and headless tool-call renderers in the same app. Nothing forces you to throw work away as your needs grow.
Drop-in chat in a few lines
Wrap your app in <CopilotKit> and drop <CopilotChat> where the
chat should live. The provider wires the runtime, the session, and
the agent registry — everything else is optional configuration:
provider-setup not found in langgraph-fastapi::agentic-chat. Tag the relevant source lines with // @region[provider-setup] / // @endregion[provider-setup].Starter suggestions
useConfigureSuggestions lets you seed the chat with contextual
prompts the moment a user arrives. The showcase cell uses a single
"Write a sonnet" suggestion:
configure-suggestions not found in langgraph-fastapi::agentic-chat. Tag the relevant source lines with // @region[configure-suggestions] / // @endregion[configure-suggestions].Pick a surface
Each surface is a drop-in component with the same underlying primitives — they differ only in layout.
<CopilotChat>— inline chat pane you can place anywhere and size to fit.<CopilotSidebar>— collapsible sidebar docked to the edge of your app.<CopilotPopup>— floating bubble that overlays your page content.