CopilotKit.mdx

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.

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

<CopilotKit runtimeUrl="<your-runtime-url>">
  // ... your app ...
</CopilotKit>
```

</Tabs.Tab>

Properties

Your Copilot Cloud API key. Don't have it yet? Click here to sign up for free. Restrict input to a specific topic. The endpoint for the Copilot Runtime instance. [Click here for more information](/concepts/copilot-runtime). The endpoint for the Copilot transcribe audio service. The endpoint for the Copilot text to speech service. Additional headers to be sent with the request.

For example:

{
  "Authorization": "Bearer X"
}

The children to be rendered within the CopilotKit. Custom properties to be sent with the request For example: ```js { 'user_id': 'users_id', } ``` Indicates whether the user agent should send or receive cookies from the other domain in the case of cross-origin requests. Whether to show the dev console.

If set to "auto", the dev console will be show on localhost only.

The name of the agent to use.