# Mcp Web Bridge

> webmcp-bridge is a WebMCP-focused browser app that turns remote MCP servers into browser-usable tool context, so you can discover capabilities, execute them, and expose them through navigator.modelContext for next-gen browser AI workflows.

- **Type:** MCP server
- **Install:** `agentstack add mcp-hemanth-mcp-web-bridge`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [hemanth](https://agentstack.voostack.com/s/hemanth)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [hemanth](https://github.com/hemanth)
- **Source:** https://github.com/hemanth/mcp-web-bridge

## Install

```sh
agentstack add mcp-hemanth-mcp-web-bridge
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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`.

```bash
npm install mcp-web-bridge
```

## Usage

```javascript
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

```javascript
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

```javascript
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

```javascript
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

```javascript
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?)`

| Option | Type | Description |
|--------|------|-------------|
| `headers` | `object` | Custom headers merged into every request |
| `enrichContext` | `(name, args) => args` | Enrich tool args before proxying |
| `onToolCall` | `(name, args) => void` | Called before each tool call |
| `onResponse` | `(name, result) => result` | Transform responses |
| `onError` | `(name, error) => void` | Error handler |
| `logger` | `object` | Custom logger (default: `console`) |

### Methods

| Method | Returns | Description |
|--------|---------|-------------|
| `connect()` | `{ tools, prompts, resources }` | Initialize + discover |
| `register(extraTools?)` | `tool[]` | Register with WebMCP |
| `callTool(name, args)` | `result` | Call a tool |
| `getPrompt(name, args)` | `result` | Get a prompt |
| `readResource(uri)` | `result` | Read a resource |
| `setAuth({ type, token })` | — | Set auth before connecting |
| `disconnect()` | — | Clear context + logout |

## Browser requirements

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

## License

MIT

## Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [hemanth](https://github.com/hemanth)
- **Source:** [hemanth/mcp-web-bridge](https://github.com/hemanth/mcp-web-bridge)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-hemanth-mcp-web-bridge
- Seller: https://agentstack.voostack.com/s/hemanth
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.