企业官网建设流程全解析

Skybridge 测试工具全家桶：DevTools、Tunnel、Playground、Evals 与 Audit 一网打尽

【免费下载链接】skybridgeSkybridge is a full-stack TypeScript framework for MCP Apps and ChatGPT Apps. Type-safe. React-powered. Platform-agnostic.项目地址: https://gitcode.com/gh_mirrors/skybr/skybridge

🎯 5 个测试工具，解决 MCP App 开发的 4 大验证难题

开发一个 MCP App 或 ChatGPT App，最折磨人的往往不是写功能，而是验证：我的工具模型会调用吗？界面在真实会话里长什么样？提交审核前有没有规格问题？

Skybridge 测试工具全家桶把这套流程拆成了 5 个各司其职的组件：本地调试用DevTools，真机联调用Tunnel，对话验证用Playground，自动化断言用Evals，提交前体检用Audit——无需手动搭环境，一条npm run dev就能全部就位。

⚡ 快速选型指南：一张表选对工具

5 个工具最大的区别在于：是否引入真实模型、真实宿主平台，以及是否可交互。官方文档给出了一张清晰的对照表（见 Test Your App 总览）：

核心思想一句话：从"零成本本地模拟"到"全真机验证"，按保真度逐级升级。下面逐个拆解。

🛠️ DevTools：本地秒级迭代，模拟宿主运行时

传统流程下，验证一次工具调用意味着：配置公网地址 → 注册连接器 → 发起对话 → 祈祷模型恰好调用到你改的那个工具。而 DevTools 把这条链路压缩成保存文件即刷新：它随 dev server 一起启动，模拟宿主运行时，让你直接调用任意工具、即时渲染视图，全程不经过模型、不依赖宿主。

npm run dev

启动后得到两个地址：http://localhost:3000/mcp是 MCP 服务器，http://localhost:3000/就是 DevTools 控制台。所有注册的工具自动出现在侧边栏，选一个工具即可看到完整的交互链路。

DevTools 的控制台提供 5 类核心能力（详见 DevTools 文档）：

• 工具控制：根据工具的 input schema 自动生成参数表单，可保存并复现调用；
• 工具输出：查看原始响应内容、状态、延迟与载荷大小；
• 状态检查器：以 JSON 树实时追踪视图状态的变化；
• 视图预览：即时切换主题、语言、设备类型，预览效果立刻更新；
• 上下文警告：工具输出超过约 5000 token、视图状态超过 20000 token 时亮出警告徽标，帮你尽早发现"挤占模型上下文"的隐患。

更实用的功能在工具栏的Preview：面板会变成一个模拟会话外壳，把你的真实视图放进侧边栏 + 消息流 + 输入框的环境中——多数"布局翻车"恰恰发生在这个场景里。你可以切换 ChatGPT / Claude 两种外壳、切换手机帧（390×844），预览中甚至会携带对应客户端真实的主题变量和容器尺寸。

⚠️需要知道：DevTools 是模拟而非生产，它不执行模型选工具、对话提示等链路，CSP 策略也比宿主宽松。想验证模型行为，请用下面两个工具。

🌍 Tunnel：一条命令打通 ChatGPT 与 Claude 真机联调

DevTools 验证不了"模型 + 真实宿主"的组合，Tunnel 补上这块：它把本地服务器暴露到一个公网 URL，让 ChatGPT 和 Claude 直接跑你的本地 App，同时保留保存文件即热更新的体验。

npm run dev -- --tunnel

启动后终端会打印一个公网地址（形如https://cool-marmot-xxx.alpic.dev/mcp）。把它填进宿主即可：

• ChatGPT：Plugins 页面点+，填入名称和该/mcp地址，即可在新对话中选用（需开启开发者模式）；
• Claude：Customize → Connectors → Add custom connector，填入名称和地址。

Tunnel 的两个贴心设计（见 Tunnel 文档）：

1. URL 稳定：隧道地址在重启间保持不变，插件只需注册一次，之后热更新一直有效——桌面端和移动端都会实时反映视图改动；
2. 日志回传终端：宿主 App 里没有控制台？Vite 的forwardConsole会把视图日志（默认错误级）打印到你运行 dev server 的终端里。

⚠️注意：ChatGPT 和 Claude 会在注册时缓存工具定义。增删工具或修改 schema 后，记得在宿主侧刷新插件，模型才能看到新定义。

💬 Playground：不注册宿主，直接和真实模型对话

有时你只想快速确认"模型能不能听懂我的工具描述"，走一遍完整宿主注册太麻烦。Playground 就是为此而生：一个接上你本地服务器的聊天窗口，真实 LLM使用你的工具，视图在对话中内联渲染。

