webmcp

WebMCP is a powerful bridge between the Web Model Context API and the Model Context Protocol (MCP). It enables developers to transform any website—whether it is a React/Vue/Next.js single-page application, a legacy Rails/Django/Laravel site, or plain vanilla JavaScript—into a robust source of tools for AI agents. By polyfilling the W3C standard navigator.modelContext API, WebMCP allows developers to register custom tools that AI can discover, query, and call directly, bridging the gap between web UI and backend agent logic.

The skill provides a streamlined development loop for autonomous iteration. Users can navigate to a target URL, inject custom TypeScript code that gets auto-bundled via esbuild, and instantly verify tool registration. This makes it ideal for creating userscripts for third-party platforms like GitHub or Notion, automating complex web forms, or exposing internal application state to AI assistants without building complex middleware. It serves as a comprehensive toolset for those who want to enhance agentic capabilities with real-time browser context.

• Enables registration of AI-callable tools directly from the browser runtime using navigator.modelContext.

• Includes a robust development workflow: inject scripts, diff tools, test executions, and debug via console snapshots.

• Supports automatic TypeScript bundling, allowing for modular tool development with npm dependencies.

• Provides cross-platform compatibility with an MCP-b polyfill layer for non-native browser environments.

• Facilitates tool discovery via the Chrome DevTools MCP server, ensuring seamless integration with Claude Code and other MCP-compliant clients.

• Offers dedicated helpers for common scraping, interaction, and data-handling tasks.

• Always reload the page before injection to prevent stale polyfill states or tool naming conflicts.

• Tools are identified by the pattern webmcp_{domain}page{idx}{name}, allowing for precise targeting of multiple application instances.

• Use the provided @webmcp/helpers for standardized ToolResponse patterns such as textResponse, jsonResponse, or errorResponse.

• Categorize tools by safety levels (read-only, read-write, or destructive) to guide AI agent behavior.

• Ensure appropriate schema definition (inputSchema/outputSchema) to maximize the reliability of the AI's tool-calling accuracy.