Help us improve
Share bugs, ideas, or general feedback.
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.
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-setupThis 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**:
Sets up MCP-B polyfill for navigator.modelContext API using vanilla JS and React packages in browsers without native WebMCP support.
Guides adding WebMCP to web applications for AI accessibility, LLM UI tools, and MCP browser automation. Covers design principles, tool architecture, and testing workflows.
Implements and debugs browser WebMCP integrations in JavaScript/TypeScript web apps for exposing imperative or declarative tools via modelContext.
Share bugs, ideas, or general feedback.
Fetch live docs:
https://developer.chrome.com/blog/webmcp for the latest Chrome WebMCP announcement and API overviewsite:github.com mcp-b polyfill README for the MCP-B polyfill installation and quickstartwebmcp chrome canary flag enable for current browser flag names and version requirementssite:chromestatus.com webmcp for feature status and milestonesWebMCP project setup prepares a website to expose tools to AI agents:
WebMCP for Testing flag, or install the MCP-B polyfillmcp-b packages for vanilla JS or Reactnavigator.modelContext.registerTool()my-webmcp-site/
├── src/
│ ├── webmcp/
│ │ ├── tools.js # Tool definitions and registration
│ │ ├── schemas.js # JSON Schemas for tool inputs
│ │ └── interactions.js # User interaction handlers
│ ├── index.html # Page with optional declarative form attributes
│ └── app.js # Main application entry
├── package.json
└── tests/
└── webmcp.test.js
my-webmcp-react-app/
├── src/
│ ├── webmcp/
│ │ ├── tools.ts # Tool definitions
│ │ ├── schemas.ts # JSON Schemas
│ │ ├── McpProvider.tsx # MCP-B React provider/hooks wrapper
│ │ └── interactions.ts # User interaction logic
│ ├── App.tsx
│ └── index.tsx
├── package.json
├── tsconfig.json
└── tests/
└── webmcp.test.tsx
registerTool), Declarative (HTML attributes), or both?To enable native WebMCP in Chrome Canary:
chrome://flagsFor browsers without native WebMCP, the MCP-B polyfill provides the same API surface. Fetch the README for exact installation commands, as packages and APIs may have changed.
Fetch the latest Chrome blog post and MCP-B README for exact commands, package names, and API patterns before scaffolding.