MCP Apps远程测试指南：用cloudflared隧道连接Claude.ai-开发者社区

MCP Apps远程测试指南：用cloudflared隧道连接Claude.ai

【免费下载链接】ext-appsOfficial repo for spec & SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers项目地址: https://gitcode.com/GitHub_Trending/ex/ext-apps

想把自己写的 MCP App 真正跑进 Claude.ai 对话里吗？本文是一份 MCP Apps 远程测试指南，教你用 cloudflared 隧道把本地 MCP 服务器暴露到公网，几步就把你的交互 UI 嵌入 Claude.ai。整个流程不超过 5 分钟，零注册、零配置，是验证 MCP App 在真实对话环境中表现的最快方式。

为什么要做 MCP Apps 远程测试 🤔

MCP Apps 让 MCP 工具不再只返回文本——你的工具可以携带一个ui://界面资源，宿主（Host）在沙箱 iframe 里把它渲染成交互式 UI：图表、表单、仪表盘、播放器都行。

仓库提供了两种测试路径（见 docs/testing-mcp-apps.md）：

测试方式	适用场景	能否体验真实对话环境
basic-host 参考宿主	本地开发、调试消息流	❌ 无 AI 对话
Claude.ai 等 MCP Apps 兼容宿主	端到端验收	✅ 完整对话流

而 Claude.ai 是远程宿主，它访问不到你机器上的localhost。解决办法：用 cloudflared 给本地服务器套一层公网隧道——这就是本文的主角。

第一步：本地启动一个 MCP App 服务器 🚀

以仓库自带的 quickstart 示例为最简测试对象（它注册了一个带 UI 的get-time工具，见 server.ts）：

git clone https://gitcode.com/GitHub_Trending/ex/ext-apps cd ext-apps/examples/quickstart npm install npm start

启动后服务器监听在http://localhost:3001/mcp（端口逻辑在 main.ts）。

💡 建议先本地验证一次：仓库根目录运行npm start可打开 basic-host，选中服务器和工具、点击 "Call Tool"，确认界面能正常渲染：

第二步：用 cloudflared 一键创建公网隧道 🔧

cloudflared 的 quick tunnel 模式无需账号。在另一个终端里执行：

npx cloudflared tunnel --url http://localhost:3001

终端会打印一串类似这样的地址：

https://random-name.trycloudflare.com

这就是你的 MCP 服务器公网入口。记住两个细节：

完整端点要追加/mcp路径，即https://random-name.trycloudflare.com/mcp
⚠️ 每次重启 cloudflared，隧道域名都会重新生成，需要在宿主端重新填写

第三步：在 Claude.ai 添加远程 MCP 服务器 ✅

在 Claude.ai 的设置里添加一个Remote MCP Server（over HTTP），把上一步的完整端点填进去，例如：

https://random-name.trycloudflare.com/mcp

保存后，直接向 Claude 提一个与工具相关的任务，比如"查一下服务器时间"。Claude 会调用get-time工具，并在对话里内联渲染出你的 MCP Apps 界面：

如果 Claude 正确调用并渲染 UI，恭喜——你的远程测试已经跑通！🎉

远程测试常见问题排查 🩺

现象	可能原因与处理
Claude 连不上服务器	确认 MCP 服务器和 cloudflared 都在运行；确认端点带了`/mcp`路径
之前能连现在断了	隧道重启后域名变了，更新 Claude.ai 里的 URL
工具调通了但界面空白	检查 UI 资源构建产物是否存在（quickstart 的`dist/mcp-app.html`），可先用 basic-host 本地排查
不确定消息流是否正确	打开 basic-host 的 Tool Input / Tool Result / Messages 面板，或看浏览器控制台带`[HOST]`前缀的日志