Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
Version History
**CopilotKit React Patterns 2.0.0 – Major update for v2 API support** - Expanded guidance to cover both v1 (`@copilotkit/react-core`) and v2 (`@copilotkit/react-core/v2`) APIs. - Updated provider setup and rules for the new `CopilotKit` provider and `CoAgent` routing. - Revised agent/state rules to reflect new hooks (`useCopilotAction`, `useCopilotReadable`) and best practices. - Adjusted tool integration advice for v2 API patterns (including Zod schemas and new render prop usage). - Added version-specific suggestions handling and clarified API differences in recommendations.
What This Skill Does
A rule set for building React applications with CopilotKit. Covers provider setup, agent hooks, tool rendering, shared state, and chat UI components across both v1 and v2 APIs. Contains 25 prioritized rules organized by category.
Consolidates CopilotKit v1 and v2 API differences into a single prioritized reference, preventing common integration mistakes without reading full library docs.
When to use it
- Setting up CopilotKit provider with correct runtime URL and agent routing
- Implementing useRenderTool with Zod schemas for typed tool call display
- Sharing app state with agents via useCopilotReadable without serialization
- Choosing between CopilotSidebar and CopilotPopup for chat layout
- Refactoring tool handlers to avoid stale closures and unnecessary re-renders
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: add a CopilotKit sidebar to my React app and share the current document state with the agent
- 1Wraps app with CopilotKit provider, setting runtimeUrl and agent prop per provider-runtime-url and provider-single-endpoint rules
- 2Adds useCopilotReadable call with a structured object representing document state, following state-structured-values rule
- 3Selects CopilotSidebar over CopilotPopup based on ui-chat-layout rule for persistent chat
- 4Customizes labels prop on CopilotSidebar per ui-custom-labels rule
- 5Adds welcome screen with suggested prompts per ui-welcome-screen rule
A React app with a persistent sidebar chat that exposes scoped document state to the agent using correct provider and state patterns