MCP Web Bridge

mcp-web-bridge

Connect any MCP server to Chrome's WebMCP API.

You have MCP servers. You want them in the browser. This module connects to a remote MCP server, discovers its tools, and registers them with navigator.modelContext.

npm install mcp-web-bridge

Usage

import { WebMCPBridge } from 'mcp-web-bridge';

const bridge = new WebMCPBridge('https://mcp.example.com');
await bridge.connect();
bridge.register();

That's it. Tools are now available to Chrome's AI agent.

With context enrichment

const bridge = new WebMCPBridge('https://mcp.example.com', {
  enrichContext: (toolName, args) => ({
    ...args,
    user_locale: navigator.language,
    user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
  }),
  onResponse: (toolName, result) => {
    console.log(`[${toolName}]`, result);
    return result;
  },
});

await bridge.connect();
bridge.register();

With auth

const bridge = new WebMCPBridge('https://mcp.example.com');
bridge.setAuth({ type: 'bearer', token: 'sk-...' });
await bridge.connect();

Supports bearer, apikey, and basic auth. OAuth with PKCE is handled by the MCPAuth class.

Custom headers

const bridge = new WebMCPBridge('https://mcp.example.com', {
  headers: {
    'X-Custom-Header': 'value',
    'Authorization': 'Bearer sk-...',
  },
});

Custom headers are merged into every request. Auth headers from setAuth() are applied first, then your custom headers override.

Add page-local tools

bridge.register([
  {
    name: 'get_selection',
    description: 'Get the currently selected text on the page',
    inputSchema: { type: 'object', properties: {} },
    execute: async () => ({
      content: [{ type: 'text', text: window.getSelection().toString() }],
    }),
  },
]);

Mix remote MCP tools with local browser capabilities.

API

new WebMCPBridge(serverUrl, options?)

Methods

Browser requirements

• Chrome 146+ with chrome://flags/#enable-webmcp-testing
• Without WebMCP, connect() and callTool() still work — you just can't register()

License

MIT