AI导哈

远程MCP服务器

在Cloudflare Workers上部署的远程MCP服务器，支持OAuth登录和工具调用，适用于开发者和AI集成。

  • by hemanth
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 hemanth/remote-mcp-server

使用说明

Cloudflare上的远程MCP服务器

让我们在Cloudflare Workers上启动并运行一个远程MCP服务器，并完成OAuth登录！

在当地发展

# clone the repository
git clone git@github.com:hemanth/remote-mcp-server.git

# install dependencies
cd remote-mcp-server
npm install

# run locally
npm run dev

你应该能够打开 http://localhost:8787/ 在浏览器中

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

要探索新的MCP api，您可以使用 MCP检查员.

  • 从以下内容开始 npx @modelcontextprotocol/inspector@latest
  • 在检查员内部，将“传输类型”切换为 SSE 并进入 http://localhost:8787/sse 作为要连接的MCP服务器的URL，然后单击“连接”
  • 您将导航到（模拟）用户/密码登录屏幕。输入任何电子邮件并通过登录。
  • 您应该被重定向回MCP检查器，现在您可以列出并调用任何已定义的工具！

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

MCP检查员很棒，但我们真的想把它和克劳德联系起来！跟随 Anthropic的快速入门 在Claude Desktop中，转到“设置”>“开发人员”>“编辑配置”以查找您的配置文件。

在文本编辑器中打开该文件，并将其替换为以下配置：

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

这将运行一个本地代理，让Claude通过HTTP与您的MCP服务器通信

当您打开Claude时，浏览器窗口应该会打开并允许您登录。您应该在右下角看到可用的工具。如果提示正确，克劳德应该要求调用该工具。

部署到Cloudflare

  1. npx wrangler@latest kv namespace create remote-mcp-server-oauth-kv
  2. 按照指导将kv命名空间ID添加到 wrangler.jsonc
  3. npm run deploy

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

就像你在上面的“本地开发”中所做的那样，运行MCP检查器：

npx @modelcontextprotocol/inspector@latest

然后输入 workers.dev URL（例如： worker-name.account-name.workers.dev/sse)将检查器中的Worker设置为要连接的MCP服务器的URL，然后单击“连接”。

现在，您已从远程MCP客户端连接到MCP服务器。

使用独立MCP客户端示例

此项目包括一个独立的MCP客户端示例，演示如何以编程方式连接到MCP服务器并调用其工具。这对于测试、集成或构建与MCP服务器交互的自定义应用程序非常有用。

客户端代码位于 src/client/mcp-client.ts，运行它的示例脚本是 src/run-client.ts.

先决条件

  1. 服务器正在运行：确保MCP服务器正在本地运行(npm run dev 或 npx nx dev remote-mcp-server)或部署。
  2. 客户端凭据：客户端使用OAuth 2.0客户端凭据进行身份验证。
    • 对于本地开发，示例客户端(src/run-client.ts)已预先配置测试凭据(test-client / test-secret).如果服务器端没有实现特定的客户端注册，则默认OAuth提供程序设置需要这些凭据。
    • 如果您的OAuth服务器上有特定的客户端注册系统，则需要注册客户端并获取客户端ID和密钥。

运行客户端示例

  1. 设置环境变量（可选）: 客户端脚本 src/run-client.ts 可以通过环境变量进行配置：

    • MCP_SERVER_URLMCP服务器的基本URL（例如。， http://localhost:8787 或您部署的工作URL）。默认为 http://localhost:8787.
    • MCP_CLIENT_ID：OAuth客户端ID。默认为 test-client.
    • MCP_CLIENT_SECRET：OAuth客户端密钥。默认为 test-secret.

    您可以在shell中设置这些：

    export MCP_SERVER_URL="http://your-server-url"
export MCP_CLIENT_ID="your-client-id"
export MCP_CLIENT_SECRET="your-client-secret"

  2. 执行脚本: 从项目根目录运行以下命令：

    npm run run:client

    这将执行 src/run-client.ts 使用 ts-node。脚本将尝试连接到服务器、进行身份验证并调用示例 add 工具。

    备注：客户端的初始版本具有实际SDK客户端实例化的占位符实现(new McpClient(...))和工具调用(client.callTool(...))内 src/client/mcp-client.ts。您可能需要根据提供的特定API更新这些部分 @modelcontextprotocol/sdk 一旦他们完全确定，工具调用就会成功。身份验证部分(getAccessToken)如果服务器的OAuth正常工作 /token 端点已运行。

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

更新Claude配置文件以指向您的 workers.dev URL（例如： worker-name.account-name.workers.dev/sse)并重新启动克劳德

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

调试

如果出现任何问题，重启Claude或尝试直接连接到您的 MCP服务器在命令行上使用以下命令。

npx mcp-remote@latest http://localhost:8787/sse

在某些罕见的情况下，清除添加到的文件可能会有所帮助 ~/.mcp-auth

rm -rf ~/.mcp-auth

使用xkcd工具

这 xkcd 该工具获取一个随机的xkcd漫画图像URL及其alt文本。以下是如何使用它：

  1. 如上所述，使用MCP检查器或Claude Desktop连接到您的MCP服务器。
  2. 打电话给 xkcd 工具。

使用MCP检查器的示例：

  • 在MCP检查器中，选择 xkcd 从可用工具列表中选择工具。
  • 点击“调用”以获取一个随机的xkcd漫画。

使用Claude Desktop的示例：

  • 打开克劳德桌面，确保它已连接到您的MCP服务器。
  • 使用类似“使用xkcd工具获取随机xkcd漫画”的提示

响应将包括图像URL和随机xkcd漫画的alt文本。

相关 MCP