Skip to content

v2.mdx

Latest commit

 

History

History
127 lines (98 loc) · 3.1 KB

v2.mdx

File metadata and controls

127 lines (98 loc) · 3.1 KB
Raw
title Migrate to V2
description Migration guide for upgrading to CopilotKit V2 frontend packages
icon lucide/RefreshCw

Overview

CopilotKit V2 consolidates the frontend into a single package. Both hooks and UI components are now exported from @copilotkit/react-core/v2. Your backend does not need any changes.

What's changing:

Before After
v1 hooks from @copilotkit/react-core v2 hooks from @copilotkit/react-core/v2
@copilotkit/react-ui @copilotkit/react-core/v2
@copilotkit/react-ui/styles.css @copilotkit/react-core/v2/styles.css

What's NOT changing:

  • Backend packages (@copilotkit/runtime, etc.) — no changes needed
  • Your CopilotRuntime configuration — stays the same
  • Agent definitions and backend setup — stays the same
  • The <CopilotKit> provider name — keep using it, but import it from @copilotkit/react-core/v2

Migration Steps

### Update v1 hook imports

Replace v1 hooks from @copilotkit/react-core with their v2 equivalents from @copilotkit/react-core/v2. Keep the <CopilotKit> provider name, but import it from @copilotkit/react-core/v2.

Before

import { CopilotKit } from "@copilotkit/react-core";
import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";

After

import { CopilotKit, useAgent } from "@copilotkit/react-core/v2";
### Replace `@copilotkit/react-ui` imports

UI components like CopilotChat, CopilotSidebar, and CopilotPopup are now exported from @copilotkit/react-core/v2.

Before

import { CopilotPopup } from "@copilotkit/react-ui";
import { CopilotSidebar } from "@copilotkit/react-ui";
import { CopilotChat } from "@copilotkit/react-ui";

After

import { CopilotPopup } from "@copilotkit/react-core/v2";
import { CopilotSidebar } from "@copilotkit/react-core/v2";
import { CopilotChat } from "@copilotkit/react-core/v2";
### Update your styles import

Before

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

After

import "@copilotkit/react-core/v2/styles.css";
### Upgrade `@ag-ui/client` (if using directly)

If you import from @ag-ui/client directly, upgrade to the latest version:

npm install @ag-ui/client@latest

Note: If you only use CopilotKit's React packages, @ag-ui/client types are already re-exported from @copilotkit/react-core/v2 and you don't need a separate install.

Full Example

Before

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotPopup } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";

export function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <YourApp />
      <CopilotPopup />
    </CopilotKit>
  );
}

After

import { CopilotKit, CopilotPopup } from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";

export function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <YourApp />
      <CopilotPopup />
    </CopilotKit>
  );
}