CopilotKit - Copilotkit

{ /*

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.

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://cloud.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://cloud.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://cloud.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 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

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