# Send WebMCP 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. 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. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "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": {
    "downloadUrl": "/downloads/web-mcp",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-mcp",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md",
      "assets/webmcp-bridge.js",
      "references/webmcp-spec.md",
      "scripts/add-tool.sh",
      "scripts/generate-types.sh",
      "scripts/init-webmcp.sh"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "web-mcp",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-10T23:55:47.168Z",
      "expiresAt": "2026-05-17T23:55:47.168Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-mcp",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-mcp",
        "contentDisposition": "attachment; filename=\"web-mcp-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "web-mcp"
      },
      "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/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."
      ]
    }
  },
  "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"
  }
}
```
## Documentation

### WebMCP

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.

### What is WebMCP?

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:

A name
A JSON Schema describing inputs and outputs
An executable function
Optional annotations (read-only hints, etc.)

### Quick Start

# Initialize WebMCP in your Next.js project
webmcp init

# Add a new tool
webmcp add-tool searchProducts

# Generate TypeScript types
webmcp generate-types

### 1. Tool Definition

const searchTool = {
  name: "searchProducts",
  description: "Search for products by query",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "Search query" }
    },
    required: ["query"]
  },
  outputSchema: { type: "string" },
  execute: async (params) => {
    // Implementation
  },
  annotations: {
    readOnlyHint: "true"
  }
};

### 2. Contextual Tool Loading

Tools are registered when components mount and unregistered when they unmount:

useEffect(() => {
  registerSearchTools();  // Tools appear to agent
  return () => {
    unregisterSearchTools();  // Tools disappear
  };
}, []);

### 3. Event Bridge Pattern

Tools communicate with React through CustomEvents:

Agent → execute() → dispatch CustomEvent → React updates → signal completion → Agent receives result

### Architecture

┌─────────────────────────────────────────┐
│  Browser (navigator.modelContext)       │
│                                         │
│  ┌───────────┐    registers/     ┌────┐ │
│  │ AI Agent  │◄──unregisters────│web │ │
│  │ (Claude)  │    tools         │mcp│ │
│  │           │                  │.ts│ │
│  │ calls─────┼─────────────────►│    │ │
│  └───────────┘                  └──┬─┘ │
│                                    │    │
│                         CustomEvent│    │
│                         dispatch   │    │
│                                    ▼    │
│  ┌──────────────────────────────────┐   │
│  │ React Component Tree             │   │
│  │                                  │   │
│  │ ┌──────────┐   ┌──────────┐     │   │
│  │ │/products │   │  /cart   │     │   │
│  │ │useEffect:│   │useEffect:│     │   │
│  │ │ register │   │ register │     │   │
│  │ │ search   │   │  cart    │     │   │
│  │ │  tools   │   │  tools   │     │   │
│  │ └──────────┘   └──────────┘     │   │
│  └──────────────────────────────────┘   │
└─────────────────────────────────────────┘

### Installation

# In your Next.js project
npx webmcp init

# Or install globally
npm install -g @webmcp/cli
webmcp init

### 1. Initialize WebMCP

webmcp init

This creates:

lib/webmcp.ts - Core implementation
hooks/useWebMCP.ts - React hook
components/WebMCPProvider.tsx - Provider component

### 2. Define Tools

// lib/webmcp.ts
export const searchProductsTool = {
  name: "searchProducts",
  description: "Search for products",
  execute: async (params) => {
    return dispatchAndWait("searchProducts", params, "Search completed");
  },
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string" }
    },
    required: ["query"]
  },
  annotations: { readOnlyHint: "true" }
};

### 3. Register in Components

// app/products/page.tsx
"use client";

import { useEffect, useState } from "react";
import { registerProductTools, unregisterProductTools } from "@/lib/webmcp";

export default function ProductsPage() {
  const [results, setResults] = useState([]);
  const [completedRequestId, setCompletedRequestId] = useState(null);

  // Signal completion after render
  useEffect(() => {
    if (completedRequestId) {
      window.dispatchEvent(
        new CustomEvent(\`tool-completion-${completedRequestId}\`)
      );
      setCompletedRequestId(null);
    }
  }, [completedRequestId]);

  // Register tools + listen for events
  useEffect(() => {
    const handleSearch = (event: CustomEvent) => {
      const { requestId, query } = event.detail;
      // Perform search
      setResults(searchProducts(query));
      if (requestId) setCompletedRequestId(requestId);
    };

    window.addEventListener("searchProducts", handleSearch);
    registerProductTools();

    return () => {
      window.removeEventListener("searchProducts", handleSearch);
      unregisterProductTools();
    };
  }, []);

  return <div>{/* Product UI */}</div>;
}

### CLI Commands

CommandDescriptionwebmcp initInitialize WebMCP in projectwebmcp add-tool <name>Add new tool definitionwebmcp generate-typesGenerate TypeScript typeswebmcp example <type>Create example project

### Read-Only Tools

{
  name: "viewCart",
  description: "View cart contents",
  annotations: { readOnlyHint: "true" }
}

### Mutating Tools

{
  name: "addToCart",
  description: "Add item to cart",
  annotations: { readOnlyHint: "false" }
}

### Tools with Parameters

{
  name: "setFilters",
  inputSchema: {
    type: "object",
    properties: {
      category: { type: "string", enum: ["electronics", "clothing"] },
      maxPrice: { type: "number" }
    }
  }
}

### E-Commerce

webmcp example e-commerce

Features:

Product search
Cart management
Checkout flow
Order tracking

### Dashboard

webmcp example dashboard

Features:

Widget interactions
Data filtering
Export functionality
Real-time updates

### Blog

webmcp example blog

Features:

Article search
Comment posting
Category filtering
Related articles

### 1. Tool Naming

Use camelCase verbs that describe the action:

✅ searchProducts
✅ addToCart
✅ updateProfile
❌ product_search
❌ handleCart

### 2. Descriptions

Write clear, specific descriptions:

✅ "Search for products by name or category"
❌ "Search stuff"

### 3. Schema Completeness

Always include descriptions for parameters:

properties: {
  query: {
    type: "string",
    description: "The search query to find products by name or category"
  }
}

### 4. Contextual Loading

Register tools only when relevant:

// Product page
useEffect(() => {
  registerProductTools();
  return () => unregisterProductTools();
}, []);

// Cart page  
useEffect(() => {
  registerCartTools();
  return () => unregisterCartTools();
}, []);

### 5. Error Handling

Always handle timeouts and errors:

async function execute(params) {
  try {
    return await dispatchAndWait("action", params, "Success", 5000);
  } catch (error) {
    return \`Error: ${error.message}\`;
  }
}

### Browser Support

WebMCP requires browsers that support:

CustomEvent API
navigator.modelContext (proposed standard)

For development, use the WebMCP polyfill:

import "@webmcp/polyfill";

### Resources

WebMCP Specification
Example Projects
React Integration Guide

### Integration with Other Skills

ai-labs-builder: Use WebMCP to make AI apps agent-accessible
mcp-workflow: Combine with workflow automation
gcc-context: Version control your tool definitions
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: slemo54
- Version: 1.0.0
## 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-10T23:55:47.168Z
- Expires at: 2026-05-17T23:55:47.168Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/web-mcp)
- [Send to Agent page](https://openagent3.xyz/skills/web-mcp/agent)
- [JSON manifest](https://openagent3.xyz/skills/web-mcp/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/web-mcp/agent.md)
- [Download page](https://openagent3.xyz/downloads/web-mcp)