copilotkit-upgrade

What this skill does

# CopilotKit v1 to v2 Migration Skill

## Live Documentation (MCP)

This plugin includes an MCP server (`copilotkit-docs`) that provides `search-docs` and `search-code` tools for querying live CopilotKit documentation and source code. Useful for looking up current v2 API signatures during migration.

- **Claude Code:** Auto-configured by the plugin's `.mcp.json` -- no setup needed.
- **Codex:** Requires manual configuration. See the [copilotkit-debug skill](../copilotkit-debug/SKILL.md#mcp-setup) for setup instructions.

## Overview

CopilotKit v2 is a ground-up rewrite built on the AG-UI protocol (`@ag-ui/client` / `@ag-ui/core`). Users continue to install and import `@copilotkit/*` packages -- the v2 changes are exposed through the same package names with updated APIs (new hook names, component names, runtime configuration). The `@copilotkit/*` namespace is an internal implementation detail that users never interact with.

## Migration Workflow

### 1. Audit Current Usage

Scan the codebase for all v1 imports and API usage:

```
@copilotkit/react-core    -> hooks, CopilotKit provider, types
@copilotkit/react-ui      -> CopilotChat, CopilotPopup, CopilotSidebar
@copilotkit/react-textarea -> CopilotTextarea (removed in v2)
@copilotkit/runtime       -> CopilotRuntime, service adapters, framework integrations
@copilotkit/runtime-client-gql -> GraphQL client, message types
@copilotkit/shared         -> utility types, constants
@copilotkit/sdk-js         -> LangGraph/LangChain SDK
```

### 2. Identify Deprecated APIs

Key hooks and components to find and replace:

| v1 API | v2 Replacement |
|--------|---------------|
| `useCopilotAction` | `useFrontendTool` |
| `useCopilotReadable` | `useAgentContext` |
| `useCopilotChat` | `useAgent` + `useSuggestions` |
| `useCoAgent` | `useAgent` |
| `useCoAgentStateRender` | `useRenderToolCall` / `useRenderActivityMessage` |
| `useLangGraphInterrupt` | `useInterrupt` |
| `useCopilotChatSuggestions` | `useConfigureSuggestions` + `useSuggestions` |
| `useCopilotAdditionalInstructions` | `useAgentContext` |
| `useMakeCopilotDocumentReadable` | `useAgentContext` |
| `CopilotKit` (provider) | `CopilotKitProvider` |
| `CopilotTextarea` | Removed -- use standard textarea + `useFrontendTool` |

### 3. Map to v2 Equivalents

Refer to `references/v1-to-v2-migration.md` for detailed before/after code examples.

### 4. Update Package Dependencies

The `@copilotkit/*` package names stay the same. Update to the latest v2 versions:

```
@copilotkit/react-core        -> @copilotkit/react (consolidated into one package)
@copilotkit/react-ui           -> @copilotkit/react (consolidated into one package)
@copilotkit/react-textarea     -> removed (no v2 equivalent)
@copilotkit/runtime            -> @copilotkit/runtime (same package, new agent-based API)
@copilotkit/runtime-client-gql -> removed (replaced by AG-UI protocol, re-exported from @copilotkit/react)
@copilotkit/shared             -> @copilotkit/shared (same package)
@copilotkit/sdk-js             -> @copilotkit/agent (new package for agent definitions)
```

### 5. Update Runtime Configuration

The v1 `CopilotRuntime` accepted service adapters (OpenAI, Anthropic, LangChain, etc.) and endpoint definitions. The v2 `CopilotRuntime` accepts AG-UI `AbstractAgent` instances directly.

**v1 pattern** (service adapter + endpoints):
```ts
import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/runtime";
const runtime = new CopilotRuntime({ actions: [...] });
// used with copilotKitEndpoint() for Next.js, Express, etc.
```

**v2 pattern** (agents + Hono endpoint):
```ts
import { CopilotRuntime, createCopilotEndpoint } from "@copilotkit/runtime";
import { BuiltInAgent } from "@copilotkit/agent";
const runtime = new CopilotRuntime({
  agents: { myAgent: new BuiltInAgent({ model: "openai:gpt-4o" }) },
});
const app = createCopilotEndpoint({ runtime, basePath: "/api/copilotkit" });
```

### 6. Update Provider

**v1:**
```tsx
import { CopilotKit } from "@copilotkit/react-core";
<CopilotKit runtimeUrl="/api/copilotkit">
  {children}
</CopilotKit>
```

**v2:**
```tsx
import { CopilotKitProvider } from "@copilotkit/react";
<CopilotKitProvider runtimeUrl="/api/copilotkit">
  {children}
</CopilotKitProvider>
```

### 7. Verify

- Run the application and check for runtime errors
- Verify all agent interactions work (chat, tool calls, interrupts)
- Check that tool renderers display correctly
- Confirm suggestions load and display

## Quick Reference

| Concept | v1 | v2 |
|---------|----|----|
| Package scope | `@copilotkit/*` | `@copilotkit/*` (same scope, updated APIs) |
| Protocol | GraphQL | AG-UI (SSE) |
| Provider component | `CopilotKit` | `CopilotKitProvider` |
| Define frontend tool | `useCopilotAction` | `useFrontendTool` |
| Share app state | `useCopilotReadable` | `useAgentContext` |
| Agent interaction | `useCoAgent` | `useAgent` |
| Handle interrupts | `useLangGraphInterrupt` | `useInterrupt` |
| Render tool calls | `useCopilotAction({ render })` | `useRenderToolCall` |
| Chat suggestions | `useCopilotChatSuggestions` | `useConfigureSuggestions` |
| Runtime class | `CopilotRuntime` (adapters) | `CopilotRuntime` (agents) |
| Endpoint setup | `copilotKitEndpoint()` | `createCopilotEndpoint()` |
| Agent definition | `LangGraphAgent` endpoint | `AbstractAgent` / `BuiltInAgent` |
| Chat components | `CopilotChat`, `CopilotPopup`, `CopilotSidebar` | `CopilotChat`, `CopilotPopup`, `CopilotSidebar` (from `@copilotkit/react`) |