step-2-setup-copilotkit.mdx

import { Callout } from "nextra/components"; import { TailoredExperience, LinkToCopilotCloud } from "@/components"; import SelfHostingCopilotRuntimeCreateEndpoint from "@/snippets/self-hosting-copilot-runtime-create-endpoint.mdx"; import SelfHostingCopilotRuntimeConfigureCopilotKitProvider from "@/snippets/self-hosting-copilot-runtime-configure-copilotkit-provider.mdx";

Step 2: Setup CopilotKit

Now that we have our todo list app running, we're ready to integrate CopilotKit. For this tutorial, we will install the following dependencies:

• @copilotkit/react-core: The core library for CopilotKit, which contains the CopilotKit provider and useful hooks.
• @copilotkit/react-textarea: The textarea component for CopilotKit, which enables you to get instant context-aware autocompletions in your app.

Install Dependencies

To install the CopilotKit dependencies, run the following:

npm install @copilotkit/react-core @copilotkit/react-textarea

Setup CopilotKit

<TailoredExperience.Toggle />

<TailoredExperience.CloudContent>

Configure the <CopilotKit /> Provider

The <CopilotKit> provider will wrap our app. Let's add it to the page.tsx file.

Click here to get your Copilot Cloud API key for free. Then, replace `` with your actual API key.

"use client";

import { EmailThread } from "@/components/EmailThread";
import { EmailsProvider } from "@/lib/hooks/use-emails";
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-textarea/styles.css";

export default function Home() {
  return (
    <CopilotKit publicApiKey={"<your-public-api-key>"}>
      <EmailsProvider>
        <EmailThread />
      </EmailsProvider>
    </CopilotKit>
  );
}

</TailoredExperience.CloudContent>

<TailoredExperience.SelfHostContent>

Step 1: Set up Copilot Runtime Endpoint

Step 2: Configure the CopilotKit Provider

"use client";

import { EmailThread } from "@/components/EmailThread";
import { EmailsProvider } from "@/lib/hooks/use-emails";
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-textarea/styles.css";

export default function Home() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <EmailsProvider>
        <EmailThread />
      </EmailsProvider>
    </CopilotKit>
  );
}

</TailoredExperience.SelfHostContent>

Let's break this down:

• First, we imported the CopilotKit provider from @copilotkit/react-core.
• Then, we wrapped the page with the <CopilotKit> provider.
• We imported the built-in styles from @copilotkit/react-textarea. This is optional.

In the next step, we'll implement the AI-powered textarea as a replacement for our existing input component.