WASM MCP Server

WASM MCP 服务

一个概念验证实现，展示了在 Web 浏览器中以 WebAssembly（WASM）运行的 Model Context Protocol（MCP）服务。本项目演示了在浏览器环境中集成 MCP 工具和资源。

功能

计算器工具

• 执行基本算术运算（加、减、乘、除）
• 输入验证和错误处理
• 实时计算结果

存储系统

• 键值存储功能
• 使用字符串键设置和检索值
• 在浏览器会话中持久存储
• 基于模板的资源处理

技术实现

服务组件

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

架构

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

核心概念

1. 工具

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

2. 资源

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

使用方法

计算器

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

存储

1. 在相应字段中输入键和值
2. 点击“Set Storage”存储值
3. 输入键并点击“Get Storage”检索值
4. 对成功操作和错误提供反馈

依赖项

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

项目结构

mcp-wasm-poc/
├── src/
│   └── web/
│       ├── server.ts      # MCP server implementation
│       ├── main.ts        # Client-side logic
│       └── browser-transport.ts # Browser transport layer
├── index.html            # Web interface
└── package.json         # Project dependencies

错误处理

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

后续改进

• 增加计算器运算
• 支持跨会话持久存储
• 改进 UI/UX
• 增加 MCP 工具和资源
• 优化 WASM

开发

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