A2UI Launched: Full CopilotKit support at launch!

A2UI Launched: CopilotKit has partnered with Google to deliver full support in both CopilotKit and AG-UI!

Check it out
LogoLogo
  • Overview
  • Integrations
  • API Reference
  • Copilot Cloud
Slanted end borderSlanted end border
Slanted start borderSlanted start border
  • API Reference
  • UI Components
  • CopilotTextarea
  • CopilotKit
  • Hooks
  • useAgent
  • useDefaultTool
  • useFrontendTool
  • useRenderToolCall
  • useHumanInTheLoop
  • useCopilotReadable
  • useCopilotAdditionalInstructions
  • useCopilotChat
  • useCopilotChatHeadless_c
  • useCopilotChatSuggestions
  • useCoAgent
  • useCoAgentStateRender
  • useLangGraphInterrupt
  • useCopilotAction
  • Classes
  • CopilotRuntime
  • CopilotTask
  • SDKs

CopilotKit

The CopilotKit provider component, wrapping your application.

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.

import { CopilotKit } from "@copilotkit/react-core";
 
<CopilotKit runtimeUrl="<your-runtime-url>">
  // ... your app ...
</CopilotKit>

Properties

publicApiKeystring

Your Copilot Cloud API key.

Don't have it yet? Go to https://cloud.copilotkit.ai and get one for free.

publicLicenseKeystring

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.

guardrails_c{ 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.

runtimeUrlstring

The endpoint for the Copilot Runtime instance. Click here for more information.

transcribeAudioUrlstring

The endpoint for the Copilot transcribe audio service.

textToSpeechUrlstring

The endpoint for the Copilot text to speech service.

headersRecord<string, string>

Additional headers to be sent with the request.

For example:

{
  "Authorization": "Bearer X"
}
childrenReactNoderequired

The children to be rendered within the CopilotKit.

propertiesRecord<string, any>

Custom properties to be sent with the request. Can include threadMetadata for thread creation and authorization for LangGraph Platform authentication. For example:

{
  '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.

credentialsRequestCredentials

Indicates whether the user agent should send or receive cookies from the other domain in the case of cross-origin requests.

showDevConsoleboolean

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.

agentstring

The name of the agent to use.

forwardedParametersPick<ForwardedParametersInput, 'temperature'>

The forwarded parameters to use for the task.

authConfig_c{ 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://cloud.copilotkit.ai to get your publicApiKey. The feature allows restricting chat conversations to specific topics.

threadIdstring

The thread id to use for the CopilotKit.

onErrorCopilotErrorHandler

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

<CopilotKit
  publicApiKey="ck_pub_your_key"
  onError={(errorEvent) => {
    debugDashboard.capture(errorEvent);
  }}
>
enableInspectorboolean

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.

PREV
CopilotTextarea
Slanted end borderSlanted end border
Slanted start borderSlanted start border
NEXT
useAgent

On this page

Example
Properties