CopilotKitProvider

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.

Import

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

Props

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.
• 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 (or useComponent) write into that registry, so useRenderTool and useRenderToolCall work anywhere below the provider — there is no separate RenderToolProvider wrapper.
• 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