Chat Components

"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>  );}

Pre-built components for agentic chat#

CopilotKit's chat components give you a fully functional, customizable AI chat interface out of the box. They handle streaming, generative UI, and deep customization so you can focus on your agent's behavior, not UI plumbing.

What it looks like in code#

The live agentic-chat cell above is built from a single, small page. Wrap your UI in <CopilotKit> once (it wires the runtime, session, and agent registry) and drop <CopilotChat> wherever the chat should go:

page.tsx

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

Inside the chat, the useConfigureSuggestions hook lets you show contextual starter prompts. The example below uses it to seed a simple "Write a sonnet" suggestion:

chat-component.snippet.tsx

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