[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74992":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":15,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":41,"readmeContent":42,"aiSummary":43,"trendingCount":16,"starSnapshotCount":16,"syncStatus":44,"lastSyncTime":45,"discoverSource":46},74992,"OpenGenerativeUI","CopilotKit\u002FOpenGenerativeUI","CopilotKit","Open-Source Generative UI Framework","https:\u002F\u002Fopengenerativeui.copilotkit.ai\u002F",null,"TypeScript",1383,178,8,38,0,11,109,33,19.76,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"agent-native","agentic-ai","agentic-visualization","agents","ai-agents","ai-copilot","ai-visualization","assistant-chat-bots","copilot","generative-ui","javascript","llm","open-source","typescript","visualization","2026-06-12 02:03:31","# Open Generative UI\n\nAn open-source showcase for building rich, interactive AI-generated UI with [CopilotKit](https:\u002F\u002Fcopilotkit.ai) and [LangChain Deep Agents](https:\u002F\u002Fdocs.langchain.com\u002Foss\u002Fpython\u002Fdeepagents\u002Foverview). Ask the agent to visualize algorithms, create 3D animations, render charts, or generate interactive diagrams — all rendered as live HTML\u002FSVG inside a sandboxed iframe.\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fed28c734-e54e-4412-873f-4801da544a7f\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fba7db70d-07c0-49af-b221-f962f30245e2\n\n## What It Does\n\nThe agent produces **generative UI** — not just text responses, but fully interactive visual components:\n\n- **Algorithm visualizations** — binary search, BFS vs DFS, sorting algorithms\n- **3D animations** — interactive WebGL\u002FCSS3D scenes\n- **Charts & diagrams** — pie charts, bar charts, network diagrams\n- **Interactive widgets** — forms, simulations, math plots\n\nAll visuals are rendered in sandboxed iframes with automatic light\u002Fdark theming, progressive reveal animations, and responsive sizing.\n\n## Quick Start\n\n```bash\nmake setup    # Install deps + create .env template\n# Edit apps\u002Fagent\u002F.env with your real OpenAI API key\nmake dev      # Start all services\n```\n\n> **Strong models required.** Generative UI demands high-capability models that can produce complex, well-structured HTML\u002FSVG in a single pass. Set `LLM_MODEL` in your `.env` to one of:\n>\n> | Model | Provider |\n> |-------|----------|\n> | `gpt-5.4` \u002F `gpt-5.4-pro` | OpenAI |\n> | `claude-opus-4-6` | Anthropic |\n> | `gemini-3.1-pro` | Google |\n>\n> Smaller or weaker models will produce broken layouts, missing interactivity, or incomplete visualizations.\n\n- **App**: http:\u002F\u002Flocalhost:3000\n- **Agent**: http:\u002F\u002Flocalhost:8123\n\n### Available Commands\n\n| Command | Description |\n|---------|-------------|\n| `make setup` | Install all dependencies and create `.env` template |\n| `make dev` | Start all services (frontend + agent + mcp) |\n| `make dev-app` | Start Next.js frontend only |\n| `make dev-agent` | Start LangGraph agent only |\n| `make dev-mcp` | Start MCP server only |\n| `make build` | Build all apps |\n| `make lint` | Lint all apps |\n| `make clean` | Clean build artifacts |\n| `make help` | Show all available commands |\n\nYou can also use `pnpm` directly (`pnpm dev`, `pnpm dev:app`, `pnpm dev:agent`, etc.).\n\n## MCP Server (Self-Hosted)\n\nThe repo includes a standalone [Model Context Protocol](https:\u002F\u002Fmodelcontextprotocol.io) 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.\n\n### What it provides\n\n- **`assemble_document` tool** — wraps HTML fragments with the full design system CSS and bridge JS, returning an iframe-ready document\n- **Skill resources** — browse and read skill instruction documents (`skills:\u002F\u002Flist`, `skills:\u002F\u002F{name}`)\n- **Prompt templates** — pre-composed prompts for widgets, SVG diagrams, and advanced visualizations\n\n### Claude Desktop (stdio)\n\nAdd to your Claude Desktop config (`claude_desktop_config.json`):\n\n```json\n{\n  \"mcpServers\": {\n    \"open-generative-ui\": {\n      \"command\": \"node\",\n      \"args\": [\"dist\u002Fstdio.js\"],\n      \"cwd\": \"\u002Fpath\u002Fto\u002Fapps\u002Fmcp\"\n    }\n  }\n}\n```\n\n### Claude Code \u002F HTTP clients\n\n```bash\n# Start the HTTP server\ncd apps\u002Fmcp && pnpm dev\n```\n\nAdd to `.mcp.json`:\n\n```json\n{\n  \"openGenerativeUI\": {\n    \"url\": \"http:\u002F\u002Flocalhost:3100\u002Fmcp\"\n  }\n}\n```\n\nSee [apps\u002Fmcp\u002FREADME.md](apps\u002Fmcp\u002FREADME.md) for full configuration, Docker deployment, and API reference.\n\n## Architecture\n\nTurborepo monorepo with three packages:\n\n```\napps\u002F\n├── app\u002F       Next.js 16 frontend (CopilotKit v2, React 19, Tailwind 4)\n├── agent\u002F     Deep Agent (deepagents + CopilotKit middleware, skills-based)\n└── mcp\u002F       Standalone MCP server (design system + skills + document assembler)\n```\n\n### Deep Agent + Skills\n\nThe agent backend uses [LangChain Deep Agents](https:\u002F\u002Fdocs.langchain.com\u002Foss\u002Fpython\u002Fdeepagents\u002Foverview) (`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\u002Fagent\u002Fskills\u002F` and loaded on-demand via progressive disclosure:\n\n```\napps\u002Fagent\u002Fskills\u002F\n├── advanced-visualization\u002FSKILL.md   # UI mockups, dashboards, Chart.js, generative art\n├── master-playbook\u002FSKILL.md          # Response philosophy, decision trees, narration patterns\n└── svg-diagrams\u002FSKILL.md             # SVG generation rules, component patterns, diagram types\n```\n\nDeep agents also provide built-in planning (`write_todos`), filesystem tools, and sub-agent support.\n\n### How It Works\n\n1. **User sends a prompt** via the CopilotKit chat UI\n2. **Deep agent decides** whether to respond with text, call a tool, or render a visual component — consulting relevant skills as needed\n3. **`widgetRenderer`** — a frontend `useComponent` hook — receives the agent's HTML and renders it in a sandboxed iframe\n4. **Skeleton loading** shows while the iframe loads, then content fades in smoothly\n5. **ResizeObserver** inside the iframe reports content height back to the parent for seamless auto-sizing\n\n### Key CopilotKit Patterns\n\n| Pattern | Hook | Example |\n|---------|------|---------|\n| Generative UI | `useComponent` | Pie charts, bar charts, widget renderer |\n| Frontend tools | `useFrontendTool` | Theme toggle |\n| Human-in-the-loop | `useHumanInTheLoop` | Meeting scheduler |\n| Default tool render | `useDefaultRenderTool` | Tool execution status |\n\n## Decision Matrix — Picking the Right Visual\n\n| User asks about...          | Output type              | Technology          |\n|-----------------------------|--------------------------|---------------------|\n| How X works (physical)      | Illustrative diagram     | SVG                 |\n| How X works (abstract)      | Interactive explainer    | HTML + inline SVG   |\n| Process \u002F steps             | Flowchart                | SVG                 |\n| Architecture \u002F containment  | Structural diagram       | SVG                 |\n| Database schema \u002F ERD       | Relationship diagram     | Mermaid             |\n| Trends over time            | Line chart               | Chart.js            |\n| Category comparison         | Bar chart                | Chart.js            |\n| Part of whole               | Doughnut chart           | Chart.js            |\n| KPIs \u002F metrics              | Dashboard                | HTML metric cards   |\n| Design a UI                 | Mockup                   | HTML                |\n| Choose between options      | Comparison cards         | HTML grid           |\n| Cyclic process              | Step-through             | HTML stepper        |\n| Physics \u002F math              | Simulation               | Canvas + JS         |\n| Function \u002F equation         | Plotter                  | SVG + JS            |\n| Data exploration            | Sortable table           | HTML + JS           |\n| Creative \u002F decorative       | Art \u002F illustration       | SVG                 |\n| 3D visualization            | 3D scene                 | Three.js            |\n| Music \u002F audio               | Synthesizer              | Tone.js             |\n| Network \u002F graph             | Force layout             | D3.js               |\n| Quick factual answer        | Plain text               | None                |\n| Code solution               | Code block               | None                |\n| Emotional support           | Warm text                | None                |\n\n## Tech Stack\n\nNext.js 16, React 19, Tailwind CSS 4, LangChain Deep Agents, LangGraph, CopilotKit v2, Turborepo, Recharts\n\n## Star History\n\n\u003Ca href=\"https:\u002F\u002Fwww.star-history.com\u002F?repos=CopilotKit%2FOpenGenerativeUI&type=date&legend=top-left\">\n \u003Cpicture>\n   \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=CopilotKit\u002FOpenGenerativeUI&type=date&theme=dark&legend=bottom-right\" \u002F>\n   \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=CopilotKit\u002FOpenGenerativeUI&type=date&legend=bottom-right\" \u002F>\n   \u003Cimg alt=\"Star History Chart\" src=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=CopilotKit\u002FOpenGenerativeUI&type=date&legend=bottom-right\" \u002F>\n \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n## License\n\nMIT\n","OpenGenerativeUI 是一个开源的生成式用户界面框架，旨在通过 CopilotKit 和 LangChain Deep Agents 构建丰富且交互性强的 AI 生成 UI。该项目的核心功能包括算法可视化、3D 动画制作、图表和互动组件生成等，所有这些内容均以 HTML\u002FSVG 形式在沙盒化的 iframe 中实时渲染，并支持自动明暗主题切换及响应式布局调整。特别适用于需要动态展示复杂数据结构或过程的教学场景、软件开发辅助工具以及任何希望利用先进 AI 技术提升用户体验的应用场合。基于 TypeScript 开发，遵循 MIT 许可协议，项目活跃度高，适合对创新性人机交互感兴趣的开发者探索使用。",2,"2026-06-11 03:51:52","high_star"]