Browser Agent                     Headless Agent
     |                                  |
  WebMCP Tool                     MCP Tool Call
     |                                  |
  fetch("/api/products")          JSON-RPC to MCP Server
     |                                  |
     +--------→ Same Backend API ←------+

Browser Agent
     |
  WebMCP searchProducts tool
     |
  fetch("https://merchant.com/.well-known/ucp/products")
     |
  UCP-formatted response → parsed → returned to agent

Browser Agent ←→ MCP-B Polyfill ←→ Backend MCP Server

navigator.modelContext.registerTool({
  name: "searchProducts",
  description: "Search the product catalog",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string" },
      maxPrice: { type: "number" }
    },
    required: ["query"]
  },
  annotations: { readOnlyHint: true },
  async execute(input) {
    // Call the same API that the MCP server would call
    const params = new URLSearchParams({
      q: input.query,
      ...(input.maxPrice && { max_price: input.maxPrice })
    });
    const res = await fetch(`/api/products/search?${params}`, {
      credentials: "same-origin" // Uses user's session cookies
    });
    return await res.json();
  }
});

navigator.modelContext.registerTool({
  name: "searchProducts",
  description: "Search products via Universal Commerce Protocol",
  inputSchema: { /* ... */ },
  async execute(input) {
    // Call UCP product discovery endpoint
    const res = await fetch("/api/ucp/products", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        query: input.query,
        filters: input.filters
      }),
      credentials: "same-origin"
    });
    return await res.json();
  }
});

// shared/tool-definitions.js
export const searchProductsTool = {
  name: "searchProducts",
  description: "Search the product catalog",
  inputSchema: { /* ... */ }
};

// webmcp/tools.js — browser-side
import { searchProductsTool } from "../shared/tool-definitions.js";
navigator.modelContext.registerTool({
  ...searchProductsTool,
  async execute(input) {
    return await fetch(`/api/search?q=${input.query}`).then(r => r.json());
  }
});

// mcp/server.js — server-side
import { searchProductsTool } from "../shared/tool-definitions.js";
mcpServer.registerTool({
  ...searchProductsTool,
  handler: async (input) => {
    return await productService.search(input.query);
  }
});