模型上下文协议客户端

MCP客户端演示

注： 该项目目前正在进行中（WIP）。功能和实现可能会发生重大变化。

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

特性

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

入门指南

先决条件

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

安装

1. 克隆存储库
2. 安装依赖项：

npm install

发展

启动开发服务器：

npm run dev

测试工人

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

项目结构

src/
├── worker.ts           # MCP client worker implementation
├── worker-test.ts      # Worker test interface
├── types.ts           # Type definitions
└── App.tsx           # Main React application

关键组件

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

实现细节

工人命令

worker接受以下命令：

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

工人反应

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请求