WebMCP

WebMCP is the underlying framework that WebMCP-B ( MCP-B ) uses to expose website functionality as MCP tools accessible to AI agents. The core idea is to take existing browser capabilities—APIs, forms, and application state—and present them as well-defined tools that an AI can call through the WebMCP protocol. On the client side, your website runs an MCP server (via Tab Transports or Extension Transports) that registers tools like getPageInfo, createTodo, or fetchUserData. AI agents can then invoke these tools through the MCP protocol, receiving structured results that your frontend or extension can render or act upon. MCP-B adds browser-specific transports so the server can communicate with the AI through the browser context, while preserving user authentication and page-scoped tooling.

To use it, install and run the WebMCP system in your website’s frontend code, expose the tools you want the AI to call, and then use the MCP-B Chrome extension to test and interact with those tools. The extension provides a chat interface and a tool inspector so you can see which tools are available, invoke them, and inspect responses. You can also develop locally using the provided examples (vanilla TS, React, script-tag) to understand how tools are registered, how inputs are validated, and how results are returned. Tools are typically registered once per site (or per page scope) and can be called by AI agents via the standard MCP tool invocation flow. Security and scope are important: limit tool exposure to only what’s necessary and align allowedOrigins or page-scoped contexts to prevent unintended access.

Prerequisites:

• Node.js 16+ (or the required version for your setup; verify with node --version)
• pnpm 10+ (install via npm i -g pnpm)
• A website or web app where you want to expose MCP tools
• MCP-B Chrome Extension for testing

Step 1: Clone the repository

git clone https://github.com/MiguelsPizza/WebMCP.git
cd WebMCP

Step 2: Install dependencies

pnpm install

Step 3: Build shared packages (if you are contributing or need the shared artifacts)

pnpm build:shared

Step 4: Run the development server or local backend (example placeholders)

pnpm dev

Note: Some postinstall scripts may fail during initial setup; this is common in monorepos and is usually safe to ignore or rerun after dependencies settle.

Step 5: Configure your environment (optional)

• If you’re testing with the MCP-B extension, set your extension ID in apps/native-server/.env or the equivalent environment location used by your setup.
• If you expose a backend server, ensure the MCP server path (path/to/server.js in this example) exists and is wired to handle MCP transport messages.

Step 6: Test with the MCP-B extension

• Install the MCP-B Chrome Extension from the Chrome Web Store.
• Open your site with the extension installed and use the Tools tab to inspect and invoke exposed MCP tools.

Step 7: Explore examples

• See the MCP-B Examples repository for vanilla TS, React, and script-tag demos that show how to register tools and connect transports.

Tips and common considerations:

• Start with a minimal tool registry and gradually add tools as you validate inputs with Zod or your chosen schema validator.
• Use Tab Transport for in-page communications and Extension Transport for browser-extension interactions. Limit allowedOrigins and scope tools to the current page or user session where appropriate.
• Ensure you have a secure environment; expose only necessary tools and validate inputs thoroughly to avoid injection or data leakage.
• When testing locally, the extension’s inspector and chat interface are invaluable for understanding the raw MCP messages and tool schemas.
• The project is moving toward WebMCP standards; keep an eye on the WebMCP explainer repository for evolving best practices and transport implementations.