Bridges WebMCP browser tools to backend MCP servers, UCP endpoints, and REST APIs via patterns and JS implementations. Use for client-side agent integration with server protocols.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin webmcp-browser-agentsThis skill is limited to using the following tools:
**Fetch live docs**:
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.
Fetch live docs:
https://webmachinelearning.github.io/webmcp/ for WebMCP client-side specificationwebmcp backend MCP integration bridge for bridge architecture patternssite:github.com mcp-b backend MCP bridge for MCP-B polyfill's backend translation featureswebmcp UCP Universal Commerce Protocol integration for UCP bridge patternsWebMCP and backend protocols serve different scenarios:
| Scenario | Protocol |
|---|---|
| User in browser, agent assisting | WebMCP (client-side) |
| Headless agent, no UI | MCP (server-to-server) |
| Agent-to-agent delegation | A2A (agent-to-agent) |
| Structured product discovery | UCP (commerce-specific) |
| Payment authorization | AP2 (cryptographic payments) |
A business often needs both: WebMCP for browser-present users and MCP/UCP for headless scenarios. The bridge ensures both paths use the same backend logic.
Browser Agent Headless Agent
| |
WebMCP Tool MCP Tool Call
| |
fetch("/api/products") JSON-RPC to MCP Server
| |
+--------→ Same Backend API ←------+
Both WebMCP tools and MCP tools call the same backend services. WebMCP tools use the user's session; MCP tools use API credentials.
Browser Agent
|
WebMCP searchProducts tool
|
fetch("https://merchant.com/.well-known/ucp/products")
|
UCP-formatted response → parsed → returned to agent
WebMCP tools can call UCP endpoints directly, translating between the browser tool interface and UCP's JSON/REST API.
The MCP-B polyfill can translate between WebMCP client-side tools and backend MCP services:
Browser Agent ←→ MCP-B Polyfill ←→ Backend MCP Server
This enables a single tool definition to work in both browser and server contexts.
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();
}
});
Define tool schemas once, use in both WebMCP and MCP:
// 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);
}
});
Fetch the latest MCP-B bridge documentation and UCP integration patterns before implementing cross-protocol bridges.