尧图网页设计 
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❌❌✅在 ChatGPT / Claude 里验证Tunnel✅✅✅观察模型如何驱动你的 AppPlayground✅❌✅在 CI 中断言模型的工具调用Evals✅❌❌提交审核前全面体检Audit✅✅❌核心思想一句话从零成本本地模拟到全真机验证按保真度逐级升级。下面逐个拆解。️ 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。把它填进宿主即可ChatGPTPlugins 页面点填入名称和该/mcp地址即可在新对话中选用需开启开发者模式ClaudeCustomize → Connectors → Add custom connector填入名称和地址。Tunnel 的两个贴心设计见 Tunnel 文档URL 稳定隧道地址在重启间保持不变插件只需注册一次之后热更新一直有效——桌面端和移动端都会实时反映视图改动日志回传终端宿主 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.tsconst 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 个工具串起来就是一条由浅入深的完整测试流水线阶段工具触发频率成本1️⃣ 写代码时DevTools每次保存零2️⃣ 怀疑模型行为时Playground按需低对话计费3️⃣ 锁定宿主行为时Tunnel按需低4️⃣ 每次提交代码时EvalsCI 自动中模型计费5️⃣ 提交审核前Audit发布前中 经验法则日常改动永远先过 DevTools只有当模型或平台成为怀疑对象时才升级到更贵的真机工具。这样既保真又不把调试成本拉爆。 参考资料测试工具总览与选型表docs/test/index.mdxDevTools 完整文档docs/test/devtools.mdxTunnel 真机联调文档docs/test/tunnel.mdxPlayground 对话测试文档docs/test/playground.mdxEvals 断言测试文档docs/test/evals.mdxAudit 提交体检文档docs/test/audit.mdxEvals 测试运行时源码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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Skybridge 测试工具全家桶：DevTools、Tunnel、Playground、Evals 与 Audit 一网打尽
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❌❌✅在 ChatGPT / Claude 里验证Tunnel✅✅✅观察模型如何驱动你的 AppPlayground✅❌✅在 CI 中断言模型的工具调用Evals✅❌❌提交审核前全面体检Audit✅✅❌核心思想一句话从零成本本地模拟到全真机验证按保真度逐级升级。下面逐个拆解。️ 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。把它填进宿主即可ChatGPTPlugins 页面点填入名称和该/mcp地址即可在新对话中选用需开启开发者模式ClaudeCustomize → Connectors → Add custom connector填入名称和地址。Tunnel 的两个贴心设计见 Tunnel 文档URL 稳定隧道地址在重启间保持不变插件只需注册一次之后热更新一直有效——桌面端和移动端都会实时反映视图改动日志回传终端宿主 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.tsconst 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 个工具串起来就是一条由浅入深的完整测试流水线阶段工具触发频率成本1️⃣ 写代码时DevTools每次保存零2️⃣ 怀疑模型行为时Playground按需低对话计费3️⃣ 锁定宿主行为时Tunnel按需低4️⃣ 每次提交代码时EvalsCI 自动中模型计费5️⃣ 提交审核前Audit发布前中 经验法则日常改动永远先过 DevTools只有当模型或平台成为怀疑对象时才升级到更贵的真机工具。这样既保真又不把调试成本拉爆。 参考资料测试工具总览与选型表docs/test/index.mdxDevTools 完整文档docs/test/devtools.mdxTunnel 真机联调文档docs/test/tunnel.mdxPlayground 对话测试文档docs/test/playground.mdxEvals 断言测试文档docs/test/evals.mdxAudit 提交体检文档docs/test/audit.mdxEvals 测试运行时源码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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考