CopilotChat

"use client";import React from "react";import { CopilotKit, CopilotChat } from "@copilotkit/react-core/v2";import { useAgenticChatSuggestions } from "./suggestions";export default function AgenticChatDemo() {  return (    <CopilotKit runtimeUrl="/api/copilotkit" agent="agentic_chat">      <Chat />    </CopilotKit>  );}function Chat() {  useAgenticChatSuggestions();  return <CopilotChat agentId="agentic_chat" />;}

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) and render <CopilotChat> inside the layout of your choosing:

    <CopilotKit runtimeUrl="/api/copilotkit" agent="agentic_chat">      <Chat />    </CopilotKit>

Code example#

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

function Chat() {  useAgenticChatSuggestions();  return <CopilotChat agentId="agentic_chat" />;}export function Chat() {  useConfigureSuggestions({    suggestions: [      { title: "Write a sonnet", message: "Write a short sonnet about AI." },    ],    available: "always",  });  return <CopilotChat agentId="agentic_chat" 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