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

tsx

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:

<PropertyReference name="defaultOpen" type="boolean" default="false"> Start the drawer in the open position. </PropertyReference> <PropertyReference name="width" type="number | string" default='"85%"'> Width of the drawer panel. Accepts points (a number) or a percentage string resolved against the screen width. </PropertyReference> <PropertyReference name="headerTitle" type="string" default='"Copilot"'> Title displayed in the drawer header bar. </PropertyReference> <PropertyReference name="showToggleButton" type="boolean" default="true"> Show a floating action button to toggle the drawer. Hidden while the drawer is open. </PropertyReference> <PropertyReference name="onOpen" type="() => void"> Called after the drawer finishes opening. </PropertyReference> <PropertyReference name="onClose" type="() => void"> Called after the drawer finishes closing. </PropertyReference> <PropertyReference name="style" type="ViewStyle"> Custom style applied to the drawer container. </PropertyReference> <PropertyReference name="children" type="ReactNode"> Content rendered inside the drawer below the header. Build your chat UI here from [`useCopilotChatContext`](/reference/react-native/components/CopilotChat#usecopilotchatcontext). </PropertyReference>

Ref handle

<PropertyReference name="CopilotSidebarHandle" type="{ open(): void; close(): void; toggle(): void }"> Imperative handle exposed via `ref` for opening, closing, and toggling the drawer programmatically. </PropertyReference>

Usage

tsx

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.

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