CopilotPopup

Overview

CopilotPopup renders a floating action button (FAB) that opens a chat in a modal overlay card with a header and a dismissible backdrop. Like CopilotSidebar, its chat area wraps a headless CopilotChat. Provide your chat UI as children, or drop in the prebuilt UI CopilotChat from @copilotkit/react-native/components.

Control it imperatively through a CopilotPopupHandle ref.

Import

import { CopilotPopup, type CopilotPopupHandle } from "@copilotkit/react-native";

Props

Ref handle

Usage

import { CopilotPopup, type CopilotPopupHandle } from "@copilotkit/react-native";
import { CopilotChat } from "@copilotkit/react-native/components";
import { useRef } from "react";

export function ChatScreen() {
  const popupRef = useRef<CopilotPopupHandle>(null);

  return (
    <CopilotPopup ref={popupRef} agentId="default" headerTitle="Chat">
      <CopilotChat agentName="default" showHeader={false} />
    </CopilotPopup>
  );
}

Behavior

• Overlay: the popup opens as a modal card floating above your content, with a semi-transparent backdrop.
• Backdrop dismiss: tapping the backdrop closes the popup when dismissOnBackdropPress is true.
• FAB: when showToggleButton is true, a floating action button opens the popup and hides while it is open.
• Height: a percentage height (e.g. "60%") resolves against the screen height; a number is used as points.

Related

• CopilotSidebar: slide-in drawer variant
• CopilotChat: the chat primitive wrapped inside the popup