关键词

浏览器环境WASM概念验证上下文服务本地存储计算器

使用说明

项目简介

mcp-wasm 仓库提供了一个基于 WebAssembly 的 Model Context Protocol (MCP) 服务器的实验性实现。该项目旨在演示在现代 Web 浏览器环境中运行 MCP 服务器的可行性，并提供了一个轻量级的、隔离的上下文服务解决方案。它包含一个简单的计算器工具和一个本地存储系统，展示了 MCP 服务器管理工具和资源的基本功能。

主要功能点

  • WASM 环境运行: MCP 服务器被编译为 WebAssembly，可以在任何现代 Web 浏览器中运行，无需后端服务器。
  • 计算器工具: 提供基本的加、减、乘、除运算工具，允许客户端通过 MCP 协议调用进行计算。
  • 本地存储系统: 实现基于浏览器本地存储的 Key-Value 资源管理，允许客户端通过 MCP 协议读取和写入数据。
  • 浏览器传输层: 使用 'window.postMessage' 实现自定义的浏览器传输层，用于 MCP 客户端和服务器之间的通信。
  • 概念验证: 作为一个概念验证项目，它专注于展示 MCP 核心概念在浏览器环境中的应用，代码简洁易懂。

安装步骤

  1. 克隆仓库: 
    git clone https://github.com/beekmarks/mcp-wasm.git
cd mcp-wasm
  2. 进入 'src/web' 目录: 
    cd src/web
  3. 安装依赖: 确保你已经安装了 Node.js 和 npm。运行以下命令安装项目依赖： 
    npm install
  4. 启动开发服务器: 运行 Vite 开发服务器来启动项目： 
    npm run dev
    这将启动一个本地服务器，你可以在浏览器中通过 'http://localhost:3000' 访问该 MCP 服务器的演示页面。

服务器配置

由于 mcp-wasm 是一个浏览器内的 WASM 服务器，它不需要传统的服务器启动命令。MCP 客户端需要配置的是如何访问和连接到这个浏览器内的 MCP 服务器。

对于 'mcp-wasm'，配置的核心在于打开运行该服务器的网页。假设 MCP 客户端可以嵌入或打开一个浏览器窗口来访问 'mcp-wasm' 提供的服务，以下是一个可能的 MCP 客户端配置示例（JSON 格式），用于描述如何与此 WASM MCP 服务器建立连接：

{
  "serverName": "mcp-wasm-browser-server",
  "transport": "Browser-PostMessage",
  "description": "WASM MCP Server running in a web browser",
  "config": {
    "url": "http://localhost:3000"
  }
}

配置参数注释:

  • 'serverName': 服务器的名称，可以自定义，用于在客户端标识该服务器。
  • 'transport': 传输协议类型，这里表明使用自定义的 "Browser-PostMessage" 传输方式，表示客户端需要通过浏览器的 'postMessage' API 与服务器通信。（注意：实际传输层在代码中为 'BrowserTransport'，这里 'Browser-PostMessage' 仅为示例，实际客户端需要适配 'BrowserTransport' 的通信机制。通常 MCP 客户端需要根据服务器提供的能力声明来选择合适的传输方式。对于此POC，需要客户端理解并实现基于 'window.postMessage' 的双向通信。）
  • 'description': 服务器的简短描述，方便用户理解其用途。
  • 'config': 配置信息，包含连接服务器所需的参数。
    • 'url': 关键配置。指定运行 'mcp-wasm' 服务器的网页 URL。客户端需要加载这个 URL 才能与服务器建立连接。对于本地开发，通常是 'http://localhost:3000'。

重要提示: 由于 'mcp-wasm' 是浏览器内的服务器，没有独立的服务器进程需要启动。 客户端的“连接”动作实际上是需要让客户端的 JavaScript 代码能够与运行在浏览器中的 'mcp-wasm' WASM 代码建立通信。 这通常需要客户端也运行在浏览器环境中，或者能够通过某种桥接方式与浏览器环境通信。

基本使用方法

  1. 启动 mcp-wasm 演示页面 (按照安装步骤启动开发服务器并访问 'http://localhost:3000')。
  2. 在演示页面上操作:
    • 计算器: 在页面上选择运算类型，输入数字，点击 "Calculate" 按钮，即可看到计算结果。
    • 存储: 在 "Key" 和 "Value" 输入框中输入键值对，点击 "Set Storage" 按钮存储数据。输入 Key，点击 "Get Storage" 按钮获取存储的值。
  3. MCP 客户端交互 (简述概念): 如果需要编写 MCP 客户端与 'mcp-wasm' 交互，你需要：
    • 创建一个可以加载 'http://localhost:3000' 网页的浏览器环境 (例如，使用 Electron 或 Puppeteer 等技术)。
    • 在客户端 JavaScript 代码中，实现 'BrowserTransport' 类似的 'postMessage' 通信机制，以便向 'mcp-wasm' 服务器发送符合 MCP 协议的 JSON-RPC 请求 (例如 'tool' 和 'resource' 请求)。
    • 处理从 'mcp-wasm' 服务器返回的 JSON-RPC 响应。

总结: 'mcp-wasm' 提供了一个独特的、浏览器内运行的 MCP 服务器示例。其配置和使用方式与传统的后端服务器有所不同，核心在于理解它是一个运行在网页中的 WASM 应用，客户端需要通过浏览器环境与其交互。

信息

分类

AI与计算

访问项目