import { PropertyReference, LinkToCopilotCloud } from "@/components";

import { Tabs } from "nextra/components";

import { Callout } from "nextra/components";

# `<CopilotKit />`

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
 
<Tabs items={["Copilot Cloud (Recommended)", "Self-hosted Runtime"]}>
  <Tabs.Tab>
 
    You can get your Copilot Cloud API key for free by <LinkToCopilotCloud>signing up here</LinkToCopilotCloud>.
 
    ```tsx
    import { CopilotKit } from "@copilotkit/react-core";
 
    <CopilotKit publicApiKey="<your-public-api-key>">
      // ... your app ...
    </CopilotKit>
    ```
  </Tabs.Tab>
 
  <Tabs.Tab>
    You can find more information about self-hosting CopilotKit [here](/concepts/copilot-runtime).
 
    ```tsx
    import { CopilotKit } from "@copilotkit/react-core";
 
    <CopilotKit runtimeUrl="<your-runtime-url>">
      // ... your app ...
    </CopilotKit>
    ```
  </Tabs.Tab>
</Tabs>

## Properties

<PropertyReference name="publicApiKey" type="string"  > 
Your Copilot Cloud API key. Don't have it yet? <LinkToCopilotCloud>Click here to sign up for free</LinkToCopilotCloud>.
</PropertyReference>

<PropertyReference name="cloudRestrictToTopic" type="{ validTopics?: string[]; invalidTopics?: string[]; }"  > 
Restrict input to a specific topic.
</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>"  > 
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
  For example:
  ```js
  {
    'user_id': 'users_id',
  }
  ```
</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.
</PropertyReference>

<PropertyReference name="showDevConsole" type="boolean | 'auto'"  > 
Whether to show the dev console.
 
  If set to "auto", the dev console will be show on localhost only.
</PropertyReference>

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