Skip to content

chat.mdx

Latest commit

 

History

History
65 lines (46 loc) · 2.46 KB

chat.mdx

File metadata and controls

65 lines (46 loc) · 2.46 KB
Raw
title CopilotChat
icon lucide/MessageSquare
description Inline chat component you can place anywhere and size as needed.
snippet_cell 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:

Code example

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

Common props

<CopilotChat> is the root primitive. <CopilotSidebar> and <CopilotPopup> accept the same slots and labels, plus a few wrapper-specific props.

Prop Description
agentId Agent slug the chat should talk to (must match an agent configured on the runtime).
labels User-facing copy — header title, placeholder, welcome, disclaimer.
messageView Slot for the message list — see slots.
input Slot for the composer area (text area, send button, disclaimer).
scrollView Slot for the scroll container (e.g. custom feather/gradient).
suggestionView Slot for the suggestion pills shown below messages.
welcomeScreen Slot for the empty-state. Pass false to disable.

Styling

<CopilotChat> is fully themable: