Quickstart

Install dependencies

First, install the CopilotKit dependencies.

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

Set up Copilot Runtime (Backend Endpoint)

Add your OpenAI API key to your .env file in the root of your project:

.env

OPENAI_API_KEY=your_api_key_here

Please note that the code below uses GPT-4o, which requires a paid OpenAI API key. If you are using a free OpenAI API key, change the model to a different option such as gpt-3.5-turbo.

Endpoint Setup

Create a new route to handle the /api/copilotkit endpoint.

app/api/copilotkit/route.ts

import {
  CopilotRuntime,
  OpenAIAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from '@copilotkit/runtime';
import OpenAI from 'openai';
import { NextRequest } from 'next/server';
 
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const llmAdapter = new OpenAIAdapter({ openai });
 
const runtime = new CopilotRuntime();
 
export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    llmAdapter,
    endpoint: '/api/copilotkit',
  });
 
  return handleRequest(req);
};

Your Copilot Runtime endpoint should be available at http://localhost:3000/api/copilotkit.

Configure the CopilotKit Provider

The <CopilotKit> provider must wrap the Copilot-aware parts of your application. For most use-cases, it's appropriate to wrap the CopilotKit provider around the entire app, e.g. in your layout.tsx

Point it at the Copilot Runtime URL you configured in the previous step.

layout.tsx

import { CopilotKit } from "@copilotkit/react-core"; 
 
export default function RootLayout({children}) {
  return (
    {/* Make sure to use the URL you configured in the previous step */}
    <CopilotKit runtimeUrl="/api/copilotkit">
      {children}
    </CopilotKit> 
  );
}

Connect Copilot UI

You are almost there! Now it's time to setup your Copilot UI.

First, import the default styles in your root component (typically layout.tsx) :

import "@copilotkit/react-ui/styles.css";

Copilot UI ships with a number of built-in UI patterns, choose whichever one you like.

CopilotPopup is a convenience wrapper for CopilotChat that lives at the same level as your main content in the view hierarchy. It provides a floating chat interface that can be toggled on and off.

import { CopilotPopup } from "@copilotkit/react-ui";
 
export function YourApp() {
  return (
    <>
      <YourMainContent />
      <CopilotPopup
        instructions={"You are assisting the user as best as you can. Ansewr in the best way possible given the data you have."}
        labels={{
          title: "Popup Assistant",
          initial: "Need any help?",
        }}
      />
    </>
  );
}

🎉 Congrats! You've successfully integrated a fully functional chatbot in your application! Give it a try now and see it in action.

Quickstart

Install dependencies

Set up Copilot Runtime (Backend Endpoint)

Endpoint Setup

Configure the CopilotKit Provider

Connect Copilot UI

Next Steps

Connecting Your Data

Generative UI

Frontend Actions

CoAgents (LangGraph)

On this page