CopilotChat

"use client";import { useState } from "react";import {  CopilotKitProvider,  CopilotChat,  useFrontendTool,} from "@copilotkit/react-core/v2";import { z } from "zod";export default function AgenticChat() {  return (    <CopilotKitProvider runtimeUrl="/api/copilotkit" useSingleEndpoint>      <Demo />    </CopilotKitProvider>  );}function Demo() {  const [bg, setBg] = useState<string>("var(--copilot-kit-background-color)");  useFrontendTool({    name: "setBackground",    description:      "Set the page background. Accepts any CSS background value (color, gradient, etc.).",    parameters: z.object({      background: z        .string()        .describe("CSS background value (color, gradient, etc.)"),    }),    handler: async ({ background }) => {      setBg(background);      return { ok: true, background };    },  });  return (    <main style={{ background: bg, minHeight: "100vh" }} className="p-8">      <h1 className="text-2xl font-semibold mb-4">Agentic Chat</h1>      <p className="text-sm opacity-70 mb-6">        Try: &ldquo;Set the background to a sunset gradient.&rdquo;      </p>      <CopilotChat />    </main>  );}

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:

    <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