---
title: "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
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.

<CopilotCloudConfigureCopilotKit />
</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 title="app/page.tsx" showLineNumbers {5,10,14}
"use client";

export default function Home() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      {" "}
      // [!code highlight]
      <EmailsProvider>
        <EmailThread />
      </EmailsProvider>
      {/* [!code highlight:1] */}
    </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`.

<Cards>
<Card
  title="← Previous: Check out the repo"
  href="/tutorials/ai-powered-textarea/step-1-checkout-repo"
  description="Clone the starter and install dependencies."
/>
<Card
  title="Next: Add CopilotTextarea →"
  href="/tutorials/ai-powered-textarea/step-3-copilot-textarea"
  description="Swap the plain textarea for CopilotKit's AI-aware version."
/>
</Cards>
