My MCP Server Example

🚀 在Cloudflare上远程搭建MCP服务器

本项目旨在帮助你在Cloudflare Workers上启动并运行一个远程MCP服务器，同时集成了OAuth登录功能，为你提供便捷的服务体验。

🚀 快速开始

✨ 本地开发

在本地环境搭建项目，你可以按照以下步骤操作：

# 克隆仓库
git clone git@github.com:cloudflare/ai.git

# 安装依赖项
cd ai
npm install

# 本地运行
npx nx dev remote-mcp-server

运行上述命令后，你可以打开浏览器，访问 http://localhost:8787/ 来查看项目运行情况。

💻 使用示例

将MCP检查器连接到你的服务器

若要探索新的MCP API，你可以使用模型上下文协议（MCP）检查器，具体操作步骤如下：

1. 使用以下命令启动检查器：

   npx @modelcontextprotocol/inspector
   

2. 在检查器中，切换传输类型到SSE，并在URL字段输入http://localhost:8787/sse，然后点击“连接”。
3. 你将进入一个（模拟的）用户登录界面。输入任意邮箱和密码进行登录。
4. 成功登录后，你会被重定向回MCP检查器，并可以列出和调用任何已定义的工具！

将Claude Desktop连接到本地MCP服务器

虽然MCP检查器很实用，但我们更希望将其与Claude集成。按照Anthropic的快速入门指南，在Claude Desktop中前往设置>开发者>编辑配置文件，找到你的配置文件。打开该文件并用以下内容替换：

{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://localhost:8787/sse"
      ]
    }
  }
}

这样会运行一个本地代理，允许Claude通过HTTP与你的MCP服务器通信。当打开Claude时，浏览器窗口应显示登录界面。你应该能够看到可用工具列表，在右侧底部显示。根据提示输入合适的提示词，Claude将调用MCP服务器上的工具。

📦 部署到Cloudflare

若要将项目部署到Cloudflare，可以按照以下步骤操作：

1. 创建KV命名空间：

   npx wrangler kv namespace create OAUTH_KV
   

2. 按照说明将kv命名空间ID添加到wrangler.jsonc。
3. 执行部署命令：

   npm run deploy
   

💻 从远程MCP客户端调用新部署的远程MCP服务器

如同“本地开发”部分的操作，运行MCP检查器：

npx @modelcontextprotocol/inspector@latest

然后在检查器中输入你的Cloudflare Worker URL（例如：worker-name.account-name.workers.dev/sse），并点击“连接”。这样你就成功将MCP服务器连接到远程MCP客户端。

💻 将Claude Desktop连接到你的远程MCP服务器

在Claude Desktop的配置文件中，将URL替换为新的Cloudflare Worker URL：

{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://your-worker-name.your-account-id.workers.dev/sse"
      ]
    }
  }
}

保存文件后，Claude将通过HTTP与你的Cloudflare Worker通信。

💡 使用建议

若遇到问题，请检查以下内容：

1. 确保MCP服务器正在运行。
2. 检查网络连接是否正常。
3. 查看控制台是否有错误信息。

按照以上步骤操作，你就可以成功在Cloudflare Workers上运行并使用MCP服务器了！