Mcp Wasm

🚀 WASM MCP 服务器

这是一个借助 WebAssembly (WASM)，在 Web 浏览器环境中运行的 Model Context Protocol (MCP) 服务器的概念验证实现。该项目充分展示了在浏览器环境里集成 MCP 工具和资源的强大能力。

✨ 主要特性

计算器工具

• 可执行基本算术运算，如加法、减法、乘法、除法。
• 具备输入验证和错误处理机制。
• 能实时显示计算结果。

存储系统

• 拥有基于键值的存储功能。
• 可使用字符串键来设置和检索值。
• 能在浏览器会话内实现持久存储。
• 可进行模板资源处理。

📦 安装指南

文档中未提及具体安装步骤，可按照以下依赖项进行安装： 本项目的依赖项如下：

• @modelcontextprotocol/sdk
• Zod（用于模式验证）
• TypeScript
• Vite（用于开发和构建）

你可以使用以下命令安装依赖：

npm install @modelcontextprotocol/sdk zod typescript vite

💻 使用示例

计算器

1. 选择一个操作（加、减、乘、除）。
2. 输入两个数字。
3. 点击“计算”查看结果。
4. 系统会对无效输入和除以零进行错误处理。

存储

1. 在相应的字段中输入键和值。
2. 点击“设置存储”以存储值。
3. 输入键后点击“获取存储”以检索值。
4. 系统会提供成功的操作反馈和错误信息。

🔧 技术细节

服务器组件

• server.ts：这是 MCP 服务器的核心实现，包含工具和服务资源定义。
• main.ts：负责客户端集成和 UI 交互处理。
• browser-transport.ts：用于浏览器通信的自定义传输层。

架构

• 使用 Model Context Protocol SDK 进行服务器实现。
• 实现了自定义浏览器传输层。
• 工具通过回调函数注册。
• 资源使用模板路径并带有参数替换。

关键概念

1. 工具

   • 使用server.tool()进行注册。
   • 通过回调函数执行。
   • 使用 Zod 进行模式验证。

2. 资源

   • 模板基于路径（例如，storage://{key}）。
   • 通过readCallback访问。
   • 可进行参数化资源处理。

📚 详细文档

项目结构

mcp-wasm-poc/
├── src/
│   └── web/
│       ├── server.ts      # MCP服务器实现
│       ├── main.ts        # 客户端逻辑
│       └── browser-transport.ts # 浏览器传输层
├── index.html            # 网页界面
└── package.json         # 项目依赖项

错误处理

• 服务器初始化错误
• 工具执行错误
• 资源访问错误
• 输入验证
• 传输层错误

未来改进

• 添加更多计算器操作。
• 突破会话限制的持久存储。
• 增强 UI/UX。
• 添加其他 MCP 工具和资源。
• WASM 优化。

开发

这是一个概念验证实现，展示了在 Web 浏览器中使用 WebAssembly 运行 MCP 服务器的可行性。该实现侧重于演示核心 MCP 概念，同时保持简单性和清晰性。