AI导哈

MCP客户端演示

一个基于Shared Web Worker架构的Model Context Protocol (MCP)客户端实现演示，展示了在浏览器环境中使用纯JavaScript实现解耦架构的MCP客户端。

  • by weolopez
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 weolopez/mcp-worker

使用说明

MCP Web Worker演示

此演示展示了使用共享Web Worker架构的模型上下文协议（MCP）客户端实现。它演示了如何在没有构建要求的纯JavaScript的解耦架构的浏览器环境中使用MCP。

实施组件

1. 工人实施(worker.js)

  • 包含worker上下文中MCP客户端的实现
  • 演示MCP的工作端消息处理模式
  • 实现了一个没有外部依赖的简化MCP客户端

2. 客户端包装器(mcp-client.js)

  • 为主线程提供一个简化的API以与辅助线程通信
  • 处理连接、初始化和方法调用
  • 将通信协议与实际的MCP实现解耦

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

  • 用于测试的演示服务器实现
  • 提供工具、资源和提示
  • 实现MCP请求处理程序

4. 演示UI(index.html)

  • 交互式界面，用于测试所有MCP功能
  • 演示客户端功能，如工具调用、资源读取和提示检索
  • 显示连接状态和服务器信息

5. 测试工具

  • 最少工人(minimal-worker.js)-用于兼容性测试的简化共享工作器
  • 诊断-连接状态指示器和详细日志记录

消息协议

该实现使用自定义消息协议在主线程和工作上下文之间进行通信：

  1. 连接消息

    • { type: 'connection', connectionId, status } -工人到主线
    • { type: 'init', clientInfo } -工人的主线
    • { type: 'close', connectionId } -工人的主线

  2. MCP消息

    • { type: 'mcp', messageType: 'transport', payload } -用于原始MCP协议消息
    • { type: 'mcp', messageType: 'method', method, params, requestId } -方法调用
    • { type: 'mcp', messageType: 'result', method, result, requestId } -方法结果
    • { type: 'mcp', messageType: 'error', error, requestId } -错误响应
    • { type: 'mcp', messageType: 'status', status } -状态更新

基于工人的体系结构的好处

  1. 演出

    • 将MCP处理卸载到后台线程
    • 主UI线程在复杂操作期间保持响应

  2. 共享状态

    • 单个工作实例服务于多个选项卡/窗口
    • 跨浏览器上下文共享连接和状态

  3. 解耦设计

    • MCP实现细节在worker中隔离
    • 主线程只需要知道消息传递API
    • 更容易更新或更换任一组件

  4. 安全

    • MCP代码在单独的上下文中运行
    • UI和协议处理之间的资源隔离

如何运行演示

  1. 确保SDK已构建：

    # From the typescript-sdk root directory
npm run build

  2. 启动web服务器：

    # From the typescript-sdk/webworker-demo directory
./start.sh

    此脚本在端口3000上启动一个简单的HTTP服务器。或者，您可以使用：

    # From the typescript-sdk root directory
npx http-server -p 3000

  3. 打开网络浏览器（建议使用Chrome或Edge浏览器）并导航到：

    http://localhost:3000/webworker-demo/

    重要： 确保您通过以下方式访问该网站 http://localhost:3000 而不是 file:// 协议。从文件系统加载时，SharedWorkers有限制。

  4. 点击“连接到MCP”按钮建立连接

    • 工具、资源和提示应自动加载
    • 如果有任何问题，请检查浏览器的控制台以获取详细的日志

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

    • 工具：列出并调用可用的工具（尝试使用带有您名字的“hello”工具）
    • 资源：列出并阅读资源（查看自述文件）
    • 提示：列出和检索提示（尝试问候提示）

实现注意事项

  • 此演示使用了一个自包含的实现，没有外部依赖关系
  • 所有代码都直接在浏览器中运行，不需要构建步骤
  • 使用所有现代JavaScript功能（ES模块、async/await等）
  • worker实现了一个客户端，并连接到在相同上下文中运行的模拟服务器

浏览器兼容性要求

此演示严格要求浏览器支持：

  • 共享Web工作者 -这是一个硬性要求（众所周知，Chrome、Edge和Opera都可以工作）
  • ES模块
  • 异步/等待
  • 其他ES6+功能

如果您的浏览器不支持SharedWorker，您将看到一条错误消息。与许多演示不同，此实现并没有提供其他技术的后备方案——它旨在展示为MCP客户端使用SharedWorker的具体优势。

已知支持SharedWorker的浏览器：

  • 铬
  • 边缘（铬基）
  • 歌剧
  • 安卓浏览器

支持有限或不支持的浏览器：

  • Firefox（默认禁用，但可以通过about:config启用）
  • Safari（有限支持）
  • iOS Safari浏览器（不支持）

故障排除

如果您在运行演示时遇到问题：

  1. 无法获取工作脚本:

    • 确保您通过web服务器访问演示 在 http://localhost:3000/webworker-demo/
    • 不要 尝试从文件系统加载演示(file://)
    • 确保SDK是用 npm run build 从主目录
    • 检查浏览器控制台是否有特定的错误消息
    • 演示将自动尝试多个worker脚本路径，以找到一个有效的路径

  2. 不支持SharedWorker:

    • 使用具有良好SharedWorker支持的Chrome或Edge
    • 如果您的浏览器不支持SharedWorker，演示将显示一个明显的错误
    • 该演示故意不为不支持的浏览器实现回退

  3. 模块导入错误:

    • worker和服务器使用常规导入，不需要外部库
    • 确保您是通过HTTP服务器访问的，而不是直接从文件系统访问的
    • 检查浏览器控制台是否存在特定的导入路径错误

  4. 控制台错误:

    • 在浏览器控制台中查找与“SharedWorker”或“MCP”相关的错误
    • 该实现包括用于调试目的的大量日志记录
    • worker诊断面板显示连接状态和脚本路径

  5. 空白页或未显示工具/资源:

    • 检查浏览器控制台（F12或Cmd+Option+I）以获取详细的错误消息
    • 确保您的浏览器已启用JavaScript
    • 尝试清除浏览器缓存并刷新页面

  6. 路径解析问题:

    • worker尝试从多个路径加载：
      1. ./minimal-worker.js -实现最少工人的相对路径
      2. /webworker-demo/minimal-worker.js -实现最少工人的绝对路径
      3. ./worker.js -通往全职员工的相对路径
      4. /webworker-demo/worker.js -通往全职员工的绝对路径
    • 工作人员诊断面板将显示成功加载的路径

相关 MCP