mcp-browser-transport

基于浏览器 MessageChannel API 的 Transport 实现，适配 @modelcontextprotocol/sdk，用于不同浏览器上下文（iframe、worker、tab、window 等）之间通信。

---

安装

npm install mcp-browser-transport @modelcontextprotocol/sdk

---

快速开始

1. 在同一上下文中模拟 Client/Server 通信

import { createSameContextTransports } from 'mcp-browser-transport';
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';

// 初始化 SDK
const client = new Client({ name: 'browser-client', version: '1.0.0' });
const server = new McpServer({ name: 'browser-server', version: '1.0.0' });

// 创建一对 transport
const { clientTransport, serverTransport } = createSameContextTransports();

await client.connect(clientTransport);
await server.connect(serverTransport);

// 注册工具
server.tool('add', { a: z.number(), b: z.number() }, async ({ a, b }) => ({
  content: [{ type: 'text', text: String(a + b) }],
}));

// 发起请求
const result = await client.listTools();
console.log(result);

---

2. 跨上下文通信（如 iframe、worker）

父页面

import { BrowserTransport } from 'mcp-browser-transport';
import { Client } from '@modelcontextprotocol/sdk/client/index.js';

const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const channel = new MessageChannel();
iframe.contentWindow.postMessage('init', '*', [channel.port2]);

const client = new Client({ name: 'browser-client', version: '1.0.0' });
const transport = new BrowserTransport(channel.port1);
await client.connect(clientTransport);

子页面（iframe 内）

import { BrowserTransport } from 'mcp-browser-transport';
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';

window.addEventListener('message', async (event) => {
  if (event.data === 'init' && event.ports[0]) {
    const server = new McpServer({ name: 'browser-server', version: '1.0.0' });
    const transport = new BrowserTransport(event.ports[0]);
    // 这里可以初始化 Server
    await server.connect(transport);
  }
});

---

API 说明

• BrowserTransport：基于 MessagePort 的 Transport 实现
• createSameContextTransports()：快速创建一对可互通的 Transport 实例（适用于同一上下文）

---

依赖

• @modelcontextprotocol/sdk

---

License

MIT

---

如需更详细的用法或遇到问题，欢迎提 Issue 或 PR！