OpenGenerativeUI

Open Generative UI

An open-source showcase for building rich, interactive AI-generated UI with [CopilotKit](https://copilotkit.ai) and [LangChain Deep Agents](https://docs.langchain.com/oss/python/deepagents/overview). 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 Anthropic 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. The agent runs on Anthropic Claude — `claude-fable-5` by default. Override with `LLM_MODEL` in your `.env`:

Model	Notes
claude-fable-5	Default
claude-opus-4-6	Strong alternative

Setting `LLM_MODEL` to a `gpt-*` name routes to OpenAI instead (requires `OPENAI_API_KEY`). For other providers, swap the chat model in `apps/agent/src/model.py` (see [docs/bring-to-your-app.md](docs/bring-to-your-app.md)). Smaller or weaker models will produce broken layouts, missing interactivity, or incomplete visualizations.

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