---
title: "<CopilotKit />"
description: "Provides the Copilot context to its children."
---

{/* GENERATE-DOCS path=packages/react-core/src/components/copilot-provider/copilotkit.tsx component=CopilotKit */}

<img
  referrerPolicy="no-referrer-when-downgrade"
  src="https://static.scarf.sh/a.png?x-pxid=a9b290bb-38f9-4518-ac3b-8f54fdbf43be"
/>

This component provides the Copilot context to its children.
It can be configured either with a chat API endpoint or a `CopilotApiConfig`.

<Note>
  The backend can use OpenAI, or you can bring your own LLM. For examples of the
  backend api implementation, see `examples/next-openai` or the [runtime
  docs](https://docs.copilotkit.ai/getting-started/quickstart-runtime).
</Note>

<RequestExample>
  ```jsx CopilotKit Example
  import { CopilotKit } from "@copilotkit/react-core";

  <CopilotKit 
    runtimeUrl="https://your.copilotkit.api">
    <YourApp/>
  </CopilotKit>
  ```
</RequestExample>

## Example usage

```jsx
<CopilotKit publicApiKey="the api key or self host (see below)">
  <App />
</CopilotKit>
```

## Props

<ResponseField name="publicApiKey" type="string" >
Your Copilot Cloud API key.
</ResponseField>

<ResponseField name="cloudRestrictToTopic" type="{ validTopics?: string[]; invalidTopics?: string[]; }" >
Cloud feature: Restrict input to a specific topic.
</ResponseField>

<ResponseField name="runtimeUrl" type="string" >
the endpoint for the Copilot Runtime instance.
</ResponseField>

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

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

<ResponseField name="headers" type="Record<string, string>" >
Additional headers to be sent with the request.
 
  For example:
  ```js
  {
    'Authorization': 'Bearer your_token_here'
  }
  ```
</ResponseField>

<ResponseField name="body" type="Record<string, any>" >
Additional body params to be sent with the request
  For example:
  ```js
  {
    'message': 'Hello, world!'
  }
  ```
</ResponseField>

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

<ResponseField name="backendOnlyProps" type="Record<string, any>" >
Backend only props that will be combined to body params to be sent with the request
  For example:
  ```js
  {
    'user_id': 'users_id',
  }
  ```
</ResponseField>