Claude generative UI, Anthropic’s newly launched feature for rendering interactive widgets inside chat conversations, has been reverse-engineered by developer Michael Livs, who subsequently built an open-source implementation for terminal-based coding agents.
Livs documented the full technical investigation on his blog. The work covers how Anthropic implemented the feature, how the streaming architecture functions, and how he replicated the behavior outside a browser environment.
How Claude Generative UI Works Under the Hood
The feature does not render HTML as part of Claude’s markdown output. Instead, Claude calls an internal tool named show_widget, passing raw HTML as a parameter payload. The tool accepts four fields: a boolean flag (i_have_seen_read_me), a snake_case title, 1–4 loading messages, and the widget HTML fragment itself.
Before calling show_widget, Claude must first call a read_me tool that loads design guidelines on demand. The tool accepts a modules parameter with values such as interactive, chart, diagram, mockup, and art. Each module returns a different subset of Anthropic’s internal design system, keeping the base system prompt lean and loading specialized rules only when needed.
Livs also determined that the widgets are not rendered inside iframes. CSS variables resolve correctly, a parent-page function called sendPrompt() is accessible to widget code, and the background is transparent — all indicators of direct DOM injection into the parent document. The security boundary is a Content Security Policy restricting script sources to a small CDN allowlist: cdnjs.cloudflare.com, cdn.jsdelivr.net, unpkg.com, and esm.sh.
Differences Between Generative UI and Claude Artifacts
Livs drew a clear distinction between the new visualizer and Claude’s existing Artifacts feature. Artifacts are persistent deliverables displayed in a side panel with a download button, using a fixed set of pre-bundled libraries. The generative UI visualizer, by contrast, renders inline in the conversation, is ephemeral, and can load any library from the CDN allowlist at runtime.
The trigger language also differs. Deliverable-oriented prompts such as “Build me a calculator” produce Artifacts, while explanatory prompts such as “Show me how compound interest works” produce inline widgets. Moreover, the CDN allowlist exists specifically to support live library fetching — Chart.js, D3, and Three.js can all be loaded on demand.
Building a Terminal Implementation with Glimpse and morphdom
To replicate the experience in a terminal environment, Livs used Glimpse, a native macOS library that opens a WKWebView window in under 50 milliseconds via a small Swift binary with a Node.js wrapper. The library requires no Electron installation and supports bidirectional JSON communication between the WebView and the host process.
The extension registers two tools mirroring Claude’s pattern: visualize_read_me for lazy-loading design guidelines, and show_widget for opening a native window with the generated HTML. The implementation is built on pi, a terminal-based artificial intelligence coding agent that normalizes streaming events across providers including Anthropic, OpenAI, and Google.
Smooth streaming required several iterations. Replacing the entire document on every token caused full-page flashes. Naive DOM appending failed because browsers auto-close unclosed tags in partial HTML, producing unpredictable tree structures. The final solution uses morphdom, a DOM diffing library, to apply minimal patches on each update and animate only genuinely new nodes with a CSS fade-in effect.
Extracted Design Guidelines Reveal Anthropic’s Internal System
By inspecting network requests in browser developer tools, Livs extracted the complete text of Anthropic’s design guidelines as returned by the read_me tool. The guidelines cover streaming-first HTML structure, a prohibition on gradients and shadows during streaming, a nine-ramp color palette with seven stops each, SVG diagram engineering rules, Chart.js-specific patterns, and UI component tokens for mockups.
Livs triggered the read_me tool with all five module combinations across multiple sessions. He then wrote a script to parse the responses, split them at heading boundaries, deduplicate shared sections, and verify that recombining the sections produced byte-identical output. The result was 10 unique sections covering all five modules, with four of five producing exact matches and one differing by a single whitespace character.
The complete open-source extension is approximately 350 lines of TypeScript across two files and is available on GitHub under the repository pi-generative-ui. The project depends on the glimpseui package and loads morphdom from a CDN at runtime inside the WebView. Furthermore, the extension is auto-discovered by pi on startup with no additional configuration required.