项目简介

workers-mcp-demo 是一个使用 Cloudflare Workers 和 workers-mcp 框架搭建的 MCP 服务器示例。它展示了如何利用 Cloudflare 的 serverless 平台快速构建自定义 AI 工具,并通过 MCP 协议与支持该协议的 AI 助手(如 Claude 和 Cursor)进行连接,从而增强 AI 的能力。

主要功能点

  • 自定义 AI 工具: 提供多个实用的工具,包括:
    • 'getRandomNumber': 生成随机数 (示例工具)
    • 'generateImage': 根据文本描述生成图像
    • 'screenshotURL': 对指定的 URL 网页进行截图
    • 'extractImagesFromURL': 从指定的 URL 网页中提取图片链接
  • Cloudflare Workers 部署: 利用 Cloudflare Workers 的serverless特性,无需管理服务器,快速部署和扩展。
  • MCP 协议支持: 基于 'workers-mcp' 框架,完整实现了 MCP 协议,可以与任何兼容 MCP 协议的客户端进行通信。
  • 易于扩展: 可以通过修改 'src/index.ts' 文件轻松添加自定义工具,并重新部署 Worker 即可生效。

安装步骤

  1. 克隆仓库:

    git clone https://github.com/akazwz/workers-mcp-demo.git
    cd workers-mcp-demo
  2. 安装依赖:

    pnpm install
  3. 配置 Cloudflare Worker:

    • 确保已安装并登录 Wrangler CLI
    • 运行 MCP 设置命令,自动配置 Worker:
      npx workers-mcp setup
    • 免费用户注意: 如果是 Cloudflare Workers 免费用户,需要编辑 'wrangler.jsonc' 文件,删除或注释掉 'browser' 配置,因为 Browser Rendering API 仅适用于付费用户。这将禁用 'screenshotURL' 和 'extractImagesFromURL' 功能。
  4. 部署 Worker:

    pnpm run deploy

    部署成功后,会得到一个 Worker 的 URL,例如 'https://your-worker-url.workers.dev'。

服务器配置

MCP 客户端配置信息:

此 MCP 服务器通过 Cloudflare Workers 部署,客户端需要配置命令来启动连接。以下是针对不同客户端的配置示例:

Cursor 配置:

{
  "type": "command",
  "command": "/path/to/workers-mcp run workers-mcp-demo <YOUR_WORKER_URL> /path/to/workers-mcp-demo",
  "args": [
    "<YOUR_WORKER_URL>",  // 替换为你的 Cloudflare Worker URL (部署后获取)
    "/path/to/workers-mcp-demo" // 替换为 workers-mcp-demo 项目在本地的路径 (可选,仅在某些情况下需要)
  ],
  "serverName": "workers-mcp-demo" // 自定义服务器名称,在 Cursor 中显示
}

Claude Desktop 配置:

Claude Desktop 使用命令安装 MCP 服务器,无需手动配置 JSON。在终端中运行以下命令,Claude 会自动安装并配置:

pnpx workers-mcp install:claude --serverUrl=<YOUR_WORKER_URL> --serverName=workers-mcp-demo

将 '<YOUR_WORKER_URL>' 替换为你的 Cloudflare Worker URL。

注意: '/path/to/workers-mcp' 和 '/path/to/workers-mcp-demo' 路径需要根据你的实际环境进行调整。对于 Cursor,通常只需要提供 Worker URL 即可,本地项目路径可能不是必需的。

基本使用方法

成功配置 MCP 客户端后,即可在 AI 助手中使用自定义工具。例如,在 Claude Desktop 中,可以使用以下命令调用 'getRandomNumber' 工具:

@workers-mcp-demo getRandomNumber

工具的具体调用方式和参数请参考各工具的文档或仓库 'src/index.ts' 文件中的注释。

信息

分类

AI与计算