它和 Tunnel 一起启动（同样的--tunnel参数），运行在隧道地址加/try后缀的页面（如https://xxx.alpic.dev/try），拿到链接的任何人用浏览器即可与你的 App 对话。

在对话里，你可以直接观察模型回路的 4 个关键环节（见 Playground 文档）：

• 工具选择：模型从你的工具名称和描述中理解到了什么；
• 参数填充：它如何依据 schema 填出输入参数；
• 结果叙述：它如何把工具输出转述到对话里；
• 状态同步：下一轮时它能从视图状态中读回什么。

Playground 验证的是"模型侧"的行为，但宿主侧的模型差异、状态推送策略等平台特性，仍需借助 Tunnel 在真机上确认。

🧪 Evals：在测试里断言"模型到底调用了什么"

工具能跑 ≠ 模型会调它。Evals 把"模型调用验证"变成了可重复执行的测试：@skybridge/test在进程内起一个真实对话，把模型发起的工具调用交给你断言，天然适合放进 CI。

配置分三步（完整说明见 Evals 文档）：

pnpm add -D @skybridge/test vitest@^4 ai @ai-sdk/anthropic

// vite.config.ts：在 Vite 插件中开启 evals skybridge({ evals: {} })

然后编写场景文件（evals/**/*.eval.ts）：

const chat = await start({ app, model: anthropic("claude-sonnet-4-5") }); await chat.send("Find me running shoes under 100 dollars"); expect.chat(chat).toHaveCalledToolWith("search-products", { query: "running shoes", });

几个让 Evals 格外好用的设计：

• 类型安全断言：expect.chat(chat)基于你的 App 类型推导，工具名自动补全、参数按 schema 校验。内置toHaveCalledToolOnce、toHaveCalledToolsInOrder、toNeverHaveCalledTool等 8 个匹配器；
• AI 裁判：语气、预算控制这类难写死断言的行为，可交给toPassJudgment让裁判模型按标准打分，失败信息直接附带裁判理由；
• 结果打桩：stubs可为易变的工具（如今日日期、实时目录）固定返回，让场景今天过、下个月还过；
• 鉴权场景：通过authInfo为会话声明身份，真实执行 scope 检查。

仓库里有一个完整的可参考示例 examples/evals/，其中 search.eval.ts 演示了基础断言，judgment.eval.ts 演示了 AI 裁判，断言匹配器实现位于 packages/test/src/matchers/。

⚠️提示：Evals 是真实的模型调用，有成本且措辞会有波动。保持temperature: 0，优先断言工具调用而非精确措辞。

✅ Audit：提交审核前的最后一次全面体检

平台审核之前，服务器必须符合 MCP 官方规范，而 OpenAI 与 Anthropic 各自还叠加了不同的提交要求。Audit 一次查全：MCP 协议一致性、视图资源要求（元数据、CSP、注解）、各平台的提交规范，并在真实的 ChatGPT 和 Claude 会话中触发工具、渲染视图，验证 App 真的能跑起来。

启动方式：先开 Tunnel，再点 DevTools 头部菜单的Audit按钮。

报告包含总体评分、各平台的就绪状态、以及逐条问题（严重级别、受影响组件、修复方案）。最有意思的是Improve your score按钮：它能把整份报告转成一段提示词，直接交给编码代理自动修复全部问题。

当前限制：暂不支持受 OAuth 保护的服务器（见 Audit 文档）。

🗺️ 推荐工作流：四级验证漏斗

把 5 个工具串起来，就是一条由浅入深的完整测试流水线：

💡 经验法则：日常改动永远先过 DevTools；只有当"模型"或"平台"成为怀疑对象时，才升级到更贵的真机工具。这样既保真，又不把调试成本拉爆。

📚 参考资料

• 测试工具总览与选型表：docs/test/index.mdx
• DevTools 完整文档：docs/test/devtools.mdx
• Tunnel 真机联调文档：docs/test/tunnel.mdx
• Playground 对话测试文档：docs/test/playground.mdx
• Evals 断言测试文档：docs/test/evals.mdx
• Audit 提交体检文档：docs/test/audit.mdx
• Evals 测试运行时源码：packages/test/src/
• DevTools 组件源码：packages/devtools/src/
• Evals 完整示例项目：examples/evals/

【免费下载链接】skybridgeSkybridge is a full-stack TypeScript framework for MCP Apps and ChatGPT Apps. Type-safe. React-powered. Platform-agnostic.项目地址: https://gitcode.com/gh_mirrors/skybr/skybridge