🚨 Important: Version 1.0.0 is now available on NPM with breaking changes! Make sure to update your dependencies.

​
Welcome to WebMCP

WebMCP extends the Model Context Protocol (MCP) with browser-specific transports, allowing your website to act as an MCP server. This enables AI agents to interact with your site deterministically, respecting user authentication and scoping tools to specific pages or user states.

Quick Start

Get WebMCP running on your website in minutes

Live Demo

See MCP-B in action with interactive examples

Examples

Explore ready-to-use examples for various frameworks

GitHub

View source code and contribute

​
What is WebMCP?

WebMCP is a protocol that exposes functions in your browser JavaScript to LLMs as MCP tools. Websites expose existing functionality (e.g., APIs, forms, or state) as structured tools that AI agents can call directly.

​
Key Components

Tab Transports

Use postMessage for communication between your website’s MCP server and clients in the same tab

Extension Transports

Use Chrome’s runtime messaging for communication with browser extensions

​
Why WebMCP?

  • Deterministic AI Interactions: Let AI interact with your site through well-defined tools
  • Respects Authentication: Works with existing session cookies and user authentication
  • Page-Scoped Tools: Expose different tools based on page context or user state
  • No Backend Required: Run entirely in the browser with client-side JavaScript
  • Framework Agnostic: Works with vanilla JS, React, Vue, or any framework

​
Architecture Overview

​
Community

Discord

Join our community for support and discussions

NPM

Install our packages from NPM

License

AGPL-3.0 License

​
Quick Example

Here’s a simple example of exposing a tool on your website: 
import { TabServerTransport } from "@mcp-b/transports";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";

// Create the server
const server = new McpServer({
  name: "my-website",
  version: "1.0.0",
});

// Expose a tool
server.tool("getPageInfo", "Get current page info", {}, async () => {
  return {
    content: [{
      type: "text",
      text: JSON.stringify({
        title: document.title,
        url: window.location.href,
      }),
    }],
  };
});

// Connect the transport
await server.connect(new TabServerTransport({ 
  allowedOrigins: ["*"] 
}));

​
Next Steps

1

Install the Extension

Get the MCP-B Chrome Extension from the Chrome Web Store
2

Follow the Quickstart

Set up WebMCP on your website in minutes
3

Explore Examples

Check out working examples for different frameworks
4

Build Your Integration

Create custom tools for your specific use case