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.tsgit 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 Serverover 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]前缀的日志延伸阅读官方测试文档含 basic-host 调试技巧docs/testing-mcp-apps.md手把手构建你的第一个 MCP Appdocs/quickstart.md各框架示例服务器React / Vue / Svelte / Preact / Solid / Vanilla JSexamples/项目总览与支持的客户端列表README.md协议规范specification/2026-01-26/apps.mdx一句话总结本地npm start→npx cloudflared tunnel→ Claude.ai 填 URL 加/mcp三步完成 MCP Apps 远程测试。现在就去试试吧【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
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.tsgit 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 Serverover 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]前缀的日志延伸阅读官方测试文档含 basic-host 调试技巧docs/testing-mcp-apps.md手把手构建你的第一个 MCP Appdocs/quickstart.md各框架示例服务器React / Vue / Svelte / Preact / Solid / Vanilla JSexamples/项目总览与支持的客户端列表README.md协议规范specification/2026-01-26/apps.mdx一句话总结本地npm start→npx cloudflared tunnel→ Claude.ai 填 URL 加/mcp三步完成 MCP Apps 远程测试。现在就去试试吧【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考