CopilotKit

CopilotKitProvider

The React Native provider that configures the CopilotKit runtime connection and shares it with all hooks and components.

Open your coding agent in your project's folder, or in an empty folder for a new app.This runs in a coding agent on your computer.

Overview

CopilotKitProvider is the React Native provider for CopilotKit. Wrap your app (or the sub-tree that needs a copilot) with it to configure the runtime connection. Every hook and component below it reads the configured client from context.

Importing the package auto-installs the polyfills CopilotKit needs on Hermes, so you do not have to import them manually before using the provider. One thing it cannot do for you: its crypto.getRandomValues falls back to Math.random, which is not cryptographically secure. For a secure one, import react-native-get-random-values on the first line of your entry point, before any CopilotKit import; once a CopilotKit module has loaded, the fallback stays and the secure import does nothing. See Polyfills in the guide.

Cloud features (publicLicenseKey / license-gated functionality) are not yet supported on React Native. Point runtimeUrl at a self-hosted runtime.

Native iOS and Android applications do not have a built-in Inspector yet. The browser Inspector requires a DOM and is intentionally excluded from the React Native dependency graph, so this provider does not expose an inspector prop.

Import

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

Props

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Usage

import { CopilotKitProvider } from "@copilotkit/react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { ChatScreen } from "./ChatScreen";

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

Behavior

  • Auto-polyfills: importing the package installs the Web API polyfills CopilotKit relies on (ReadableStream, TextEncoder, crypto.getRandomValues, DOMException, location) before any CopilotKit code runs. Each polyfill installs only when its global is missing, so a secure crypto.getRandomValues from react-native-get-random-values must be imported first, on the first line of the entry point.
  • Shared render-tool registry: the provider instantiates the CopilotKit client whose renderer registry is shared with the rest of CopilotKit. Render functions registered by useRenderTool, useFrontendTool or useComponent write into that one registry, so they and useRenderToolCall work anywhere below the provider. There is no second registry and no extra provider to mount for rendering.
  • Stable references: header functions and properties are memoized internally to avoid effect churn on re-render.

Related

  • useCopilotKit: access the configured client from any descendant
  • useAgent: connect to an agent and read its state
  • Polyfills: what gets installed and how to bring your own
  • GenerativeUIProvider: goes inside this provider to let the agent render your native components