{
  "schemaVersion": "1.0",
  "item": {
    "slug": "web-mcp",
    "name": "WebMCP",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/slemo54/web-mcp",
    "canonicalUrl": "https://clawhub.ai/slemo54/web-mcp",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/web-mcp",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-mcp",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "assets/webmcp-bridge.js",
      "references/webmcp-spec.md",
      "scripts/add-tool.sh",
      "scripts/generate-types.sh",
      "scripts/init-webmcp.sh"
    ],
    "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. 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. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-07T17:22:31.273Z",
      "expiresAt": "2026-05-14T17:22:31.273Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
        "contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/web-mcp"
    },
    "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/web-mcp",
    "agentPageUrl": "https://openagent3.xyz/skills/web-mcp/agent",
    "manifestUrl": "https://openagent3.xyz/skills/web-mcp/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/web-mcp/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. 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. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "WebMCP",
        "body": "Enable AI agents to interact with your web applications through structured tools. WebMCP provides a clean, self-documenting interface between AI agents and your web app."
      },
      {
        "title": "What is WebMCP?",
        "body": "WebMCP is a web standard that gives AI agents an explicit, structured contract for interacting with websites. Instead of screen-scraping or brittle DOM selectors, a WebMCP-enabled page exposes tools — each with:\n\nA name\nA JSON Schema describing inputs and outputs\nAn executable function\nOptional annotations (read-only hints, etc.)"
      },
      {
        "title": "Quick Start",
        "body": "# Initialize WebMCP in your Next.js project\nwebmcp init\n\n# Add a new tool\nwebmcp add-tool searchProducts\n\n# Generate TypeScript types\nwebmcp generate-types"
      },
      {
        "title": "1. Tool Definition",
        "body": "const searchTool = {\n  name: \"searchProducts\",\n  description: \"Search for products by query\",\n  inputSchema: {\n    type: \"object\",\n    properties: {\n      query: { type: \"string\", description: \"Search query\" }\n    },\n    required: [\"query\"]\n  },\n  outputSchema: { type: \"string\" },\n  execute: async (params) => {\n    // Implementation\n  },\n  annotations: {\n    readOnlyHint: \"true\"\n  }\n};"
      },
      {
        "title": "2. Contextual Tool Loading",
        "body": "Tools are registered when components mount and unregistered when they unmount:\n\nuseEffect(() => {\n  registerSearchTools();  // Tools appear to agent\n  return () => {\n    unregisterSearchTools();  // Tools disappear\n  };\n}, []);"
      },
      {
        "title": "3. Event Bridge Pattern",
        "body": "Tools communicate with React through CustomEvents:\n\nAgent → execute() → dispatch CustomEvent → React updates → signal completion → Agent receives result"
      },
      {
        "title": "Architecture",
        "body": "┌─────────────────────────────────────────┐\n│  Browser (navigator.modelContext)       │\n│                                         │\n│  ┌───────────┐    registers/     ┌────┐ │\n│  │ AI Agent  │◄──unregisters────│web │ │\n│  │ (Claude)  │    tools         │mcp│ │\n│  │           │                  │.ts│ │\n│  │ calls─────┼─────────────────►│    │ │\n│  └───────────┘                  └──┬─┘ │\n│                                    │    │\n│                         CustomEvent│    │\n│                         dispatch   │    │\n│                                    ▼    │\n│  ┌──────────────────────────────────┐   │\n│  │ React Component Tree             │   │\n│  │                                  │   │\n│  │ ┌──────────┐   ┌──────────┐     │   │\n│  │ │/products │   │  /cart   │     │   │\n│  │ │useEffect:│   │useEffect:│     │   │\n│  │ │ register │   │ register │     │   │\n│  │ │ search   │   │  cart    │     │   │\n│  │ │  tools   │   │  tools   │     │   │\n│  │ └──────────┘   └──────────┘     │   │\n│  └──────────────────────────────────┘   │\n└─────────────────────────────────────────┘"
      },
      {
        "title": "Installation",
        "body": "# In your Next.js project\nnpx webmcp init\n\n# Or install globally\nnpm install -g @webmcp/cli\nwebmcp init"
      },
      {
        "title": "1. Initialize WebMCP",
        "body": "webmcp init\n\nThis creates:\n\nlib/webmcp.ts - Core implementation\nhooks/useWebMCP.ts - React hook\ncomponents/WebMCPProvider.tsx - Provider component"
      },
      {
        "title": "2. Define Tools",
        "body": "// lib/webmcp.ts\nexport const searchProductsTool = {\n  name: \"searchProducts\",\n  description: \"Search for products\",\n  execute: async (params) => {\n    return dispatchAndWait(\"searchProducts\", params, \"Search completed\");\n  },\n  inputSchema: {\n    type: \"object\",\n    properties: {\n      query: { type: \"string\" }\n    },\n    required: [\"query\"]\n  },\n  annotations: { readOnlyHint: \"true\" }\n};"
      },
      {
        "title": "3. Register in Components",
        "body": "// app/products/page.tsx\n\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { registerProductTools, unregisterProductTools } from \"@/lib/webmcp\";\n\nexport default function ProductsPage() {\n  const [results, setResults] = useState([]);\n  const [completedRequestId, setCompletedRequestId] = useState(null);\n\n  // Signal completion after render\n  useEffect(() => {\n    if (completedRequestId) {\n      window.dispatchEvent(\n        new CustomEvent(`tool-completion-${completedRequestId}`)\n      );\n      setCompletedRequestId(null);\n    }\n  }, [completedRequestId]);\n\n  // Register tools + listen for events\n  useEffect(() => {\n    const handleSearch = (event: CustomEvent) => {\n      const { requestId, query } = event.detail;\n      // Perform search\n      setResults(searchProducts(query));\n      if (requestId) setCompletedRequestId(requestId);\n    };\n\n    window.addEventListener(\"searchProducts\", handleSearch);\n    registerProductTools();\n\n    return () => {\n      window.removeEventListener(\"searchProducts\", handleSearch);\n      unregisterProductTools();\n    };\n  }, []);\n\n  return <div>{/* Product UI */}</div>;\n}"
      },
      {
        "title": "CLI Commands",
        "body": "CommandDescriptionwebmcp initInitialize WebMCP in projectwebmcp add-tool <name>Add new tool definitionwebmcp generate-typesGenerate TypeScript typeswebmcp example <type>Create example project"
      },
      {
        "title": "Read-Only Tools",
        "body": "{\n  name: \"viewCart\",\n  description: \"View cart contents\",\n  annotations: { readOnlyHint: \"true\" }\n}"
      },
      {
        "title": "Mutating Tools",
        "body": "{\n  name: \"addToCart\",\n  description: \"Add item to cart\",\n  annotations: { readOnlyHint: \"false\" }\n}"
      },
      {
        "title": "Tools with Parameters",
        "body": "{\n  name: \"setFilters\",\n  inputSchema: {\n    type: \"object\",\n    properties: {\n      category: { type: \"string\", enum: [\"electronics\", \"clothing\"] },\n      maxPrice: { type: \"number\" }\n    }\n  }\n}"
      },
      {
        "title": "E-Commerce",
        "body": "webmcp example e-commerce\n\nFeatures:\n\nProduct search\nCart management\nCheckout flow\nOrder tracking"
      },
      {
        "title": "Dashboard",
        "body": "webmcp example dashboard\n\nFeatures:\n\nWidget interactions\nData filtering\nExport functionality\nReal-time updates"
      },
      {
        "title": "Blog",
        "body": "webmcp example blog\n\nFeatures:\n\nArticle search\nComment posting\nCategory filtering\nRelated articles"
      },
      {
        "title": "1. Tool Naming",
        "body": "Use camelCase verbs that describe the action:\n\n✅ searchProducts\n✅ addToCart\n✅ updateProfile\n❌ product_search\n❌ handleCart"
      },
      {
        "title": "2. Descriptions",
        "body": "Write clear, specific descriptions:\n\n✅ \"Search for products by name or category\"\n❌ \"Search stuff\""
      },
      {
        "title": "3. Schema Completeness",
        "body": "Always include descriptions for parameters:\n\nproperties: {\n  query: {\n    type: \"string\",\n    description: \"The search query to find products by name or category\"\n  }\n}"
      },
      {
        "title": "4. Contextual Loading",
        "body": "Register tools only when relevant:\n\n// Product page\nuseEffect(() => {\n  registerProductTools();\n  return () => unregisterProductTools();\n}, []);\n\n// Cart page  \nuseEffect(() => {\n  registerCartTools();\n  return () => unregisterCartTools();\n}, []);"
      },
      {
        "title": "5. Error Handling",
        "body": "Always handle timeouts and errors:\n\nasync function execute(params) {\n  try {\n    return await dispatchAndWait(\"action\", params, \"Success\", 5000);\n  } catch (error) {\n    return `Error: ${error.message}`;\n  }\n}"
      },
      {
        "title": "Browser Support",
        "body": "WebMCP requires browsers that support:\n\nCustomEvent API\nnavigator.modelContext (proposed standard)\n\nFor development, use the WebMCP polyfill:\n\nimport \"@webmcp/polyfill\";"
      },
      {
        "title": "Resources",
        "body": "WebMCP Specification\nExample Projects\nReact Integration Guide"
      },
      {
        "title": "Integration with Other Skills",
        "body": "ai-labs-builder: Use WebMCP to make AI apps agent-accessible\nmcp-workflow: Combine with workflow automation\ngcc-context: Version control your tool definitions"
      }
    ],
    "body": "WebMCP\n\nEnable AI agents to interact with your web applications through structured tools. WebMCP provides a clean, self-documenting interface between AI agents and your web app.\n\nWhat is WebMCP?\n\nWebMCP is a web standard that gives AI agents an explicit, structured contract for interacting with websites. Instead of screen-scraping or brittle DOM selectors, a WebMCP-enabled page exposes tools — each with:\n\nA name\nA JSON Schema describing inputs and outputs\nAn executable function\nOptional annotations (read-only hints, etc.)\nQuick Start\n# Initialize WebMCP in your Next.js project\nwebmcp init\n\n# Add a new tool\nwebmcp add-tool searchProducts\n\n# Generate TypeScript types\nwebmcp generate-types\n\nCore Concepts\n1. Tool Definition\nconst searchTool = {\n  name: \"searchProducts\",\n  description: \"Search for products by query\",\n  inputSchema: {\n    type: \"object\",\n    properties: {\n      query: { type: \"string\", description: \"Search query\" }\n    },\n    required: [\"query\"]\n  },\n  outputSchema: { type: \"string\" },\n  execute: async (params) => {\n    // Implementation\n  },\n  annotations: {\n    readOnlyHint: \"true\"\n  }\n};\n\n2. Contextual Tool Loading\n\nTools are registered when components mount and unregistered when they unmount:\n\nuseEffect(() => {\n  registerSearchTools();  // Tools appear to agent\n  return () => {\n    unregisterSearchTools();  // Tools disappear\n  };\n}, []);\n\n3. Event Bridge Pattern\n\nTools communicate with React through CustomEvents:\n\nAgent → execute() → dispatch CustomEvent → React updates → signal completion → Agent receives result\n\nArchitecture\n┌─────────────────────────────────────────┐\n│  Browser (navigator.modelContext)       │\n│                                         │\n│  ┌───────────┐    registers/     ┌────┐ │\n│  │ AI Agent  │◄──unregisters────│web │ │\n│  │ (Claude)  │    tools         │mcp│ │\n│  │           │                  │.ts│ │\n│  │ calls─────┼─────────────────►│    │ │\n│  └───────────┘                  └──┬─┘ │\n│                                    │    │\n│                         CustomEvent│    │\n│                         dispatch   │    │\n│                                    ▼    │\n│  ┌──────────────────────────────────┐   │\n│  │ React Component Tree             │   │\n│  │                                  │   │\n│  │ ┌──────────┐   ┌──────────┐     │   │\n│  │ │/products │   │  /cart   │     │   │\n│  │ │useEffect:│   │useEffect:│     │   │\n│  │ │ register │   │ register │     │   │\n│  │ │ search   │   │  cart    │     │   │\n│  │ │  tools   │   │  tools   │     │   │\n│  │ └──────────┘   └──────────┘     │   │\n│  └──────────────────────────────────┘   │\n└─────────────────────────────────────────┘\n\nInstallation\n# In your Next.js project\nnpx webmcp init\n\n# Or install globally\nnpm install -g @webmcp/cli\nwebmcp init\n\nUsage\n1. Initialize WebMCP\nwebmcp init\n\n\nThis creates:\n\nlib/webmcp.ts - Core implementation\nhooks/useWebMCP.ts - React hook\ncomponents/WebMCPProvider.tsx - Provider component\n2. Define Tools\n// lib/webmcp.ts\nexport const searchProductsTool = {\n  name: \"searchProducts\",\n  description: \"Search for products\",\n  execute: async (params) => {\n    return dispatchAndWait(\"searchProducts\", params, \"Search completed\");\n  },\n  inputSchema: {\n    type: \"object\",\n    properties: {\n      query: { type: \"string\" }\n    },\n    required: [\"query\"]\n  },\n  annotations: { readOnlyHint: \"true\" }\n};\n\n3. Register in Components\n// app/products/page.tsx\n\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { registerProductTools, unregisterProductTools } from \"@/lib/webmcp\";\n\nexport default function ProductsPage() {\n  const [results, setResults] = useState([]);\n  const [completedRequestId, setCompletedRequestId] = useState(null);\n\n  // Signal completion after render\n  useEffect(() => {\n    if (completedRequestId) {\n      window.dispatchEvent(\n        new CustomEvent(`tool-completion-${completedRequestId}`)\n      );\n      setCompletedRequestId(null);\n    }\n  }, [completedRequestId]);\n\n  // Register tools + listen for events\n  useEffect(() => {\n    const handleSearch = (event: CustomEvent) => {\n      const { requestId, query } = event.detail;\n      // Perform search\n      setResults(searchProducts(query));\n      if (requestId) setCompletedRequestId(requestId);\n    };\n\n    window.addEventListener(\"searchProducts\", handleSearch);\n    registerProductTools();\n\n    return () => {\n      window.removeEventListener(\"searchProducts\", handleSearch);\n      unregisterProductTools();\n    };\n  }, []);\n\n  return <div>{/* Product UI */}</div>;\n}\n\nCLI Commands\nCommand\tDescription\nwebmcp init\tInitialize WebMCP in project\nwebmcp add-tool <name>\tAdd new tool definition\nwebmcp generate-types\tGenerate TypeScript types\nwebmcp example <type>\tCreate example project\nTool Types\nRead-Only Tools\n{\n  name: \"viewCart\",\n  description: \"View cart contents\",\n  annotations: { readOnlyHint: \"true\" }\n}\n\nMutating Tools\n{\n  name: \"addToCart\",\n  description: \"Add item to cart\",\n  annotations: { readOnlyHint: \"false\" }\n}\n\nTools with Parameters\n{\n  name: \"setFilters\",\n  inputSchema: {\n    type: \"object\",\n    properties: {\n      category: { type: \"string\", enum: [\"electronics\", \"clothing\"] },\n      maxPrice: { type: \"number\" }\n    }\n  }\n}\n\nExamples\nE-Commerce\nwebmcp example e-commerce\n\n\nFeatures:\n\nProduct search\nCart management\nCheckout flow\nOrder tracking\nDashboard\nwebmcp example dashboard\n\n\nFeatures:\n\nWidget interactions\nData filtering\nExport functionality\nReal-time updates\nBlog\nwebmcp example blog\n\n\nFeatures:\n\nArticle search\nComment posting\nCategory filtering\nRelated articles\nBest Practices\n1. Tool Naming\n\nUse camelCase verbs that describe the action:\n\n✅ searchProducts\n✅ addToCart\n✅ updateProfile\n❌ product_search\n❌ handleCart\n2. Descriptions\n\nWrite clear, specific descriptions:\n\n✅ \"Search for products by name or category\"\n❌ \"Search stuff\"\n3. Schema Completeness\n\nAlways include descriptions for parameters:\n\nproperties: {\n  query: {\n    type: \"string\",\n    description: \"The search query to find products by name or category\"\n  }\n}\n\n4. Contextual Loading\n\nRegister tools only when relevant:\n\n// Product page\nuseEffect(() => {\n  registerProductTools();\n  return () => unregisterProductTools();\n}, []);\n\n// Cart page  \nuseEffect(() => {\n  registerCartTools();\n  return () => unregisterCartTools();\n}, []);\n\n5. Error Handling\n\nAlways handle timeouts and errors:\n\nasync function execute(params) {\n  try {\n    return await dispatchAndWait(\"action\", params, \"Success\", 5000);\n  } catch (error) {\n    return `Error: ${error.message}`;\n  }\n}\n\nBrowser Support\n\nWebMCP requires browsers that support:\n\nCustomEvent API\nnavigator.modelContext (proposed standard)\n\nFor development, use the WebMCP polyfill:\n\nimport \"@webmcp/polyfill\";\n\nResources\nWebMCP Specification\nExample Projects\nReact Integration Guide\nIntegration with Other Skills\nai-labs-builder: Use WebMCP to make AI apps agent-accessible\nmcp-workflow: Combine with workflow automation\ngcc-context: Version control your tool definitions"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/slemo54/web-mcp",
    "publisherUrl": "https://clawhub.ai/slemo54/web-mcp",
    "owner": "slemo54",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/web-mcp",
    "downloadUrl": "https://openagent3.xyz/downloads/web-mcp",
    "agentUrl": "https://openagent3.xyz/skills/web-mcp/agent",
    "manifestUrl": "https://openagent3.xyz/skills/web-mcp/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/web-mcp/agent.md"
  }
}