Step 2: Setup CopilotKit - 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

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

Setup CopilotKit

<TailoredContent id="hosting"> <TailoredContentOption id="copilot-cloud" title="Copilot Cloud (Recommended)" description="Use our hosted backend endpoint to get started quickly." icon={<FaCloud />} > In order to use CopilotKit, we'll need to configure the CopilotKit provider. <CopilotCloudConfigureCopilotKitProvider /> </TailoredContentOption> <TailoredContentOption id="self-hosted" title="Self-hosting" description="Learn to host CopilotKit's runtime yourself with your own backend." icon={<FaServer />} > <Steps> <Step> ### Set up Copilot Runtime Endpoint <SelfHostingCopilotRuntimeCreateEndpoint /> </Step> <Step> ### Configure the CopilotKit Provider

tsx

"use client";

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

</Step> </Steps> </TailoredContentOption> </TailoredContent>

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.