@opentiny/next NPM

OpenTiny NEXT

OpenTiny NEXT 是一个基于 Model Context Protocol（MCP）的 TypeScript 库，提供了多种传输方式来支持 MCP 客户端与服务端的通信。本库支持三种主要的传输方式：

MessageChannel API - 用于浏览器内部不同上下文之间的通信
SSE (Server-Sent Events) Client Proxy - 基于 HTTP 长连接实现单向数据推送的 Client 连接代理
Streamable HTTP Client Proxy - 通过分块传输编码实现任意数据的流式传输的 Client 连接代理

安装

npm install @opentiny/next

客户端 API (client.js)

客户端 API 主要用于在浏览器环境中的 MCP 通信。

MessageChannel API

在同一浏览器窗口内互相通信的场景

使用 createTransportPair 创建一对可互通的 Transport 服务的和客户端实例来进行通信。

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { createTransportPair } from '@opentiny/next';

// 创建一对可互通的 Transport 实例
const [serverTransport, clientTransport] = createTransportPair();

// 创建 MCP 服务端和客户端实例
const capabilities = { prompts: {}, resources: {}, tools: {}, logging: {} };
const server = new McpServer({ name: 'mcp-server', version: '1.0.0' }, { capabilities });
const client = new Client({ name: 'mcp-client', version: '1.0.0' }, { capabilities });

// 建立服务端和客户端的通信连接
await server.connect(serverTransport);
await client.connect(clientTransport);

// 将客户端实例存储到状态中
state.client = client;

在浏览器主线程与iframe、Web Worker等互相通信的场景

使用 MessageChannelServerTransport 和 MessageChannelClientTransport 创建用于监听的 Transport 服务端实例，以及用于连接的 Transport 客户端实例来进行通信。

以下是在浏览器主线程的代码：

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { MessageChannelServerTransport } from '@opentiny/next';

// 创建用于监听的 Transport 服务端实例
const serverTransport = new MessageChannelServerTransport('endpoint');

// 创建 MCP 服务端实例
const capabilities = { prompts: {}, resources: {}, tools: {}, logging: {} };
const server = new McpServer({ name: 'mcp-server', version: '1.0.0' }, { capabilities });

// 监听 endpoint 端点，等待客户端连接
await serverTransport.listen();

// 建立服务端和客户端的通信连接
await server.connect(serverTransport);

以下是在 iframe、Web Worker 的代码：

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { MessageChannelClientTransport } from '@opentiny/next';

// 创建用于连接的 Transport 客户端实例
const clientTransport = new MessageChannelClientTransport('endpoint');

// 创建 MCP 客户端实例
const capabilities = { prompts: {}, resources: {}, tools: {}, logging: {} };
const client = new Client({ name: 'mcp-client', version: '1.0.0' }, { capabilities });

// 建立服务端和客户端的通信连接
await client.connect(clientTransport);

// 将客户端实例存储到状态中
state.client = client;

请注意：创建 MessageChannelServerTransport 实例必须在创建 MessageChannelClientTransport 实例之前，确保客户端连接之前服务端已经开始监听。由于 iframe、Web Worker 等代码运行通常在浏览器主线程之后，所以上述示例代码执行顺序一般是先创建 MessageChannelServerTransport 实例，后创建 MessageChannelClientTransport 实例。