메뉴
Use when migrating a CopilotKit v1 application to v2 -- updating package imports, replacing deprecated hooks and components, switching from GraphQL runtime to AG-UI protocol runtime, and resolving breaking API changes.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | copilotkit-upgrade |
| description | Use when migrating a CopilotKit v1 application to v2 -- updating package imports, replacing deprecated hooks and components, switching from GraphQL runtime to AG-UI protocol runtime, and resolving breaking API changes. |
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.
.mcp.json -- no setup needed.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.
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
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 |
Refer to references/v1-to-v2-migration.md for detailed before/after code examples.
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)
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):
import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/runtime";
const runtime = new CopilotRuntime({ actions: [...] });
// used with copilotKitEndpoint() for Next.js, Express, etc.
v2 pattern (agents + Hono endpoint):
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" });
v1:
import { CopilotKit } from "@copilotkit/react-core";
<CopilotKit runtimeUrl="/api/copilotkit">
{children}
</CopilotKit>
v2:
import { CopilotKitProvider } from "@copilotkit/react";
<CopilotKitProvider runtimeUrl="/api/copilotkit">
{children}
</CopilotKitProvider>
| 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) |
DEPRECATED: This skill has been replaced by `mcp-app-builder`. Check if `mcp-app-builder` is available in the skills folder. If not, install it: `npx skills install mcp-use/mcp-use --skill mcp-app-builder` Use `mcp-app-builder` instead of this skill. Build ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK. Use when creating ChatGPT apps, building MCP servers with widgets, defining React widgets, working with Apps SDK, or when user mentions ChatGPT widgets, mcp-use widgets, or Apps SDK development.
Use when building custom agent backends, implementing the AG-UI protocol, debugging streaming issues, or understanding how agents communicate with frontends. Covers event types, SSE transport, AbstractAgent/HttpAgent patterns, state synchronization, tool calls, and human-in-the-loop flows.
Use when contributing to the CopilotKit open-source project — forking, cloning, setting up the monorepo, creating branches, running tests, and submitting pull requests against CopilotKit/CopilotKit.
Use when diagnosing CopilotKit issues -- runtime connectivity failures, agent not responding, streaming errors, tool execution problems, transcription failures, version mismatches, and AG-UI event tracing.
Use when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime.
Use when wiring an external agent framework (LangGraph, CrewAI, PydanticAI, Mastra, ADK, LlamaIndex, Agno, Strands, Microsoft Agent Framework, or others) into a CopilotKit application via the AG-UI protocol.