Chat Components

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

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:

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

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:

export function useAgenticChatSuggestions() {  useConfigureSuggestions({    suggestions: [      { title: "Write a sonnet", message: "Write a short sonnet about AI." },      {        title: "Tell me a joke",        message: "Tell me a one-line joke.",      },      {        title: "Is 17 prime?",        message: "Walk me through whether 17 is prime.",      },    ],    available: "always",  });}