showcase/shell-docs/src/content/reference/react-native/index.mdx
@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.
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
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";
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>
);
}
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).