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.

Basic setup

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

Code example

// [!code word:CopilotChat]
import { CopilotChat } from "@copilotkit/react-core/v2";

export default function YourComponent() {
  return (
    <CopilotChat
      labels={{
        modalHeaderTitle: "Your Assistant",
        welcomeMessageText: "Hi! How can I assist you today?",
      }}
    />
  );
}

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

<CopilotChat
  agentId="my-agent"
  labels={{
    modalHeaderTitle: "Your Assistant",
    welcomeMessageText: "Hi! How can I assist you today?",
  }}
  messageView={{
    assistantMessage: {
      className: "bg-gray-50 rounded-xl p-4",
    },
  }}
/>