MCP Client Demo

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. 点击 "Connect" 建立与 MCP 服务的连接
3. 使用 "List Tools" 查看可用工具
4. 选择工具并以 JSON 格式提供输入
5. 点击 "Execute Tool" 运行选定的工具

项目结构

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：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. Fork 仓库
2. 创建您的功能分支
3. 提交您的更改
4. 推送到分支
5. 创建新的 Pull Request