一句话生成能跑真 bash 的 HTML 小应用
普通 HTML 预览是静态的 —— 同源沙箱会拦掉它拉真实数据。Cockpit 现在往预览里注入了一个 `window.cockpit` SDK,于是 `/html` 生成的小应用,按钮就能 `curl`、读写文件、跑脚本。把它收藏进 HTML 面板,随时再打开。
你让 agent 做「一个看仓库 star 数的小看板」,它写了一个清清爽爽的 .html,你打开预览 —— 死的。页面想 fetch() 一个 API,同源沙箱一个 CORS 错误把它掐了。渲染出来的 HTML 预览一直是隔着玻璃的画:能排版,但什么也做不了。
这个版本把玻璃打碎了。Cockpit 现在往预览里注入一个 window.cockpit SDK —— 本质就是 Bash 工具暴露给页面。按钮能 curl 拉数据、读写文件、tail 日志。一份静态文件变成了有后端的真·小应用。
/html —— 一句话生成一个
这是个内置斜杠命令,和 /qa、/fx 同一个菜单:
/html 做一个 Surething-io/cockpit 仓库的看板 —— star、fork、最近提交
Cockpit 会挂上一份内置 prompt,教模型做一个小应用,并且 —— 关键 —— 通过 cockpit.bash('curl ...') 取数据,而不是会被 CORS 拦掉的直连 fetch()。AI 用 Write 工具产出文件,你打开就能点。
默认你拿到的是一个 React 小应用(零构建 —— React、Babel、主题都由 Cockpit 本地托管,离线可用),自动套用 Cockpit 主题、带亮/暗。极简单的单视图页则退回一份内联 HTML。聊天预览里可在渲染和原文之间切换 —— 侧边栏会列出入口文件和它牵出的每个同级文件(app.jsx、api.mjs、图片…)。
页面里能跑 bash
SDK 在页面加载时就绪,不用引任何库:
| API | 作用 |
|---|---|
cockpit.cwd | 当前 HTML 文件所在目录;相对命令默认在这里执行 |
cockpit.bash(command, opts?) | 执行一条 bash 命令,对齐 Bash 工具 |
短命令用前台,长/实时命令用后台:
// 前台 —— await 拿到完整结果
const { stdout, exitCode } = await cockpit.bash("curl -s https://api.github.com/repos/Surething-io/cockpit");
const repo = JSON.parse(stdout);
// 后台 —— 流式看日志,用完 kill()
const h = cockpit.bash("tail -f ./build.log", {
background: true,
onOutput: c => box.textContent += c,
});
逻辑再复杂一点,AI 会把后端写成页面同目录的一个脚本文件,CGI 式地调它 —— cockpit.bash("node ./api.js")。HTML 管前端,脚本当处理器。
收藏、再打开、/名字 唤起
页面只要在 <head> 里声明几个 meta(cockpit-name、description、cockpit-icon),就能进 HTML 面板。之后:
- 从聊天预览、Explorer 文件浏览器收藏它,或直接在 Console 浏览器气泡里打开 —— 只要有
.html露面,那两个按钮就在。 - HTML 面板(Console 输入栏上的一个按钮)是你存过的所有小应用的卡片墙 —— 预览、删除、复制路径,点一下就跑。
- 在 Console 输入栏打
/,你的小应用排在自定义命令前面。/repo-dashboard就在气泡里打开它。这个短名就是 meta 头里的cockpit-name。
登记表就是 ~/.cockpit/html.json,只存绝对路径 —— 和 skills.json 一样的机制。HTML 文件留在你项目里;面板只是个书签夹。
实话实说
cockpit.bash 是一条真实的命令执行通道 —— 等同于在你机器上开一个 shell。所以要当心:在 Cockpit 里预览一个本地 .html,会以你的权限执行它的脚本,风险和你亲手运行这个文件完全一样 —— 不信任的 .html 就别去预览、也别收藏。它服从 Cockpit 启动时的令牌门:本机开放,设了 --token 就校验。
试一下
更新 Cockpit,打开一个聊天,/html 后面写点你想看的东西。点开预览,然后收藏它。细节见 HTML 小应用文档。