内容
# 在Cloudflare上远程运行MCP服务器
让我们在Cloudflare Workers上启动一个远程MCP服务器,并完成OAuth登录!
## 本地开发
```bash
# 克隆仓库
git clone git@github.com:cloudflare/ai.git
# 安装依赖
cd ai
npm install
# 本地运行
npx nx dev remote-mcp-server
```
你应该能够在浏览器中打开 [`http://localhost:8787/`](http://localhost:8787/)
## 将MCP Inspector连接到你的服务器
要探索你的新MCP API,你可以使用 [MCP Inspector](https://modelcontextprotocol.io/docs/tools/inspector)。
- 使用 `npx @modelcontextprotocol/inspector` 启动它
- [在Inspector中](http://localhost:5173),将传输类型(Transport Type)切换为 `SSE`,并输入 `http://localhost:8787/sse` 作为要连接的MCP服务器的URL,然后点击“连接”
- 你将导航到一个(模拟的)用户/密码登录界面。输入任意电子邮件和密码进行登录。
- 你应该会被重定向回MCP Inspector,现在你可以列出并调用任何定义的工具!
<div align="center">
<img src="img/mcp-inspector-sse-config.png" alt="带有上述配置的MCP Inspector" width="600"/>
</div>
<div align="center">
<img src="img/mcp-inspector-successful-tool-call.png" alt="工具调用后的MCP Inspector" width="600"/>
</div>
## 将Claude Desktop连接到你的本地MCP服务器
MCP Inspector很棒,但我们真的想将其连接到Claude!请按照 [Anthropic的快速入门](https://modelcontextprotocol.io/quickstart/user) 的指示,在Claude Desktop中转到设置 > 开发者 > 编辑配置,以找到你的配置文件。
在文本编辑器中打开该文件,并用以下配置替换它:
```json
{
"mcpServers": {
"math": {
"command": "npx",
"args": [
"mcp-remote",
"http://localhost:8787/sse"
]
}
}
}
```
这将运行一个本地代理,并让Claude通过HTTP与MCP服务器通信。
当你打开Claude时,应该会打开一个浏览器窗口并允许你登录。你应该在右下角看到可用的工具。给出正确的提示,Claude应该会请求调用该工具。
<div align="center">
<img src="img/available-tools.png" alt="点击锤子图标显示可用工具列表" width="600"/>
</div>
<div align="center">
<img src="img/claude-does-math-the-fancy-way.png" alt="Claude回答提示'我似乎丢失了我的计算器,手指也用完了。你能用数学工具加23和19吗?',通过调用MCP加法工具" width="600"/>
</div>
## 部署到Cloudflare
1. `npx wrangler kv namespace create OAUTH_KV`
2. 按照指导将kv命名空间ID添加到 `wrangler.jsonc`
3. `npm run deploy`
## 从远程MCP客户端调用你新部署的远程MCP服务器
就像你在“本地开发”中所做的那样,运行MCP Inspector:
`npx @modelcontextprotocol/inspector@latest`
然后在Inspector中输入你的Worker的 `workers.dev` URL(例如:`worker-name.account-name.workers.dev/sse`)作为要连接的MCP服务器的URL,并点击“连接”。
你现在已经从远程MCP客户端连接到你的MCP服务器。
## 将Claude Desktop连接到你的远程MCP服务器
更新Claude配置文件,使其指向你的 `workers.dev` URL(例如:`worker-name.account-name.workers.dev/sse`),并重启Claude。
```json
{
"mcpServers": {
"math": {
"command": "npx",
"args": [
"mcp-remote",
"https://worker-name.account-name.workers.dev/sse"
]
}
}
}
```
## 调试
如果出现任何问题,重启Claude可能会有所帮助,或者尝试使用以下命令直接连接到你的MCP服务器。
```bash
npx mcp-remote http://localhost:8787/sse
```
在一些罕见的情况下,清除添加到 `~/.mcp-auth` 的文件可能会有所帮助。
```bash
rm -rf ~/.mcp-auth
```