SuperAPI AI 工具集

next-dev-loop

通用与其它

查看项目

更新于 10-16 00:20

技能介绍

用途:在 next dev 运行期间建立“编辑—验证”节奏,确认代码改动在运行时确实生效,而不只是编译或类型检查通过。

主要能力:通过两个视角观察同一个运行中的应用。/_next/mcp 是 Next.js 暴露的 HTTP 端点,了解路由、segment、RSC、server actions、服务端日志和错误;agent-browser 是驱动真实 Chrome 的 CLI,了解 DOM、控制台、网络、React fiber 和 vitals。两者互相交叉验证。

使用方式:先做 preflight,确认两个视角可用。用 agent-browser session id --scope worktree --prefix next-dev-loop 生成稳定会话 id,并导出 AGENT_BROWSER_SESSION 与 AGENT_BROWSER_RESTORE,再以 agent-browser --session "$SESSION" --restore --enable react-devtools open <url> 打开目标 URL。探测 /_next/mcp 的 tools/list,确认存在 get_compilation_issues,并用 get_routes 获取路由图。编辑前用运行时信息缩小范围,编辑后依次检查:能否编译、是否无错误运行、行为是否符合预期、React 层行为是否正常。结束时用 agent-browser --session "$SESSION" --restore close 关闭会话。

适用场景:Next.js 应用开发中的改动验证,尤其是需要确认运行时行为、React 渲染、服务端错误或路由变化时。

限制:需要 Next.js 16.3+ 且使用 Turbopack,以及 agent-browser >= 0.31.1,这是硬性下限,缺失时应提示升级并停止,不要退回到 grep 源码或更弱的探测。开发服务器运行期间不要移动或删除 .next。两个视角不一致时优先怀疑工具会话问题。/_next/mcp 回复为 SSE,需从 data: 行读取 JSON。get_errors 和 get_page_metadata 需要至少一次导航。仅在项目已加载托管反馈说明时才参与反馈。