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服務器了！