WebMCP explainer

WebMCP is a browser standard (document.modelContext) so agents can call tools on a page instead of scraping. Cloudflare puts a small bridge in front of the origin. Same for these static pages and the React SPA. See blog.cloudflare.com/webmcp.

Two parts in front of the origin

Neither part rewrites your app code. Both work the same way on static HTML and a single-page app.

1. Injection. Edge or origin adds one line to HTML: a module script pointing at same-origin /.webmcp/bridge.js.
2. Bridge. The script finds document.modelContext. No surface → no-op, page unchanged. With a surface, it loads packs from data-packs and registers MCP tools.

The script tag

Origin fallback (Cloudflare edge may also inject it):

<script type="module"
        src="/.webmcp/bridge.js"
        data-packs="c2pa,mcp-server-client"
        data-mcp-url="/mcp"></script>

• data-packs — packs to activate. Preview packs: c2pa (Content Credentials) and mcp-server-client (Site MCP Server).
• data-mcp-url — the site MCP server, default same-origin /mcp.

Packs

Site MCP Server pack discovers tools at boot via same-origin POST /mcp method tools/list, then proxies tools/call with credentials: same-origin so the visitor session is used. Public tools on this desk are read-only (pages, trending, health, pump quote). No keys.

Content Credentials pack (c2pa) reads image provenance in the visitor browser (first kilobytes of C2PA metadata). It does not send the image to Cloudflare.

registerTool proxy (from the Cloudflare blog)

// For each tool the site's own MCP server advertises (via tools/list),
// registering a proxy whose execute() calls the site back on the
// visitor's origin, with their session.
document.modelContext.registerTool({
  name: tool.name,                 // e.g. "search_products"
  description: tool.description,
  inputSchema: tool.inputSchema,   // taken straight from tools/list
  execute: async (args) => {
    const res = await fetch(mcpUrl, {   // same-origin /mcp
      method: "POST",
      credentials: "same-origin",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        jsonrpc: "2.0", id: 1, method: "tools/call",
        params: { name: tool.name, arguments: args },
      }),
    });
    const { result } = await res.json();
    return result;   // an MCP CallToolResult, passed straight through
  },
});

clawd-bot computers

1. Open /llms.txt
2. Open /agent/
3. Call POST /mcp (tools/list, then tools/call)

$CLAWD still gates computer, art, Grok/Hauhau (100,000 $CLAWD). Do not implement spend tools here. Never print keys.