Step 3: Setup CopilotKit

import SelfHostingCopilotRuntimeCreateEndpoint from "@/snippets/self-hosting-copilot-runtime-create-endpoint.mdx"; import { TailoredContent, TailoredContentOption } from "@/components/react/tailored-content.tsx"; import { GoServer } from "react-icons/go"; import { FaCloud } from "react-icons/fa";

Now that we have the application and agent running, we're ready to connect both via 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, textarea and more.

Install Dependencies

Navigate back to the ui directory and install the CopilotKit dependencies:

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

Setup CopilotKit

There are two ways of setting up CopilotKit, either by using Copilot Cloud or by self-hosting. Self-hosting will give you more control over CopilotKit's runtime (our interface to the LLM) but will also require you to manage the extra complexity of running a server. Copilot Cloud on the other hand is a fully managed service that you can get started with in just a few clicks.

For this tutorial, you can select either option.

First, you'll need to create an account for Copilot Cloud here. You can use whatever authentication method you'd like.

Once logged in, you'll see some steps guiding you to getting our Copilot Cloud public API key. For this, you'll need an OpenAI API key since it's the only provider currently supported (more providers coming soon!).

Set your OpenAI API key, click the green checkmark and you'll see your API key created right below the input.

First, create a .env file in the ui directory.

touch ui/.env

Then, add your Copilot Cloud API key to the file like so:

NEXT_PUBLIC_CPK_PUBLIC_API_KEY=...

Now we're ready to configure the CopilotKit provider in our application.

"use client";

import { CopilotKit } from "@copilotkit/react-core"; // [!code ++]

export default function Home() {
  // [!code ++:5]
  return (
    <CopilotKit
      publicApiKey={process.env.NEXT_PUBLIC_CPK_PUBLIC_API_KEY}
    >
      <TooltipProvider>
        <TripsProvider>
          <main className="h-screen w-screen">
            <MapCanvas />
          </main>
        </TripsProvider>
      </TooltipProvider>
    </CopilotKit> // [!code ++]
  );
}

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 <CopilotSidebar/> component to display the chat sidebar.

"use client";

import { TasksList } from "@/components/TasksList";
import { TasksProvider } from "@/lib/hooks/use-tasks";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-core/v2"; // [!code ++]
import "@copilotkit/react-ui/v2/styles.css"; // [!code ++]

export default function Home() {
  return (
    <CopilotKit
      publicApiKey={process.env.NEXT_PUBLIC_CPK_PUBLIC_API_KEY}
    >
      /* [!code ++:9] */
      <CopilotSidebar
        defaultOpen={true}
        clickOutsideToClose={false}
        labels={{
          modalHeaderTitle: "Travel Planner",
          welcomeMessageText: "Hi! 👋 I'm here to plan your trips. I can help you manage your trips, add places to them, or just generally work with you to plan a new one.",
        }}
      />
      <TooltipProvider>
        <TripsProvider>
          <main className="h-screen w-screen">
            <MapCanvas />
          </main>
        </TripsProvider>
      </TooltipProvider>
    </CopilotKit>
  );
}

And we're done! Here's what we did:

• We setup our Copilot cloud account and got an API key.
• We configured the CopilotKit provider in our application to use our API key.
• We added the CopilotSidebar to our application. </Step>

Configure the CopilotKit Provider

"use client";

import { TasksList } from "@/components/TasksList";
import { TasksProvider } from "@/lib/hooks/use-tasks";
import { CopilotKit } from "@copilotkit/react-core"; // [!code ++]

export default function Home() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit"> // [!code ++]
      <TasksProvider>
        <TasksList />
      </TasksProvider>
    </CopilotKit> // [!code ++]
  );
}

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 <CopilotSidebar/> component to display the chat sidebar.

"use client";

import { TasksList } from "@/components/TasksList";
import { TasksProvider } from "@/lib/hooks/use-tasks";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-core/v2"; // [!code ++]
import "@copilotkit/react-ui/v2/styles.css"; // [!code ++]

export default function Home() {
  return (
    <CopilotKit
      publicApiKey={process.env.NEXT_PUBLIC_CPK_PUBLIC_API_KEY}
    >
      /* [!code ++:9] */
      <CopilotSidebar
        defaultOpen={true}
        clickOutsideToClose={false}
        labels={{
          modalHeaderTitle: "Travel Planner",
          welcomeMessageText: "Hi! 👋 I'm here to plan your trips. I can help you manage your trips, add places to them, or just generally work with you to plan a new one.",
        }}
      />
      <TooltipProvider>
        <TripsProvider>
          <main className="h-screen w-screen">
            <MapCanvas />
          </main>
        </TripsProvider>
      </TooltipProvider>
    </CopilotKit>
  );
}

Here's what we did:

• We imported the <CopilotSidebar /> component from @copilotkit/react-ui.
• We wrapped the page with the <CopilotKit> provider.
• We imported the built-in styles from @copilotkit/react-ui. </TailoredContentOption>

Now, head back to the app and you'll find a chat sidebar on the left side of the page. At this point, you can start interacting with your copilot! 🎉

This is very exciting! In the next step we'll be making this copilot agentic through the use of LangGraph.