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

pnpm add @copilotkit/react-core @copilotkit/react-textarea

yarn add @copilotkit/react-core @copilotkit/react-textarea

bun add @copilotkit/react-core @copilotkit/react-textarea

Setup CopilotKit

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.