Build HTML Apps That Run Bash

You ask an agent for "a small dashboard for my repo's stars," it writes a tidy .html, you open the preview — and it's dead. The page tries to fetch() an API and the same-origin sandbox kills it with a CORS error. A rendered HTML preview has always been a picture behind glass: it can lay out, but it can't do anything.

This release breaks the glass. Cockpit now injects a window.cockpit SDK into the preview — essentially the Bash tool, exposed to the page. A button can curl for data, read and write files, tail a log. A static file becomes a real mini-app with a backend.

/html — generate one from a prompt

It's a built-in slash command, same menu as /qa and /fx:

/html a dashboard for the Surething-io/cockpit repo — stars, forks, recent commits

Cockpit attaches a built-in prompt that teaches the model to build a small app and — crucially — to fetch data through cockpit.bash('curl ...') instead of a direct fetch() that CORS would block. The AI uses the Write tool, and you get something you can open and click.

By default you get a React app (zero-build — React, Babel and the theme are hosted locally by Cockpit, so it runs offline), styled to match Cockpit with light/dark. A trivial one-view page falls back to a single inline HTML file. In the chat preview you can flip between the rendered app and its source — a sidebar lists the entry file plus every sibling it pulls in (app.jsx, api.mjs, images…).

The page can run bash

The SDK is ready on load — no library to import:

Foreground for short commands, background for long ones:

// foreground — await the full result
const { stdout, exitCode } = await cockpit.bash("curl -s https://api.github.com/repos/Surething-io/cockpit");
const repo = JSON.parse(stdout);

// background — stream a live log, kill() when done
const h = cockpit.bash("tail -f ./build.log", {
  background: true,
  onOutput: c => box.textContent += c,
});

For anything more involved, the AI writes the backend as a script file next to the page and calls it CGI-style — cockpit.bash("node ./api.js"). HTML is the frontend, the script is the handler.

Bookmark it, reopen it, /name it

A page earns a spot in the HTML panel by declaring a few <head> meta tags (cockpit-name, description, cockpit-icon). After that:

• Bookmark it from the chat preview, the Explorer file browser, or open it straight into a Console browser bubble — the two buttons are everywhere a .html shows up.
• The HTML panel (opened from the first icon in the sidebar Apps dock) is a card grid of everything you've saved — click to preview, open in a Console bubble, delete, or copy the path.
• Type / in the Console input bar and your apps appear ahead of custom commands. /repo-dashboard opens it in a bubble. The short name is the cockpit-name from the meta head.

The registry is just ~/.cockpit/html.json holding absolute paths — the same mechanism as skills.json. The HTML files stay in your project; the panel is a bookmark folder.

The honest part

cockpit.bash is a real command-execution channel — equivalent to a shell on your machine. So be careful: previewing a local .html in Cockpit executes its scripts with your privileges, exactly as risky as running the file yourself — don't preview or bookmark an .html you don't trust. It obeys Cockpit's startup token gate: open on localhost, validated when you set --token.

Try it

Update Cockpit, open a chat, and type /html with something you'd like to see. Click the preview, then bookmark it. Details in the HTML Apps docs.

Try it: npm i -g @surething/cockpit · GitHub · Try Online