index.mdx

title	React Native
description	API reference for @copilotkit/react-native: the headless provider, prebuilt UI components, and hooks for building CopilotKit into a React Native app.

@copilotkit/react-native brings CopilotKit to React Native. It ships a lightweight provider, a set of prebuilt UI components, hooks built for React Native, and re-exports of the platform-agnostic hooks from @copilotkit/react-core. Everything is built on the AG-UI agent protocol, with no DOM, CSS, or web framework dependencies.

The package root **is** the v2 API. Unlike the web SDK, which exposes v2 under a `/v2` subpath, React Native exports the v2 surface directly from `@copilotkit/react-native`.

Installation

npm install @copilotkit/react-native

The prebuilt UI components and native attachments rely on a few peer dependencies. Install the ones you use:

npm install @gorhom/bottom-sheet react-native-gesture-handler react-native-reanimated react-native-streamdown

Polyfills

React Native's JS runtime (Hermes) lacks several Web APIs that CopilotKit depends on (ReadableStream, TextEncoder, crypto.getRandomValues, DOMException, location). Importing @copilotkit/react-native auto-installs these polyfills, so no manual import is required.

If you bring your own polyfills, import only the pieces you need before any other code in your entry point:

import "@copilotkit/react-native/polyfills/streams";
import "@copilotkit/react-native/polyfills/encoding";
import "@copilotkit/react-native/polyfills/crypto";
import "@copilotkit/react-native/polyfills/dom";
import "@copilotkit/react-native/polyfills/location";

Provider setup

Wrap your app (or a sub-tree) with CopilotKitProvider to configure the runtime connection:

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

export default function App() {
  return (
    <CopilotKitProvider runtimeUrl="https://your-server/api/copilotkit">
      <ChatScreen />
    </CopilotKitProvider>
  );
}

Two ways to build the chat UI

The package is organized into two tiers, so you can pick how much UI you write yourself:

Tier	Import	What you get
Headless	@copilotkit/react-native	Primitives that wire up an agent and expose its state. CopilotChat and CopilotModal render no UI; you build the interface from React Native views.
Prebuilt UI	@copilotkit/react-native/components	Drop-in chat UI: a full-screen CopilotChat, a bottom-sheet CopilotModal, CopilotMarkdown, and message bubbles.

The root also exports two prebuilt chrome components: CopilotSidebar (a slide-in drawer) and CopilotPopup (a floating action button + overlay).

`CopilotChat` and `CopilotModal` exist in **both** tiers with different props. The root exports are headless; the `/components` exports are prebuilt UI. Each component page documents both, disambiguated by import path.

API Reference

} /> } />

Related

• React Native quickstart: create an app, install, and connect your first agent
• React (V2) reference: the web SDK, where the re-exported hooks behave identically