This project reverse-engineers Claude.ai's generative UI to enable interactive HTML/SVG widgets within native macOS windows for the pi AI agent. It allows users to ask pi to visualize concepts, receiving live, interactive widgets instead of static outputs, enhancing understanding and engagement.

How It Works

The system intercepts pi's tool calls, specifically visualize_read_me and show_widget. It extracts design guidelines verbatim from Claude.ai exports and uses these to instruct the LLM. When show_widget is called, the extension intercepts the HTML stream, opens a native macOS window using Glimpse (a Swift micro-UI library), and uses morphdom to efficiently update the DOM as tokens arrive, executing JavaScript upon completion.

Quick Start & Requirements

• Primary install: pi install git:github.com/Michaelliv/pi-generative-ui
• Non-default prerequisites: macOS only. Requires Swift toolchain (ships with Xcode or Xcode Command Line Tools).
• Links: No specific quick-start or demo links provided beyond the install command.

Highlighted Details

• Verbatim Claude.ai Design Guidelines: Extracts 72KB of production rules (typography, color, CSS, Chart.js, SVG) directly from Claude.ai exports for consistent styling.
• Live Streaming Architecture: Renders HTML widgets incrementally as LLM tokens arrive, using morphdom for efficient DOM diffing and smooth, animated updates (0.3s fade-in).
• Native macOS Windows: Utilizes Glimpse, a Swift micro-UI library, to open lightweight WKWebView windows without Electron or external runtimes.
• Bidirectional Communication: The WKWebView has a bridge (window.glimpse.send(data)) for sending data back to the agent.

Maintenance & Community

No specific details regarding contributors, sponsorships, or community links were found in the provided README.

Licensing & Compatibility

• License type: MIT.
• Compatibility notes: The MIT license generally permits commercial use and linking within closed-source projects.

Limitations & Caveats

The extension is strictly limited to macOS due to its reliance on native UI elements (Glimpse). As it is built upon reverse-engineering Claude.ai's internal mechanisms, it may be susceptible to breakage if Anthropic modifies their system.