Copilot Cloud Configure Copilotkit Provider - Copilotkit

import { Callout } from 'fumadocs-ui/components/callout'; import { LinkToCopilotCloud } from '@/components/react/link-to-copilot-cloud';

The <CopilotKit> provider must wrap the Copilot-aware parts of your application. For most use-cases, it's appropriate to wrap the CopilotKit provider around the entire app, e.g. in your layout.tsx

<Callout type="info"> Note that you can add the `<CopilotKit>` provider anywhere in your application. In fact, you can have multiple `<CopilotKit>` providers per app if you want independent copilots. </Callout> <Callout type="info"> <LinkToCopilotCloud asButton={false}>Click here to get your Copilot Cloud API key for free</LinkToCopilotCloud>. Then, replace `<your-public-api-key>` with your actual API key. </Callout>

tsx

import "./globals.css";

import { ReactNode } from "react";
import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]

export default function RootLayout({ children }: { children: ReactNode }) {
    return (
      <html lang="en">
        <body>
          <CopilotKit publicApiKey="<your-copilot-cloud-public-api-key>">
            {children}
          </CopilotKit>
        </body>
      </html>
    );
}