Open Generative UI

An open-source showcase for building rich, interactive AI-generated UI with CopilotKit and LangChain Deep Agents. Ask the agent to visualize algorithms, create 3D animations, render charts, or generate interactive diagrams — all rendered as live HTML/SVG inside a sandboxed iframe.

https://github.com/user-attachments/assets/ed28c734-e54e-4412-873f-4801da544a7f

https://github.com/user-attachments/assets/ba7db70d-07c0-49af-b221-f962f30245e2

What It Does

The agent produces generative UI — not just text responses, but fully interactive visual components:

• Algorithm visualizations — binary search, BFS vs DFS, sorting algorithms
• 3D animations — interactive WebGL/CSS3D scenes
• Charts & diagrams — pie charts, bar charts, network diagrams
• Interactive widgets — forms, simulations, math plots

All visuals are rendered in sandboxed iframes with automatic light/dark theming, progressive reveal animations, and responsive sizing.

Quick Start

make setup    # Install deps + create .env template
# Edit apps/agent/.env with your real OpenAI API key
make dev      # Start all services

Strong models required. Generative UI demands high-capability models that can produce complex, well-structured HTML/SVG in a single pass. Set LLM_MODEL in your .env to one of:

Model	Provider
gpt-5.4 / gpt-5.4-pro	OpenAI
claude-opus-4-6	Anthropic
gemini-3.1-pro	Google

Smaller or weaker models will produce broken layouts, missing interactivity, or incomplete visualizations.

• App: http://localhost:3000
• Agent: http://localhost:8123

Available Commands

Command	Description
make setup	Install all dependencies and create .env template
make dev	Start all services (frontend + agent + mcp)
make dev-app	Start Next.js frontend only
make dev-agent	Start LangGraph agent only
make dev-mcp	Start MCP server only
make build	Build all apps
make lint	Lint all apps
make clean	Clean build artifacts
make help	Show all available commands

You can also use pnpm directly (pnpm dev, pnpm dev:app, pnpm dev:agent, etc.).

MCP Server (Self-Hosted)

The repo includes a standalone Model Context Protocol server that exposes the design system, skill instructions, and an HTML document assembler to any MCP-compatible client — including Claude Desktop, Claude Code, and Cursor.

What it provides

• assemble_document tool — wraps HTML fragments with the full design system CSS and bridge JS, returning an iframe-ready document
• Skill resources — browse and read skill instruction documents (skills://list, skills://{name})
• Prompt templates — pre-composed prompts for widgets, SVG diagrams, and advanced visualizations

Claude Desktop (stdio)

Add to your Claude Desktop config (claude_desktop_config.json):

{
  "mcpServers": {
    "open-generative-ui": {
      "command": "node",
      "args": ["dist/stdio.js"],
      "cwd": "/path/to/apps/mcp"
    }
  }
}

Claude Code / HTTP clients

# Start the HTTP server
cd apps/mcp && pnpm dev

Add to .mcp.json:

{
  "openGenerativeUI": {
    "url": "http://localhost:3100/mcp"
  }
}

See apps/mcp/README.md for full configuration, Docker deployment, and API reference.

Architecture

Turborepo monorepo with three packages:

apps/
├── app/       Next.js 16 frontend (CopilotKit v2, React 19, Tailwind 4)
├── agent/     Deep Agent (deepagents + CopilotKit middleware, skills-based)
└── mcp/       Standalone MCP server (design system + skills + document assembler)

Deep Agent + Skills

The agent backend uses LangChain Deep Agents (create_deep_agent) with a skills-based architecture. Instead of injecting all visualization instructions into the system prompt, skills are defined as SKILL.md files in apps/agent/skills/ and loaded on-demand via progressive disclosure:

apps/agent/skills/
├── advanced-visualization/SKILL.md   # UI mockups, dashboards, Chart.js, generative art
├── master-playbook/SKILL.md          # Response philosophy, decision trees, narration patterns
└── svg-diagrams/SKILL.md             # SVG generation rules, component patterns, diagram types

Deep agents also provide built-in planning (write_todos), filesystem tools, and sub-agent support.

How It Works

1. User sends a prompt via the CopilotKit chat UI
2. Deep agent decides whether to respond with text, call a tool, or render a visual component — consulting relevant skills as needed
3. widgetRenderer — a frontend useComponent hook — receives the agent's HTML and renders it in a sandboxed iframe
4. Skeleton loading shows while the iframe loads, then content fades in smoothly
5. ResizeObserver inside the iframe reports content height back to the parent for seamless auto-sizing

Key CopilotKit Patterns

Pattern	Hook	Example
Generative UI	useComponent	Pie charts, bar charts, widget renderer
Frontend tools	useFrontendTool	Theme toggle
Human-in-the-loop	useHumanInTheLoop	Meeting scheduler
Default tool render	useDefaultRenderTool	Tool execution status

Decision Matrix — Picking the Right Visual

User asks about...	Output type	Technology
How X works (physical)	Illustrative diagram	SVG
How X works (abstract)	Interactive explainer	HTML + inline SVG
Process / steps	Flowchart	SVG
Architecture / containment	Structural diagram	SVG
Database schema / ERD	Relationship diagram	Mermaid
Trends over time	Line chart	Chart.js
Category comparison	Bar chart	Chart.js
Part of whole	Doughnut chart	Chart.js
KPIs / metrics	Dashboard	HTML metric cards
Design a UI	Mockup	HTML
Choose between options	Comparison cards	HTML grid
Cyclic process	Step-through	HTML stepper
Physics / math	Simulation	Canvas + JS
Function / equation	Plotter	SVG + JS
Data exploration	Sortable table	HTML + JS
Creative / decorative	Art / illustration	SVG
3D visualization	3D scene	Three.js
Music / audio	Synthesizer	Tone.js
Network / graph	Force layout	D3.js
Quick factual answer	Plain text	None
Code solution	Code block	None
Emotional support	Warm text	None

Tech Stack

Next.js 16, React 19, Tailwind CSS 4, LangChain Deep Agents, LangGraph, CopilotKit v2, Turborepo, Recharts

Star History

License

MIT