CopilotPopup

Overview

CopilotPopup renders a floating chat popup with a toggle button. It wraps CopilotChat and provides popup-specific layout, sizing, and open/close behavior. The popup includes a header with a title and close button, and can be dismissed by clicking outside.

See CopilotSidebar for a sidebar variant of this component.

Import

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

Props

Own Props

Inherited CopilotChat Props

CopilotPopup accepts all props from CopilotChatProps except chatView, which is set internally to CopilotPopupView. This includes:

All CopilotChatView slot props (messageView, input, scrollView, inputContainer, feather, disclaimer, suggestionView) are also accepted and forwarded through.

Slot System

All slot props follow the same override pattern used across CopilotKit v2 components. Each slot accepts one of three value types:

Usage

Basic Usage

function App() {
  return (
    <CopilotPopup
      agentId="my-agent"
      labels={{ modalHeaderTitle: "Assistant" }}
    />
  );
}

Custom Size and Default Open

function App() {
  return (
    <CopilotPopup
      agentId="my-agent"
      defaultOpen={true}
      width={450}
      height="80vh"
      clickOutsideToClose={false}
    />
  );
}

Custom Header

function App() {
  return <CopilotPopup agentId="my-agent" header="bg-blue-600 text-white" />;
}

Behavior

• Toggle button: Renders a floating toggle button (typically in the bottom-right corner) that opens and closes the popup. The button uses CopilotChatToggleButton internally.
• Modal state: Open/close state is managed via the chat configuration context. The defaultOpen prop sets the initial state; after that, state changes come from user interaction (toggle button, close button, clicking outside).
• Click outside: When clickOutsideToClose is true (the default), clicking anywhere outside the popup panel closes it.
• Layout: The popup uses CopilotPopupView internally, which provides a popup-specific welcome screen layout with the welcome message centered vertically and suggestions just above the input.
• Agent connection: All agent wiring (messages, running state, suggestions) is handled by the parent CopilotChat logic.

Related

• CopilotChat -- the base chat component used internally
• CopilotSidebar -- sidebar variant
• CopilotChatView -- the layout component used internally