index.mdx

title	Prebuilt Components
icon	lucide/MessageSquare
description	Drop-in chat components with a full customization ladder — from pure CSS to fully headless.
hideTOC	true
snippet_cell	agentic-chat

Pre-built components for agentic chat

CopilotKit ships three prebuilt chat surfaces that connect directly to your agent: CopilotChat, CopilotSidebar, and CopilotPopup. 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.

Level 1 · Easiest

Drop in as-is

Render ``, ``, or `` and ship. Streaming, tool calls, generative UI, and suggestions, all wired up.

Level 2 · Re-skin

Customize with CSS

Override theme tokens (`--copilot-kit-primary-color`, etc.) or target `.copilotKit...` classes. Keep every feature, change every color.

Level 3 · Recompose

Customize via slots (subcomponents)

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.

Level 4 · Full control

Go fully headless

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:

Starter suggestions

useConfigureSuggestions lets you seed the chat with contextual prompts the moment a user arrives. The example below uses a single "Write a sonnet" suggestion:

Pick a surface

Each surface is a drop-in component with the same underlying primitives, differing 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.