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.

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:

    <CopilotKitProvider runtimeUrl="/api/copilotkit" useSingleEndpoint>
      <Demo />
    </CopilotKitProvider>

Code example#

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

export function Chat() {
  useConfigureSuggestions({
    suggestions: [
      { title: "Write a sonnet", message: "Write a short sonnet about AI." },
    ],
    available: "always",
  });

  return <CopilotChat className="h-full rounded-2xl" />;
}

Common props#

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

Styling#

<CopilotChat> is fully themable:

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