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

<Callout type="info">
  This provider is shared across v1 and v2 APIs. In v2 docs, import it from
  `@copilotkit/react-core/v2`.
</Callout>

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](/direct-to-llm/guides/self-hosting).

```tsx
import { CopilotKit } from "@copilotkit/react-core/v2";

<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. See the Copilot Runtime API
  documentation.
</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>"  >
Additional headers to be sent with the request.

For example:

```json
{
  "Authorization": "Bearer X"
}
```

</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 (see code examples above) 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="showDevConsole" type="boolean"  >
Whether to show the dev console.

Set to `true` to show error banners and toasts, `false` to hide all error UI.
Defaults to `false` for production safety.

</PropertyReference>

<PropertyReference name="a2ui" type="{ theme?: Theme }">
Configuration for the A2UI (Agent-to-UI) renderer.

The built-in A2UI renderer is activated automatically when the runtime reports
that `a2ui` is configured in `CopilotRuntime`. This prop is optional and only
needed if you want to override the default theme.

```tsx
<CopilotKit runtimeUrl="/api/copilotkit" a2ui={{ theme: myCustomTheme }}>
  {children}
</CopilotKit>
```

</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>
