Migrate to V2
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 |
|---|---|
@copilotkit/react-core | @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
CopilotRuntimeconfiguration — stays the same - Agent definitions and backend setup — stays the same
Migration Steps
Update @copilotkit/react-core imports
Replace imports from @copilotkit/react-core with @copilotkit/react-core/v2.
Before
After
Replace @copilotkit/react-ui imports
UI components like CopilotChat, CopilotSidebar, and CopilotPopup are now exported from @copilotkit/react-core/v2.
Before
After
Update your styles import
Before
After
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
export function App() {
return (
<CopilotKit runtimeUrl="/api/copilotkit">
<YourApp />
<CopilotPopup />
</CopilotKit>
);
}
After
export function App() {
return (
<CopilotKitProvider runtimeUrl="/api/copilotkit">
<YourApp />
<CopilotPopup />
</CopilotKitProvider>
);
}