Help us improve
Share bugs, ideas, or general feedback.
Applies WebMCP patterns for SPA tool lifecycle, error handling, performance optimization, multi-site agents, accessibility, SEO, and production deployment.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin webmcp-browser-agentsHow this skill is triggered — by the user, by Claude, or both
Slash command
/webmcp-browser-agents:webmcp-dev-patternsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Fetch live docs**:
Guides adding WebMCP to web applications for AI accessibility, LLM UI tools, and MCP browser automation. Covers design principles, tool architecture, and testing workflows.
Sets up WebMCP projects: enables Chrome flags or MCP-B polyfill, scaffolds tool registration via navigator.modelContext, configures dev environment for AI agent tools on new websites.
Scaffolds new MCP tool definitions with naming conventions, file structure, and registration patterns for an MCP server project.
Share bugs, ideas, or general feedback.
Fetch live docs:
https://developer.chrome.com/blog/webmcp for the latest developer guidance and patternswebmcp development best practices patterns for community patternswebmcp SPA single page application routing for SPA-specific patternswebmcp SEO agent discovery for discoverability patternsIn single-page applications, tools must be managed across route changes:
// React example: register/unregister tools on route change
useEffect(() => {
const tools = getToolsForRoute(currentRoute);
tools.forEach(tool => navigator.modelContext.registerTool(tool));
return () => {
// Cleanup on route change
tools.forEach(tool => navigator.modelContext.unregisterTool(tool.name));
};
}, [currentRoute]);
Key principles:
clearContext() or selective unregisterTool)Tools should handle errors at multiple levels:
Network errors:
async execute(input) {
try {
const res = await fetch(`/api/products?q=${input.query}`);
if (!res.ok) {
return { status: "error", code: res.status, message: "Server error" };
}
return await res.json();
} catch (err) {
return { status: "error", code: "network_error", message: "Unable to reach server" };
}
}
Business logic errors:
async execute(input) {
const product = await fetchProduct(input.productId);
if (!product) {
return { status: "error", code: "not_found", message: "Product not found" };
}
if (!product.inStock) {
return { status: "error", code: "out_of_stock", message: "Product is out of stock" };
}
// proceed...
}
Consistent error format:
{ status: "error", code: "error_code", message: "Human-readable message" }
WebMCP tools are inherently faster than UI scraping, but optimize further:
Agents may navigate across multiple sites, each with WebMCP:
Agent Journey:
1. Open site-a.com → discovers tools [searchA, addToCartA, checkoutA]
2. Call searchA("wireless headphones") → get results
3. Open site-b.com → discovers tools [searchB, addToCartB, checkoutB]
4. Call searchB("wireless headphones") → get results
5. Agent compares results and recommends best option to user
6. User picks site-a → agent calls addToCartA and checkoutA
Design implications:
WebMCP tools should support accessible interactions:
WebMCP enhances AI discoverability:
As tools evolve:
searchProductsV2) for backward compatibilitydestructiveHint, etc.) set on all toolsTrack agent interactions in production:
Commerce platforms will likely add built-in WebMCP support:
toolname attributes to Liquid templatesMonitor your platform's announcements for native WebMCP support.
Fetch the latest community patterns, Chrome DevTools features, and platform integration announcements before architecting.