MCP Web Worker Demo

基本能力

产品定位

MCP Web Worker Demo 是一个用于展示 MCP 客户端在浏览器环境中如何通过 Shared Web Worker 架构实现的示例项目。

核心功能

1. Worker 实现 (worker.js)
2. 在 Worker 上下文中实现 MCP 客户端
3. 展示 Worker 端的消息处理模式

4. 实现一个简化的 MCP 客户端，无外部依赖

5. 客户端封装 (mcp-client.js)

6. 提供简化的 API 供主线程与 Worker 通信
7. 处理连接、初始化和方法调用

8. 解耦通信协议与实际 MCP 实现

9. 模拟服务器 (server.js)

10. 用于测试的演示服务器实现
11. 提供工具、资源和提示

12. 实现 MCP 请求处理

13. 演示 UI (index.html)

14. 交互式界面测试所有 MCP 功能
15. 展示客户端能力，如工具调用、资源读取和提示检索

16. 显示连接状态和服务器信息

17. 测试工具

18. 最小化 Worker (minimal-worker.js) - 用于兼容性测试的简化共享 Worker
19. 诊断工具 - 连接状态指示器和详细日志

适用场景

• 在浏览器环境中展示 MCP 客户端的实现
• 学习如何使用 Shared Web Worker 架构进行解耦设计
• 测试 MCP 功能，如工具调用、资源读取和提示检索

使用教程

使用依赖

确保已安装 Node.js 和 npm。

安装教程

1. 构建 SDK： bash # 从 typescript-sdk 根目录运行 npm run build

2. 启动 Web 服务器： bash # 从 typescript-sdk/webworker-demo 目录运行 ./start.sh 或者使用： bash # 从 typescript-sdk 根目录运行 npx http-server -p 3000

3. 在浏览器中打开： http://localhost:3000/webworker-demo/ 重要：确保通过 http://localhost:3000 访问，而不是 file:// 协议。

4. 点击 "Connect to MCP" 按钮建立连接

5. 工具、资源和提示应自动加载

6. 如有问题，检查浏览器控制台中的详细日志

7. 使用选项卡探索不同的 MCP 功能：

8. 工具：列出并调用可用工具
9. 资源：列出并读取资源
10. 提示：列出并检索提示

调试方式

1. 检查浏览器控制台中的错误消息
2. 确保浏览器支持 Shared Web Worker
3. 清除浏览器缓存并刷新页面
4. 检查 Worker 诊断面板中的连接状态和脚本路径

常见问题解答

1. 无法获取 Worker 脚本
2. 确保通过 Web 服务器访问演示
3. 不要直接从文件系统加载

4. 确保 SDK 已构建

5. SharedWorker 不支持

6. 使用 Chrome 或 Edge

7. 演示不支持非支持浏览器的回退

8. 模块导入错误

9. 确保通过 HTTP 服务器访问

10. 检查浏览器控制台中的导入路径错误

11. 控制台错误

12. 查找 "SharedWorker" 或 "MCP" 相关错误

13. 实现包含详细的调试日志

14. 空白页面或无工具/资源显示

15. 检查浏览器控制台中的错误消息
16. 确保浏览器已启用 JavaScript

17. 清除浏览器缓存并刷新页面

18. 路径解析问题

19. Worker 尝试从多个路径加载
20. Worker 诊断面板显示成功加载的路径

许可证

None