showcase/shell-docs/src/content/docs/prebuilt-components/index.mdx
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.
<video src="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/agentic-chat-ui.mp4" className="rounded-lg shadow-xl" loop playsInline controls autoPlay muted />
<InlineDemo demo="agentic-chat" />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.
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6"> <a href="/prebuilt-components/chat" className="block rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-5 no-underline hover:border-[var(--accent)] hover:shadow-sm transition"> <div className="text-xs uppercase tracking-wide text-[var(--text-muted)] mb-1">Level 1 · Easiest</div> <div className="text-[var(--text)] font-semibold mb-2">Drop in as-is</div> <div className="text-sm text-[var(--text-secondary)]"> Render `<CopilotChat>`, `<CopilotSidebar>`, or `<CopilotPopup>` and ship. Streaming, tool calls, generative UI, and suggestions, all wired up. </div> </a> <a href="/custom-look-and-feel/css" className="block rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-5 no-underline hover:border-[var(--accent)] hover:shadow-sm transition"> <div className="text-xs uppercase tracking-wide text-[var(--text-muted)] mb-1">Level 2 · Re-skin</div> <div className="text-[var(--text)] font-semibold mb-2">Customize with CSS</div> <div className="text-sm text-[var(--text-secondary)]"> Override theme tokens (`--copilot-kit-primary-color`, etc.) or target `.copilotKit...` classes. Keep every feature, change every color. </div> </a> <a href="/custom-look-and-feel/slots" className="block rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-5 no-underline hover:border-[var(--accent)] hover:shadow-sm transition"> <div className="text-xs uppercase tracking-wide text-[var(--text-muted)] mb-1">Level 3 · Recompose</div> <div className="text-[var(--text)] font-semibold mb-2">Customize via slots (subcomponents)</div> <div className="text-sm text-[var(--text-secondary)]"> 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. </div> </a> <a href="/custom-look-and-feel/headless-ui" className="block rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-5 no-underline hover:border-[var(--accent)] hover:shadow-sm transition"> <div className="text-xs uppercase tracking-wide text-[var(--text-muted)] mb-1">Level 4 · Full control</div> <div className="text-[var(--text)] font-semibold mb-2">Go fully headless</div> <div className="text-sm text-[var(--text-secondary)]"> Compose your own chat from the low-level hooks (`useAgent`, `useCopilotKit`, `useRenderToolCall`). Any layout, any design system, or even non-chat surfaces. </div> </a> </div>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.
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:
useConfigureSuggestions lets you seed the chat with contextual
prompts the moment a user arrives. The example below uses a single
"Write a sonnet" suggestion:
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.