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

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

Decision Matrix — Picking the Right Visual

Tech Stack

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

Star History

License

MIT