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-ui: The UI library for CopilotKit, which contains the CopilotKit UI components such as the sidebar, chat popup, textare and more.

Install Dependencies

To install the CopilotKit dependencies, run the following:

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

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

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

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

Setup CopilotKit

CopilotKit Chat Popup

We provide several plug-and-play components for you to interact with your copilot. Some of these are <CopilotPopup/>, <CopilotSidebar/>, and <CopilotChat/>. You can of course use CopilotKit in headless mode and provide your own fully custom UI via useCopilotChat.

In this tutorial, we’ll use the <CopilotPopup/> component to display the chat popup.

"use client";
 
import { TasksList } from "@/components/TasksList";
import { TasksProvider } from "@/lib/hooks/use-tasks";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotPopup } from "@copilotkit/react-ui";
 
export default function Home() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <TasksProvider>
        <TasksList />
      </TasksProvider>
      <CopilotPopup />
    </CopilotKit>
  );
}

Here’s what we did:

• We imported the <CopilotPopup /> component from @copilotkit/react-ui.
• We wrapped the page with the <CopilotKit> provider.
• We imported the built-in styles from @copilotkit/react-ui. This is optional.

Now, head back to your app and you’ll find a chat popup in the bottom right corner of the page. At this point, you can start interacting with your copilot! 🎉

In the next step, we’ll make our assistant smarter by providing it with readable state about our todo list.