CopilotSidebar

Overview

CopilotSidebar renders a slide-in drawer from the right edge of the screen, with a header bar, a backdrop, and an optional floating action button (FAB) to toggle it. The drawer's chat area wraps a headless CopilotChat. Render your chat UI as children (consuming useCopilotChatContext) or drop in the prebuilt UI CopilotChat from @copilotkit/react-native/components.

Control it imperatively through a CopilotSidebarHandle ref.

Import

import { CopilotSidebar, type CopilotSidebarHandle } from "@copilotkit/react-native";

Props

Accepts the headless CopilotChat props (agentId, agentName, threadId, onError, throttleMs, attachments) except children is repurposed for the drawer body, plus:

Ref handle

Usage

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

export function ChatScreen() {
  const sidebarRef = useRef<CopilotSidebarHandle>(null);

  return (
    <CopilotSidebar ref={sidebarRef} agentId="default" headerTitle="Assistant">
      <CopilotChat agentName="default" showHeader={false} />
    </CopilotSidebar>
  );
}

Behavior

• Animation: slides in/out over 300ms using the React Native Animated API.
• Backdrop: a semi-transparent, pressable backdrop dismisses the drawer.
• FAB: when showToggleButton is true, a floating button opens the drawer and hides while it is open.

Related

• CopilotPopup: floating action button plus centered overlay
• CopilotChat: the chat primitive wrapped inside the drawer