# Send CopilotKit React Best Practices to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - Download the package from Yavira. - Extract it into a folder your agent can access. - Paste one of the prompts below and point your agent at the extracted folder. ## Suggested prompts ### New install ```text I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete. ``` ### Upgrade existing ```text I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "copilotkit-react", "name": "CopilotKit React Best Practices", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/GeneralJerel/copilotkit-react", "canonicalUrl": "https://clawhub.ai/GeneralJerel/copilotkit-react", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/copilotkit-react", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=copilotkit-react", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "metadata.json", "README.md", "SKILL.md", "rules/suggestions-configure.md", "rules/agent-use-agent-updates.md", "rules/agent-agent-id.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "copilotkit-react", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-02T03:15:36.952Z", "expiresAt": "2026-05-09T03:15:36.952Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=copilotkit-react", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=copilotkit-react", "contentDisposition": "attachment; filename=\"copilotkit-react-1.0.1.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "copilotkit-react" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/copilotkit-react" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/copilotkit-react", "downloadUrl": "https://openagent3.xyz/downloads/copilotkit-react", "agentUrl": "https://openagent3.xyz/skills/copilotkit-react/agent", "manifestUrl": "https://openagent3.xyz/skills/copilotkit-react/agent.json", "briefUrl": "https://openagent3.xyz/skills/copilotkit-react/agent.md" } } ``` ## Documentation ### CopilotKit React Patterns Best practices for building agentic React applications with CopilotKit. Contains 25 rules across 6 categories, prioritized by impact to guide code generation and refactoring. Covers both v1 (@copilotkit/react-core) and v2 (@copilotkit/react-core/v2) APIs. ### When to Apply Reference these guidelines when: Setting up CopilotKit provider in a React application Using agent hooks (useAgent, useFrontendTool, useCopilotAction) Rendering tool calls or custom messages from agents Managing shared state between UI and agents via useCopilotReadable or useCoAgent Building chat interfaces with CopilotChat, CopilotSidebar, or CopilotPopup Configuring suggestions for proactive agent assistance ### Rule Categories by Priority PriorityCategoryImpactPrefix1Provider SetupCRITICALprovider-2Agent HooksHIGHagent-3Tool RenderingHIGHtool-4Context & StateMEDIUMstate-5Chat UIMEDIUMui-6SuggestionsLOWsuggestions- ### 1. Provider Setup (CRITICAL) provider-runtime-url - Always configure runtimeUrl to connect to your agent backend provider-single-endpoint - Configure the agent prop for CoAgent routing provider-nested-providers - Scope agent configurations with nested CopilotKit providers provider-tool-registration - Register tools via hooks inside provider, not as props when possible ### 2. Agent Hooks (HIGH) agent-use-agent-updates - Specify update subscriptions to avoid unnecessary re-renders agent-agent-id - Always pass agentId when running multiple agents agent-context-description - Write descriptive context values for useCopilotReadable agent-frontend-tool-deps - Declare dependency arrays for useFrontendTool agent-stable-tool-handlers - Use useCallback for tool handler functions ### 3. Tool Rendering (HIGH) tool-typed-args - Define Zod schemas for useRenderTool parameters (v2) tool-status-handling - Handle all three tool call statuses (inProgress, executing, complete) tool-wildcard-fallback - Register a wildcard renderer as fallback for unknown tools tool-render-vs-frontend - Use useRenderTool for display-only, useFrontendTool for side effects tool-component-hook - Use useFrontendTool render prop for simple component rendering ### 4. Context & State (MEDIUM) state-minimal-context - Provide only relevant context to agents, not entire app state state-structured-values - Use structured objects in useCopilotReadable, not serialized strings state-context-granularity - Split context into multiple useCopilotReadable calls by domain state-avoid-stale-closures - Use functional state updates in tool handlers ### 5. Chat UI (MEDIUM) ui-chat-layout - Choose CopilotSidebar for persistent chat, CopilotPopup for on-demand ui-custom-labels - Always customize labels for your domain instead of defaults ui-welcome-screen - Provide a welcome screen with suggested prompts ui-input-mode - Use appropriate inputMode for your use case ### 6. Suggestions (LOW) suggestions-configure - Use useConfigureSuggestions (v2) or useCopilotChatSuggestions (v1) suggestions-context-driven - Provide rich context so suggestions are relevant suggestions-loading-state - Handle suggestion loading states via useSuggestions (v2) ### How to Use Read individual rule files for detailed explanations and code examples: rules/provider-runtime-url.md rules/agent-use-agent-updates.md rules/tool-typed-args.md Each rule file contains: Brief explanation of why it matters Incorrect code example with explanation Correct code example with explanation Additional context and references ### Full Compiled Document For the complete guide with all rules expanded: AGENTS.md ## Trust - Source: tencent - Verification: Indexed source record - Publisher: GeneralJerel - Version: 1.0.1 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-05-02T03:15:36.952Z - Expires at: 2026-05-09T03:15:36.952Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/copilotkit-react) - [Send to Agent page](https://openagent3.xyz/skills/copilotkit-react/agent) - [JSON manifest](https://openagent3.xyz/skills/copilotkit-react/agent.json) - [Markdown brief](https://openagent3.xyz/skills/copilotkit-react/agent.md) - [Download page](https://openagent3.xyz/downloads/copilotkit-react)