Reverse-engineering Claude's live widgets for a terminal AI agent
An extension that lets the pi coding agent spawn interactive HTML visualizations in native macOS windows as the LLM streams them.

What it does
This is a pi extension that intercepts the AI’s tool calls and opens a native WKWebView window whenever the model decides a request needs charts, sliders, diagrams, or animations instead of text. The HTML streams live—tokens arrive, morphdom diffs the DOM, and new elements fade in at 0.3s. When the stream ends, scripts execute. You get Chart.js, D3, or raw Canvas running in a real browser surface, not a code block.
The interesting bit
The 72KB of design guidelines weren’t written by hand—they were extracted verbatim from claude.ai by exporting conversation JSON, parsing the read_me tool results, and reconstructing Anthropic’s actual production rules. Four of five modules match byte-for-byte; the fifth is off by one whitespace character. The extension essentially gives pi the same brief Claude gets.
Key highlights
- Five lazy-loaded guideline modules (interactive, chart, mockup, art, diagram) totaling ~136KB of deduplicated design system
- 150ms debounced morphdom diffing for smooth streaming updates without full-page flashes
- Glimpse opens a native macOS WKWebView in under 50ms—no Electron, no browser tab
- Bidirectional bridge:
window.glimpse.send(data)pipes user interactions back to the agent - Swift toolchain compiles automatically on
npm install
Caveats
- macOS only; requires Xcode or Command Line Tools for the Swift build step
- The LLM decides when to trigger widgets, so inconsistent or vague prompts may just get text replies
Verdict
Worth a look if you’re already using pi on macOS and tired of reading about compound interest instead of sliding it. Skip it if you’re on Linux, Windows, or allergic to Swift toolchains.