Prerequisites:
  • Node.js 22.12+ (check with node --version)
  • pnpm 10+ (install via npm install -g pnpm)
  • A website with JavaScript (vanilla, React, etc.)
  • MCP-B Chrome Extension installed for testing

​
Installation Methods

Choose your preferred installation method:

​
Step 1: Install Dependencies

npm
npm install @mcp-b/transports @modelcontextprotocol/sdk zod
pnpm
pnpm add @mcp-b/transports @modelcontextprotocol/sdk zod
yarn
yarn add @mcp-b/transports @modelcontextprotocol/sdk zod

​
Step 2: Create Your MCP Server

Create a single MCP server instance and connect it via Tab Transport. Here’s a complete example: 
import { TabServerTransport } from "@mcp-b/transports";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { z } from "zod";

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

// Example: Expose a tool with input validation
server.tool(
  "addToCart",
  "Add an item to the shopping cart",
  {
    productId: z.string().describe("The product ID to add"),
    quantity: z.number().min(1).describe("Quantity to add"),
  },
  async ({ productId, quantity }) => {
    // Your existing app logic here
    const result = await fetch('/api/cart/add', {
      method: 'POST',
      credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ productId, quantity })
    });
    
    return {
      content: [{
        type: "text",
        text: `Added ${quantity} of product ${productId} to cart`,
      }],
    };
  }
);

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

​
Step 3: Test Your Integration

1

Start your website

Run your site via a dev server (e.g., npm run dev)
2

Open in Chrome

Visit your page with the MCP-B extension installed
3

Open extension popup

Click the MCP-B icon in your toolbar
4

Test your tools

  • Go to the “Tools” tab to see exposed tools
  • Use the chat interface to interact with AI
  • Or manually invoke tools via the inspector

​
Framework Examples

Vanilla TypeScript

Simple todo app with dynamic tool registration

React

Modern React app with hooks and state management

Vue

Vue.js integration example by community

Nuxt 3

Nuxt 3 example with SSR support

​
Best Practices

​
Connect to Desktop Apps

To use your website’s tools from Claude Desktop or Cursor:

​
1. Install the Native Server

npm install -g @mcp-b/native-server

​
2. Run the Native Host

@mcp-b/native-server
This starts a server on port 12306.

​
3. Configure Your MCP Client

Add to Claude’s config or Cursor’s .cursor/mcp.json: 
{
  "type": "streamable-http",
  "url": "http://127.0.0.1:12306/mcp",
  "note": "WebMCP bridge to browser tools"
}
If you have both the Chrome Web Store extension and a dev build, disable one to avoid port conflicts.

​
What’s Next?

Explore Examples

See complete working examples for different use cases

Advanced Usage

Learn about dynamic tools, caching, and more

API Reference

Complete API documentation for all packages

Troubleshooting

Common issues and solutions