MCP 客户端演示

注意： 此项目目前正在进行中（WIP）。功能和实现可能会有显著变化。

这是一个使用Web Workers和服务器发送事件（SSE）实现的模型上下文协议（MCP）客户端的演示。

功能

• 基于Web Worker的MCP客户端实现
• 使用服务器发送事件（SSE）传输
• 交互式测试UI
• 使用TypeScript实现类型安全
• 使用Vite + React构建

开始使用

先决条件

• Node.js 18.x或更高版本
• 在localhost:3020运行的与MCP兼容的服务器

安装

1. 克隆仓库
2. 安装依赖：

npm install

开发

启动开发服务器：

npm run dev

测试Worker

1. 在浏览器中打开test.html
2. 点击“连接”以建立与MCP服务器的连接
3. 使用“列出工具”查看可用工具
4. 选择一个工具并提供JSON格式的输入
5. 点击“执行工具”以运行所选工具

项目结构

src/
├── worker.ts           # MCP客户端Worker实现
├── worker-test.ts      # Worker测试接口
├── types.ts           # 类型定义
└── App.tsx           # 主React应用程序

关键组件

• worker.ts：MCP客户端的主要Web Worker实现
• worker-test.ts：Worker的测试接口
• types.ts：用于Worker命令和响应的共享类型定义

实现细节

Worker命令

Worker接受以下命令：

• connect：与MCP服务器建立连接
• disconnect：关闭连接
• listTools：获取可用工具列表
• callTool：执行特定工具

Worker响应

Worker以以下格式发送响应：

type WorkerResponse =
  | {
      type: "status";
      status: WorkerStatus;
    }
  | {
      type: "result";
      result: ListToolsResult | CallToolResult;
    }
  | {
      type: "error";
      error: string;
      details?: Record<string, unknown>;
    };

开发

构建

构建项目：

npm run build

代码检查

运行ESLint：

npm run lint

贡献

1. 分叉仓库
2. 创建你的功能分支
3. 提交更改
4. 推送到分支
5. 创建新的Pull Request