Michaelliv/pi-generative-ui

Claude.ai's generative UI — reverse-engineered, rebuilt for pi. Interactive HTML/SVG widgets in native macOS windows.

# pi-generative-ui Claude.ai's generative UI - reverse-engineered, rebuilt for [pi](https://github.com/badlogic/pi-mono). Ask pi to "show me how compound interest works" and get a live interactive widget - sliders, charts, animations - rendered in a native window. Not a screenshot. Not a code block. A real HTML application with JavaScript, streaming live as the LLM generates it. Runs on macOS, Linux, and Windows via [Glimpse](https://github.com/hazat/glimpse) 0.8+. ## How it works On claude.ai, when you ask Claude to visualize something, it calls a tool called `show_widget` that renders HTML inline in the conversation. The HTML streams live - you see cards, charts, and sliders appear as tokens arrive. This extension replicates that system for pi: 1. **LLM calls `visualize_read_me`** - loads design guidelines (lazy, only the relevant modules) 2. **LLM calls `show_widget`** - generates an HTML fragment as a tool call parameter 3. **Extension intercepts the stream** - opens a native window via [Glimpse](https://github.com/hazat/glimpse) and feeds partial HTML as tokens arrive 4. **[morphdom](https://github.com/patrick-steele-idem/morphdom) diffs the DOM** - new elements fade in smoothly, unchanged elements stay untouched 5. **Scripts execute on completion** - Chart.js, D3, Three.js, anything from CDN 6. **Hover any ` ` for export** - built-in floating menu copies SVG to clipboard or saves it via the native Save dialog The widget window has full browser capabilities. Widgets are display-only from the agent's perspective — there's no return channel for clicks or input. In-widget interactivity (sliders, hover states, animations, controls that drive the widget's own DOM) is fully supported. Features that need host-side capabilities (like SVG copy/save) call into the