{
  "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": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/copilotkit-react",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=copilotkit-react",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "metadata.json",
      "README.md",
      "SKILL.md",
      "rules/suggestions-configure.md",
      "rules/agent-use-agent-updates.md",
      "rules/agent-agent-id.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "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."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/copilotkit-react",
    "agentPageUrl": "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"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "CopilotKit React Patterns",
        "body": "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."
      },
      {
        "title": "When to Apply",
        "body": "Reference these guidelines when:\n\nSetting up CopilotKit provider in a React application\nUsing agent hooks (useAgent, useFrontendTool, useCopilotAction)\nRendering tool calls or custom messages from agents\nManaging shared state between UI and agents via useCopilotReadable or useCoAgent\nBuilding chat interfaces with CopilotChat, CopilotSidebar, or CopilotPopup\nConfiguring suggestions for proactive agent assistance"
      },
      {
        "title": "Rule Categories by Priority",
        "body": "PriorityCategoryImpactPrefix1Provider SetupCRITICALprovider-2Agent HooksHIGHagent-3Tool RenderingHIGHtool-4Context & StateMEDIUMstate-5Chat UIMEDIUMui-6SuggestionsLOWsuggestions-"
      },
      {
        "title": "1. Provider Setup (CRITICAL)",
        "body": "provider-runtime-url - Always configure runtimeUrl to connect to your agent backend\nprovider-single-endpoint - Configure the agent prop for CoAgent routing\nprovider-nested-providers - Scope agent configurations with nested CopilotKit providers\nprovider-tool-registration - Register tools via hooks inside provider, not as props when possible"
      },
      {
        "title": "2. Agent Hooks (HIGH)",
        "body": "agent-use-agent-updates - Specify update subscriptions to avoid unnecessary re-renders\nagent-agent-id - Always pass agentId when running multiple agents\nagent-context-description - Write descriptive context values for useCopilotReadable\nagent-frontend-tool-deps - Declare dependency arrays for useFrontendTool\nagent-stable-tool-handlers - Use useCallback for tool handler functions"
      },
      {
        "title": "3. Tool Rendering (HIGH)",
        "body": "tool-typed-args - Define Zod schemas for useRenderTool parameters (v2)\ntool-status-handling - Handle all three tool call statuses (inProgress, executing, complete)\ntool-wildcard-fallback - Register a wildcard renderer as fallback for unknown tools\ntool-render-vs-frontend - Use useRenderTool for display-only, useFrontendTool for side effects\ntool-component-hook - Use useFrontendTool render prop for simple component rendering"
      },
      {
        "title": "4. Context & State (MEDIUM)",
        "body": "state-minimal-context - Provide only relevant context to agents, not entire app state\nstate-structured-values - Use structured objects in useCopilotReadable, not serialized strings\nstate-context-granularity - Split context into multiple useCopilotReadable calls by domain\nstate-avoid-stale-closures - Use functional state updates in tool handlers"
      },
      {
        "title": "5. Chat UI (MEDIUM)",
        "body": "ui-chat-layout - Choose CopilotSidebar for persistent chat, CopilotPopup for on-demand\nui-custom-labels - Always customize labels for your domain instead of defaults\nui-welcome-screen - Provide a welcome screen with suggested prompts\nui-input-mode - Use appropriate inputMode for your use case"
      },
      {
        "title": "6. Suggestions (LOW)",
        "body": "suggestions-configure - Use useConfigureSuggestions (v2) or useCopilotChatSuggestions (v1)\nsuggestions-context-driven - Provide rich context so suggestions are relevant\nsuggestions-loading-state - Handle suggestion loading states via useSuggestions (v2)"
      },
      {
        "title": "How to Use",
        "body": "Read individual rule files for detailed explanations and code examples:\n\nrules/provider-runtime-url.md\nrules/agent-use-agent-updates.md\nrules/tool-typed-args.md\n\nEach rule file contains:\n\nBrief explanation of why it matters\nIncorrect code example with explanation\nCorrect code example with explanation\nAdditional context and references"
      },
      {
        "title": "Full Compiled Document",
        "body": "For the complete guide with all rules expanded: AGENTS.md"
      }
    ],
    "body": "CopilotKit React Patterns\n\nBest 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.\n\nWhen to Apply\n\nReference these guidelines when:\n\nSetting up CopilotKit provider in a React application\nUsing agent hooks (useAgent, useFrontendTool, useCopilotAction)\nRendering tool calls or custom messages from agents\nManaging shared state between UI and agents via useCopilotReadable or useCoAgent\nBuilding chat interfaces with CopilotChat, CopilotSidebar, or CopilotPopup\nConfiguring suggestions for proactive agent assistance\nRule Categories by Priority\nPriority\tCategory\tImpact\tPrefix\n1\tProvider Setup\tCRITICAL\tprovider-\n2\tAgent Hooks\tHIGH\tagent-\n3\tTool Rendering\tHIGH\ttool-\n4\tContext & State\tMEDIUM\tstate-\n5\tChat UI\tMEDIUM\tui-\n6\tSuggestions\tLOW\tsuggestions-\nQuick Reference\n1. Provider Setup (CRITICAL)\nprovider-runtime-url - Always configure runtimeUrl to connect to your agent backend\nprovider-single-endpoint - Configure the agent prop for CoAgent routing\nprovider-nested-providers - Scope agent configurations with nested CopilotKit providers\nprovider-tool-registration - Register tools via hooks inside provider, not as props when possible\n2. Agent Hooks (HIGH)\nagent-use-agent-updates - Specify update subscriptions to avoid unnecessary re-renders\nagent-agent-id - Always pass agentId when running multiple agents\nagent-context-description - Write descriptive context values for useCopilotReadable\nagent-frontend-tool-deps - Declare dependency arrays for useFrontendTool\nagent-stable-tool-handlers - Use useCallback for tool handler functions\n3. Tool Rendering (HIGH)\ntool-typed-args - Define Zod schemas for useRenderTool parameters (v2)\ntool-status-handling - Handle all three tool call statuses (inProgress, executing, complete)\ntool-wildcard-fallback - Register a wildcard renderer as fallback for unknown tools\ntool-render-vs-frontend - Use useRenderTool for display-only, useFrontendTool for side effects\ntool-component-hook - Use useFrontendTool render prop for simple component rendering\n4. Context & State (MEDIUM)\nstate-minimal-context - Provide only relevant context to agents, not entire app state\nstate-structured-values - Use structured objects in useCopilotReadable, not serialized strings\nstate-context-granularity - Split context into multiple useCopilotReadable calls by domain\nstate-avoid-stale-closures - Use functional state updates in tool handlers\n5. Chat UI (MEDIUM)\nui-chat-layout - Choose CopilotSidebar for persistent chat, CopilotPopup for on-demand\nui-custom-labels - Always customize labels for your domain instead of defaults\nui-welcome-screen - Provide a welcome screen with suggested prompts\nui-input-mode - Use appropriate inputMode for your use case\n6. Suggestions (LOW)\nsuggestions-configure - Use useConfigureSuggestions (v2) or useCopilotChatSuggestions (v1)\nsuggestions-context-driven - Provide rich context so suggestions are relevant\nsuggestions-loading-state - Handle suggestion loading states via useSuggestions (v2)\nHow to Use\n\nRead individual rule files for detailed explanations and code examples:\n\nrules/provider-runtime-url.md\nrules/agent-use-agent-updates.md\nrules/tool-typed-args.md\n\n\nEach rule file contains:\n\nBrief explanation of why it matters\nIncorrect code example with explanation\nCorrect code example with explanation\nAdditional context and references\nFull Compiled Document\n\nFor the complete guide with all rules expanded: AGENTS.md"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/GeneralJerel/copilotkit-react",
    "publisherUrl": "https://clawhub.ai/GeneralJerel/copilotkit-react",
    "owner": "GeneralJerel",
    "version": "1.0.1",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "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"
  }
}