← all repositories
Michaelliv/pi-generative-ui

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.

1.1k stars TypeScript Coding AssistantsApp Builders
pi-generative-ui
Velocity · 7d
+13
★ / day
Trend
steady
star history

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.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.