CopilotChat

Overview

CopilotChat is a high-level chat container that wires an agent into CopilotChatView while providing configuration context. It obtains the agent via useAgent, triggers an initial runAgent when mounting CopilotKit agents, manages pending state, and auto-clears the input after submission. Override any of the internal slots by passing CopilotChatView props directly.

CopilotChat manages messages, running state, and suggestions automatically -- you only need to specify which agent to connect and, optionally, customise labels or slot overrides.

Import

import { CopilotChat } from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";

Props

Own Props

Inherited CopilotChatView Props

CopilotChat accepts all props from CopilotChatViewProps except messages, isRunning, suggestions, suggestionLoadingIndexes, and onSelectSuggestion, which are managed internally by the agent connection.

This means you can pass slot overrides such as messageView, input, scrollView, inputContainer, feather, disclaimer, suggestionView, and welcomeScreen directly to CopilotChat.

Slot System

All slot props inherited from CopilotChatView follow the same override pattern. Each slot accepts one of three value types:

Additionally, a children render-prop can be used to receive all composed slot elements and arrange them in a custom layout.

Usage

Basic Usage

function App() {
  return (
    <CopilotChat
      agentId="my-agent"
      labels={{ chatInputPlaceholder: "Ask me anything..." }}
    />
  );
}

Custom Welcome Screen

function App() {
  return (
    <CopilotChat
      agentId="my-agent"
      welcomeScreen={({ input, suggestionView }) => (
        <div className="flex flex-col items-center justify-center h-full gap-4">
          <h2>Welcome to the assistant</h2>
          {suggestionView}
          {input}
        </div>
      )}
    />
  );
}

Overriding the Chat View Slot

function App() {
  return (
    <CopilotChat
      agentId="my-agent"
      chatView="bg-gray-50 rounded-xl shadow-lg"
    />
  );
}

Behavior

• Agent wiring: On mount, CopilotChat calls useAgent with the provided agentId and binds the agent's messages, isRunning, and suggestion state to CopilotChatView.
• Initial run: If the agent has not been run yet, CopilotChat triggers runAgent automatically so the agent can send an initial greeting or set up state.
• Auto-clear input: After a message is submitted, the input field is cleared automatically.
• Configuration context: Wraps children in CopilotChatConfigurationProvider, making labels, agentId, threadId, and modal state available to all descendant components via useCopilotChatConfiguration.
• Suggestion management: Subscribes to the agent's suggestion system and passes suggestions, loading states, and selection callbacks down to CopilotChatView.

Related

• CopilotChatView -- the layout component used internally
• CopilotPopup -- popup variant of CopilotChat
• CopilotSidebar -- sidebar variant of CopilotChat
• useAgent -- hook used internally to access the agent