CopilotChat

What is this?

<CopilotChat> is the base prebuilt chat surface. Drop it in wherever you want the chat to render and size it to fit your layout. <CopilotSidebar> and <CopilotPopup> are both thin wrappers over the same primitives; if you need a dedicated chat page or an inline pane alongside other content, this is the component you want.

When should I use this?

Use <CopilotChat> when you want:

• A full-bleed chat that fills its container
• An inline chat pane as part of a larger page
• A dedicated /chat route
• Maximum layout freedom (no docked chrome or launcher)

For a collapsible docked chat, use CopilotSidebar. For a floating bubble that overlays content, use CopilotPopup.

<InlineDemo demo="agentic-chat" />

The gif below shows a typical session with streaming responses and starter suggestions:

Basic setup

Wrap your app in <CopilotKit> once (the provider wires the runtime, session, and agent registry) and render <CopilotChat> inside the layout of your choosing:

<Snippet region="provider-setup" title="frontend/src/app/page.tsx — provider + chat" />

Code example

A self-contained component that renders the chat and wires in starter suggestions:

<Snippet region="chat-component" title="frontend/src/app/page.tsx — the Chat component" />

Common props

<CopilotChat> is the root primitive. <CopilotSidebar> and <CopilotPopup> accept the same slots and labels, plus a few wrapper-specific props.

Prop	Description
agentId	Agent slug the chat should talk to (must match an agent configured on the runtime).
labels	User-facing copy — header title, placeholder, welcome, disclaimer.
messageView	Slot for the message list — see slots.
input	Slot for the composer area (text area, send button, disclaimer).
scrollView	Slot for the scroll container (e.g. custom feather/gradient).
suggestionView	Slot for the suggestion pills shown below messages.
welcomeScreen	Slot for the empty-state. Pass false to disable.

Styling

<CopilotChat> is fully themable:

• CSS variables / class overrides — see CSS customization
• Slots (subcomponents) — see slots
• Fully headless — see headless UI