---
title: "CopilotKit"
description: "The CopilotKit provider component, wrapping your application."
---

{
 /*
  * ATTENTION! DO NOT MODIFY THIS FILE!
  * This page is auto-generated. If you want to make any changes to this page, changes must be made at:
  * packages/react-core/src/components/copilot-provider/copilotkit.tsx
  */
}
This component will typically wrap your entire application (or a sub-tree of your application where you want to have a copilot). It provides the copilot context to all other components and hooks.
 
## Example
 
You can find more information about self-hosting CopilotKit [here](/guides/self-hosting).
 
```tsx
import { CopilotKit } from "@copilotkit/react-core";
 
<CopilotKit runtimeUrl="<your-runtime-url>">
  // ... your app ...
</CopilotKit>
```

## Properties

<PropertyReference name="publicApiKey" type="string"  > 
Your Copilot Cloud API key.
 
  Don't have it yet? Go to https://dashboard.operations.copilotkit.ai and get one for free.
</PropertyReference>

<PropertyReference name="publicLicenseKey" type="string"  > 
Your public license key for accessing premium CopilotKit features.
 
  Don't have it yet? Go to https://dashboard.operations.copilotkit.ai and get one for free.
</PropertyReference>

<PropertyReference name="guardrails_c" type="{ validTopics?: string[]; invalidTopics?: string[]; }"  > 
Restrict input to specific topics using guardrails.
  @remarks
 
  This feature is only available when using CopilotKit's hosted cloud service. To use this feature, sign up at https://dashboard.operations.copilotkit.ai to get your publicApiKey. The feature allows restricting chat conversations to specific topics.
</PropertyReference>

<PropertyReference name="runtimeUrl" type="string"  > 
The endpoint for the Copilot Runtime instance. [Click here for more information](/concepts/copilot-runtime).
</PropertyReference>

<PropertyReference name="transcribeAudioUrl" type="string"  > 
The endpoint for the Copilot transcribe audio service.
</PropertyReference>

<PropertyReference name="textToSpeechUrl" type="string"  > 
The endpoint for the Copilot text to speech service.
</PropertyReference>

<PropertyReference name="headers" type="Record<string, string> | (() => Record<string, string>)"  > 
Additional headers to be sent with the request.
  Can be a static object or a function that returns headers dynamically
  (useful for refreshing auth tokens).
 
  For example:
  ```tsx
  // Static headers
  headers={{ "Authorization": "Bearer X" }}
 
  // Dynamic headers (re-evaluated on each render)
  headers={() => ({ "Authorization": `Bearer ${getToken()}` })}
  ```
</PropertyReference>

<PropertyReference name="children" type="ReactNode" required > 
The children to be rendered within the CopilotKit.
</PropertyReference>

<PropertyReference name="properties" type="Record<string, any>"  > 
Custom properties to be sent with the request.
  Can include threadMetadata for thread creation and authorization for LangGraph Platform authentication.
  For example:
  ```js
  {
    'user_id': 'users_id',
    'authorization': 'your-auth-token', // For LangGraph Platform authentication
    threadMetadata: {
      'account_id': '123',
      'user_type': 'premium'
    }
  }
  ```
 
  Note: The `authorization` property is automatically forwarded to LangGraph agents. See the [LangGraph Agent Authentication Guide](/coagents/shared/guides/langgraph-platform-authentication) for details.
</PropertyReference>

<PropertyReference name="credentials" type="RequestCredentials"  > 
Indicates whether the user agent should send or receive cookies from the other domain
  in the case of cross-origin requests.
 
  To enable HTTP-only cookie authentication, set `credentials="include"` and configure
  CORS on your runtime endpoint:
 
  ```tsx
  // Frontend (https://myapp.com)
  <CopilotKit runtimeUrl="https://api.myapp.com/copilotkit" credentials="include">
    {children}
  </CopilotKit>
 
  // Backend (https://api.myapp.com)
  copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    endpoint: "/copilotkit",
    cors: {
      origin: "https://myapp.com",
      credentials: true,
    },
  });
  ```
</PropertyReference>

<PropertyReference name="agent" type="string"  > 
The name of the agent to use.
</PropertyReference>

<PropertyReference name="forwardedParameters" type="Pick<ForwardedParametersInput, 'temperature'>"  > 
The forwarded parameters to use for the task.
</PropertyReference>

<PropertyReference name="authConfig_c" type="{ SignInComponent: React.ComponentType<{ onSignInComplete: (authState: AuthState) => void; }>; }"  > 
The auth config to use for the CopilotKit.
  @remarks
 
  This feature is only available when using CopilotKit's hosted cloud service. To use this feature, sign up at https://dashboard.operations.copilotkit.ai to get your publicApiKey. The feature allows restricting chat conversations to specific topics.
</PropertyReference>

<PropertyReference name="threadId" type="string"  > 
The thread id to use for the CopilotKit.
</PropertyReference>

<PropertyReference name="onError" type="CopilotErrorHandler"  > 
Optional error handler for comprehensive debugging and observability.
 
  Requires publicApiKey: Error handling only works when publicApiKey is provided.
  This is a premium Copilot Cloud feature.
 
  @param errorEvent - Structured error event with rich debugging context
 
  @example
  ```typescript
  <CopilotKit
    publicApiKey="ck_pub_your_key"
    onError={(errorEvent) => {
      debugDashboard.capture(errorEvent);
    }}
  >
  ```
</PropertyReference>

<PropertyReference name="enableInspector" type="boolean"  > 
Enable or disable the CopilotKit Inspector, letting you inspect AG-UI events,
  view agent messages, check agent state, and visualize agent context. Defaults
  to enabled.
</PropertyReference>

<PropertyReference name="debug" type="DebugConfig"  > 
Enable debug logging. On the server (`CopilotRuntime`), this enables
  structured Pino logging of the AG-UI event pipeline. On the client,
  this configuration is forwarded to the AG-UI transport layer
  (`transformChunks`) for transport-level debug output.
 
  Pass `true` for full output, or an object for granular control:
 
  ```tsx
  <CopilotKit debug={true} runtimeUrl="...">
    {children}
  </CopilotKit>
  ```
</PropertyReference>