Sets up MCP-B polyfill for navigator.modelContext API using vanilla JS and React packages in browsers without native WebMCP support.
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:
site:github.com mcp-b README for the polyfill repository, packages, and API documentationsite:npmjs.com mcp-b for the latest package names and versionsmcp-b polyfill react hooks useMcpServer for React integration patternsmcp-b vanilla javascript navigator.modelContext for vanilla JS usageMCP-B (Model Context Protocol for Browser) is an open-source polyfill that implements the navigator.modelContext API for browsers without native WebMCP support. It allows developers to build and test WebMCP tools today, regardless of native browser support.
MCP-B provides multiple packages (fetch the README for exact names, as they may change):
navigator.modelContext polyfilluseMcpServer and related) for declarative tool registrationCheck for native WebMCP support and fall back to the polyfill:
if (!navigator.modelContext) {
// Load MCP-B polyfill
await import("mcp-b"); // or whatever the current package name is
}
// Now navigator.modelContext is available (native or polyfill)
navigator.modelContext.registerTool({ /* ... */ });
// 1. Import polyfill (if needed)
import "mcp-b";
// 2. Register tools using the standard API
navigator.modelContext.registerTool({
name: "searchProducts",
description: "Search the catalog",
inputSchema: { /* ... */ },
async execute(input) { /* ... */ }
});
import { useMcpServer } from "mcp-b/react"; // verify package name
function ProductPage() {
useMcpServer({
tools: [
{
name: "viewProduct",
description: "View product details",
inputSchema: { /* ... */ },
execute: async (input) => { /* ... */ }
}
]
});
return <div>Product Page</div>;
}
MCP-B can also translate between client-side WebMCP tools and backend MCP servers:
| Aspect | Native WebMCP | MCP-B Polyfill |
|---|---|---|
| Browser support | Chrome 146+ Canary (flagged) | Any modern browser |
| Performance | Native speed | Slight JS overhead |
| Permission prompts | Browser-native UI | Custom/simulated |
| API surface | Full spec | May lag behind spec updates |
| Production readiness | Not yet (still in preview) | Usable today |
Fetch the MCP-B README for exact installation commands, import paths, hook names, and API patterns before implementing.