CopilotKit

OpenGenerativeUI — Design skill for Claude Code

Design community

Open-Source Generative UI Framework.

How to install OpenGenerativeUI

This entry records only its repository, not the path inside it, so there is no exact command to give. Open CopilotKit/OpenGenerativeUI and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What OpenGenerativeUI does

Open-Source Generative UI Framework.

Alternatives in Design

Algorithmic Art — Create generative art using p5.js with seeded randomness, flow fields, and particle systems 94.1k ★
Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★

README

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.