What it does

Open Generative UI is a showcase and starter kit for building AI agents that render interactive HTML and SVG instead of plain text. Ask it to visualize a sorting algorithm, plot a function, or mock up a dashboard, and it returns a live component running in a sandboxed iframe with auto-resizing and light/dark theming.

The interesting bit

The project treats visualization as a skill, not a prompt hack. The LangChain Deep Agent loads SKILL.md files on demand — one for SVG diagrams, another for advanced visualizations, a master playbook for when to stay textual — so the model isn’t drowning in CSS rules for every single request. There’s even a decision matrix mapping user intent to output format: “emotional support” gets warm text, “physics / math” gets Canvas + JS.

Key highlights

• MCP server included: self-hosted Model Context Protocol server exposes the design system and an assemble_document tool to Claude Desktop, Claude Code, or Cursor
• Skills-based agent architecture: progressive disclosure of SKILL.md files rather than monolithic system prompts
• Sandboxed iframe renderer: useComponent hook handles skeleton loading, progressive reveal, and ResizeObserver height reporting
• Turborepo monorepo: Next.js 16 frontend, LangGraph agent backend, standalone MCP server
• Strong model gate: README explicitly warns that weaker models “will produce broken layouts, missing interactivity, or incomplete visualizations”

Caveats

• Requires high-capability models (GPT-4, Claude Opus, Gemini Pro); costs add up fast if you’re generating visuals frequently
• The model version strings in the README (gpt-5.4, claude-opus-4-6, gemini-3.1-pro) don’t match current real model names — likely placeholders or typos
• No mention of testing, CI, or deployment guidance beyond local make dev

Verdict

Worth studying if you’re building agentic products where text answers feel insufficient — the skill-decomposition pattern and the visual decision matrix are genuinely useful reference material. Skip it if you just need a chart library; this is orchestration glue, not a replacement for D3 or Chart.js.