pi-generative-ui

Claude.ai's generative UI - reverse-engineered, rebuilt for pi.

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 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 and feeds partial HTML as tokens arrive
4. 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 <svg> 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 host via window.__glimpseUI.rpc(method, params).

Install

pi install git:github.com/Michaelliv/pi-generative-ui

Cross-platform — Glimpse 0.8 compiles a tiny native binary on postinstall:

• macOS — Xcode Command Line Tools (xcode-select --install)
• Linux — Rust + GTK4/WebKitGTK dev packages, or just use the Chromium fallback (any Chromium-based browser)
• Windows — .NET 8 SDK + WebView2 Runtime

Usage

Just ask pi to visualize things. The extension adds two tools that the LLM calls automatically:

• "Show me how compound interest works" → interactive explainer with sliders and Chart.js
• "Visualize the architecture of a transformer" → SVG diagram with labeled components
• "Create a dashboard for this data" → metric cards, charts, tables
• "Draw a particle system" → Canvas animation

The LLM decides when to use widgets vs text based on the request. Explanatory/visual requests trigger widgets; code/text requests stay in the terminal.

What's inside

The guidelines - extracted from Claude

The design guidelines aren't hand-written. They're extracted verbatim from claude.ai.

Here's the trick: you can export any claude.ai conversation as JSON. The export includes full tool call payloads - including the complete read_me tool results containing Anthropic's actual design system. 72K of production rules covering typography, color palettes, streaming-safe CSS patterns, Chart.js configuration, SVG diagram engineering, and more.

We triggered read_me with each module combination, exported the conversation, parsed the JSON, split the responses into deduplicated sections, and verified byte-level accuracy against the originals. The result: our LLM gets the exact same instructions Claude gets on claude.ai.

Five modules, loaded on demand:

Module	Size	What it covers
interactive	19KB	Sliders, metric cards, live calculations
chart	22KB	Chart.js setup, custom legends, number formatting
mockup	19KB	UI component tokens, cards, forms, skeleton loading
art	17KB	SVG illustration, Canvas animation, creative patterns
diagram	59KB	Flowcharts, architecture diagrams, SVG arrow systems

Streaming architecture

The extension intercepts pi's streaming events (toolcall_start / toolcall_delta / toolcall_end). A WidgetSession owns one Glimpse window for the duration of a show_widget call:

toolcall_start    → new WidgetSession(open, {title, width, height})
toolcall_delta    → session.onChunk(html)     # debounced 150ms
toolcall_end      → session.onComplete(html)  # final + run scripts
execute()         → returns immediately; window stays open

The agent's tool call resolves the moment the final HTML lands; the window stays open until the user dismisses it. No 2-minute "waiting for interaction" timeout.

The page-side runtime is a real TypeScript module bundled by esbuild into a single IIFE inlined into the shell HTML. It speaks a typed JSON protocol with the host: {type: "content", html, final} host→page, {type: "user-message" | "rpc-call", ...} page→host. No escapeJS, no eval-strings-as-business-logic.

Key details:

• One source of truth per concern — protocol types in protocol.ts, window shape in glimpse-window.ts, OS bindings in platform/{darwin,linux,win32}.ts
• Typed RPC — features register {name, handler} once; widget code calls window.__glimpseUI.rpc(method, params) with a 30s default timeout
• morphdom DOM diffing — only changed nodes update; new nodes get a 0.3s fade-in animation; scripts run exactly once on the final chunk
• 150ms debounce — batches rapid token updates for smooth visual rendering
• Dark mode by default — #1a1a1a background

Glimpse

Glimpse is a native macOS micro-UI library. It opens a WKWebView window in under 50ms via a tiny Swift binary. No Electron, no browser tab, no runtime dependencies beyond the system WebKit.

The Swift source compiles automatically on npm install via postinstall.

Project structure

pi-generative-ui/
├── .pi/extensions/generative-ui/
│   ├── index.ts                 # Tool registration; streaming → session handoff
│   ├── session.ts               # WidgetSession — owns one window for its lifetime
│   ├── rpc.ts                   # Host-side RPC: routes rpc-call, forwards user-message
│   ├── protocol.ts              # Shared discriminated-union message types
│   ├── glimpse-window.ts        # Structural type for a Glimpse window
│   ├── features/svg-saver.ts    # svg.copy / svg.save RPC handlers
│   ├── platform/{darwin,linux,win32}.ts  # OS clipboard + save-dialog shims
│   ├── runtime/                 # Page-side TypeScript (bundled by build.mjs)
│   │   ├── index.ts             #   Boot: bridge + morph loop + features
│   │   ├── bridge.ts            #   Host↔page channel + RPC layer
│   │   ├── morph.ts             #   morphdom + runScripts
│   │   └── features/svg-saver.ts#   Hover menu UI
│   ├── runtime.bundle.ts        # AUTO-GENERATED: shell HTML + IIFE'd runtime
│   ├── build.mjs                # esbuild step → runtime.bundle.ts
│   ├── guidelines.ts            # 72K of verbatim claude.ai design guidelines
│   └── claude-guidelines/       # Raw extracted markdown (reference)
├── tests/                       # protocol + rpc + session + platform + integration
└── package.json                 # pi-package manifest

Rebuild the page-side bundle with npm run build:runtime after editing anything under runtime/. The bundle is committed so end users don't need a build step.

How the guidelines were extracted

1. Start a conversation on claude.ai that triggers show_widget
2. Call read_me with each module combination (art, chart, diagram, interactive, mockup)
3. Export the conversation as JSON from claude.ai settings
4. Parse the JSON - every tool_result for visualize:read_me contains the complete guidelines
5. Split each response at ## heading boundaries
6. Deduplicate shared sections (e.g., "Color palette" appears in chart, mockup, interactive, diagram)
7. Verify reconstruction matches the originals (4/5 exact, 1 has a single whitespace char difference)

The raw read_me responses are preserved in claude-guidelines/ - the original markdown exactly as claude.ai returned it, before splitting and deduplication. The conversation export JSON is not included in this repo.

Credits

• pi - the extensible coding agent that makes this possible
• Glimpse - native macOS WKWebView windows
• morphdom - DOM diffing for smooth streaming
• Anthropic - for building the generative UI system we reverse-engineered

License

MIT