CopilotKit

CopilotModal

Headless modal wrapper around CopilotChat, plus a prebuilt bottom-sheet chat from the /components subpath.

Overview

Like CopilotChat, CopilotModal ships in two versions, chosen by import path:

  • Headless (@copilotkit/react-native) is a thin wrapper around CopilotChat that mirrors the web SDK's CopilotModal API. It provides agent wiring only; you handle modal presentation with React Native's Modal (or any overlay) and build the chat UI from useCopilotChatContext.
  • Prebuilt UI (@copilotkit/react-native/components) is a ready-made chat in a @gorhom/bottom-sheet with snap points and swipe-to-dismiss. See Prebuilt UI.

Headless CopilotModal

import { CopilotModal } from "@copilotkit/react-native";

Accepts all headless CopilotChat props (agentId, agentName, threadId, onError, throttleMs, attachments), plus:

Prop

Type

Usage

import { CopilotModal } from "@copilotkit/react-native";
import { Modal } from "react-native";

function App({ isOpen }: { isOpen: boolean }) {
  return (
    <Modal visible={isOpen} animationType="slide">
      <CopilotModal agentId="default">
        <MyChatUI />
      </CopilotModal>
    </Modal>
  );
}

Prebuilt UI

Import CopilotModal from the /components subpath for a bottom-sheet chat. Control it imperatively through a CopilotModalRef, or declaratively with the visible prop. Requires the @gorhom/bottom-sheet, react-native-gesture-handler, and react-native-reanimated peer dependencies.

import { CopilotModal, type CopilotModalRef } from "@copilotkit/react-native/components";

Props

Like the prebuilt CopilotChat, this component selects its agent with agentName (the prop the prebuilt UI currently exposes), not the headless agentId.

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Ref handle

Prop

Type

Usage

import { CopilotModal, type CopilotModalRef } from "@copilotkit/react-native/components";
import { useRef } from "react";
import { Button, View } from "react-native";

export function ChatScreen() {
  const modalRef = useRef<CopilotModalRef>(null);

  return (
    <View style={{ flex: 1 }}>
      <Button title="Open chat" onPress={() => modalRef.current?.open()} />
      <CopilotModal
        ref={modalRef}
        agentName="default"
        headerTitle="Assistant"
        snapPoints={["50%", "90%"]}
      />
    </View>
  );
}

Related