[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-CopilotKit--OpenGenerativeUI":3,"tool-CopilotKit--OpenGenerativeUI":64},[4,17,27,35,43,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",138956,2,"2026-04-05T11:33:21",[13,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":70,"readme_en":71,"readme_zh":72,"quickstart_zh":73,"use_case_zh":74,"hero_image_url":75,"owner_login":76,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":78,"owner_location":78,"owner_email":78,"owner_twitter":78,"owner_website":79,"owner_url":80,"languages":81,"stars":106,"forks":107,"last_commit_at":108,"license":109,"difficulty_score":110,"env_os":111,"env_gpu":112,"env_ram":112,"env_deps":113,"category_tags":125,"github_topics":126,"view_count":10,"oss_zip_url":78,"oss_zip_packed_at":78,"status":16,"created_at":142,"updated_at":143,"faqs":144,"releases":175},405,"CopilotKit\u002FOpenGenerativeUI","OpenGenerativeUI","Open-Source Generative UI Framework","OpenGenerativeUI 是一个开源的生成式用户界面框架，让你能通过自然语言指令让 AI 自动生成可交互的可视化内容。它结合 CopilotKit 和 LangChain Deep Agents，不仅能回答问题，还能实时创建算法动画（如二分查找、排序过程）、3D 场景、图表、网络图或交互式表单，并以内嵌的沙箱 iframe 形式安全地渲染为 HTML\u002FSVG。\n\n它解决了传统 AI 助手只能输出静态文本的局限，让复杂逻辑和数据以直观、动态的方式呈现，特别适合需要快速原型验证或教学演示的场景。主要面向开发者、AI 研究人员和技术型设计师——他们希望将大模型的能力延伸到富交互界面生成领域。\n\n技术上，OpenGenerativeUI 采用 Turborepo 架构，包含前端（Next.js）、智能体后端（基于技能的 Deep Agent）和 MCP（Model Context Protocol）服务，支持与 Claude Desktop、Cursor 等工具集成。其亮点在于要求使用高能力模型（如 GPT-5.4、Claude Opus 等），确保生成的 UI 结构完整、交互可用，并","OpenGenerativeUI 是一个开源的生成式用户界面框架，让你能通过自然语言指令让 AI 自动生成可交互的可视化内容。它结合 CopilotKit 和 LangChain Deep Agents，不仅能回答问题，还能实时创建算法动画（如二分查找、排序过程）、3D 场景、图表、网络图或交互式表单，并以内嵌的沙箱 iframe 形式安全地渲染为 HTML\u002FSVG。\n\n它解决了传统 AI 助手只能输出静态文本的局限，让复杂逻辑和数据以直观、动态的方式呈现，特别适合需要快速原型验证或教学演示的场景。主要面向开发者、AI 研究人员和技术型设计师——他们希望将大模型的能力延伸到富交互界面生成领域。\n\n技术上，OpenGenerativeUI 采用 Turborepo 架构，包含前端（Next.js）、智能体后端（基于技能的 Deep Agent）和 MCP（Model Context Protocol）服务，支持与 Claude Desktop、Cursor 等工具集成。其亮点在于要求使用高能力模型（如 GPT-5.4、Claude Opus 等），确保生成的 UI 结构完整、交互可用，并自动适配明暗主题与响应式布局。","# 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## License\n\nMIT\n","# Open Generative UI\n\n一个开源示例项目，展示如何使用 [CopilotKit](https:\u002F\u002Fcopilotkit.ai) 和 [LangChain Deep Agents](https:\u002F\u002Fdocs.langchain.com\u002Foss\u002Fpython\u002Fdeepagents\u002Foverview) 构建丰富、交互式的 AI 生成 UI（Generative UI）。你可以让智能体（agent）可视化算法、创建 3D 动画、渲染图表或生成交互式图表——所有内容都以实时 HTML\u002FSVG 的形式在沙箱化的 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## 功能说明\n\n该智能体生成的是 **生成式 UI（Generative UI）** —— 不仅仅是文本回复，而是完全可交互的视觉组件：\n\n- **算法可视化** —— 二分查找、BFS vs DFS、排序算法等\n- **3D 动画** —— 交互式 WebGL\u002FCSS3D 场景\n- **图表与图示** —— 饼图、柱状图、网络图等\n- **交互式小部件** —— 表单、模拟器、数学绘图等\n\n所有视觉内容均在沙箱化 iframe 中渲染，并自动支持亮色\u002F暗色主题、渐进式揭示动画和响应式尺寸调整。\n\n## 快速开始\n\n```bash\nmake setup    # 安装依赖 + 创建 .env 模板\n# 编辑 apps\u002Fagent\u002F.env 文件，填入你真实的 OpenAI API 密钥\nmake dev      # 启动所有服务\n```\n\n> **需要强大的模型。** 生成式 UI 要求模型具备高能力，能够在单次输出中生成结构良好且复杂的 HTML\u002FSVG。请在 `.env` 文件中将 `LLM_MODEL` 设置为以下之一：\n>\n> | 模型 | 提供商 |\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> 较小或能力较弱的模型将导致布局错乱、缺少交互性或可视化不完整。\n\n- **前端应用**: http:\u002F\u002Flocalhost:3000  \n- **智能体服务**: http:\u002F\u002Flocalhost:8123\n\n### 可用命令\n\n| 命令 | 说明 |\n|---------|-------------|\n| `make setup` | 安装所有依赖并创建 `.env` 模板 |\n| `make dev` | 启动所有服务（前端 + 智能体 + MCP） |\n| `make dev-app` | 仅启动 Next.js 前端 |\n| `make dev-agent` | 仅启动 LangGraph 智能体 |\n| `make dev-mcp` | 仅启动 MCP 服务器 |\n| `make build` | 构建所有应用 |\n| `make lint` | 对所有应用进行代码检查 |\n| `make clean` | 清理构建产物 |\n| `make help` | 显示所有可用命令 |\n\n你也可以直接使用 `pnpm`（如 `pnpm dev`、`pnpm dev:app`、`pnpm dev:agent` 等）。\n\n## MCP 服务器（自托管）\n\n本仓库包含一个独立的 [Model Context Protocol (MCP)](https:\u002F\u002Fmodelcontextprotocol.io) 服务器，向任何兼容 MCP 的客户端（包括 Claude Desktop、Claude Code 和 Cursor）提供设计系统、技能说明文档和 HTML 文档组装器。\n\n### 提供的功能\n\n- **`assemble_document` 工具** —— 将 HTML 片段包裹完整的 CSS 设计系统和桥接 JS，返回可直接用于 iframe 的完整文档\n- **技能资源** —— 浏览和读取技能说明文档（`skills:\u002F\u002Flist`、`skills:\u002F\u002F{name}`）\n- **提示模板** —— 预先组合好的提示词，用于小部件、SVG 图表和高级可视化\n\n### Claude Desktop（stdio 模式）\n\n在你的 Claude Desktop 配置文件（`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 客户端\n\n```bash\n# 启动 HTTP 服务器\ncd apps\u002Fmcp && pnpm dev\n```\n\n在 `.mcp.json` 中添加：\n\n```json\n{\n  \"openGenerativeUI\": {\n    \"url\": \"http:\u002F\u002Flocalhost:3100\u002Fmcp\"\n  }\n}\n```\n\n完整配置、Docker 部署和 API 参考请见 [apps\u002Fmcp\u002FREADME.md](apps\u002Fmcp\u002FREADME.md)。\n\n## 架构\n\n基于 Turborepo 的 monorepo，包含三个包：\n\n```\napps\u002F\n├── app\u002F       Next.js 16 前端（CopilotKit v2, React 19, Tailwind 4）\n├── agent\u002F     Deep Agent（deepagents + CopilotKit 中间件，基于技能）\n└── mcp\u002F       独立 MCP 服务器（设计系统 + 技能 + 文档组装器）\n```\n\n### Deep Agent + 技能系统\n\n智能体后端使用 [LangChain Deep Agents](https:\u002F\u002Fdocs.langchain.com\u002Foss\u002Fpython\u002Fdeepagents\u002Foverview)（`create_deep_agent`），采用基于技能（skills-based）的架构。不同于将所有可视化指令注入系统提示词，技能被定义为 `apps\u002Fagent\u002Fskills\u002F` 目录下的 `SKILL.md` 文件，并通过渐进式披露（progressive disclosure）按需加载：\n\n```\napps\u002Fagent\u002Fskills\u002F\n├── advanced-visualization\u002FSKILL.md   # UI 原型、仪表盘、Chart.js、生成艺术\n├── master-playbook\u002FSKILL.md          # 回复理念、决策树、叙述模式\n└── svg-diagrams\u002FSKILL.md             # SVG 生成规则、组件模式、图表类型\n```\n\nDeep Agents 还内置了规划能力（`write_todos`）、文件系统工具和子智能体支持。\n\n### 工作流程\n\n1. **用户通过 CopilotKit 聊天界面发送提示**\n2. **Deep Agent 决定** 是返回文本、调用工具，还是渲染视觉组件——必要时查阅相关技能\n3. **`widgetRenderer`** —— 前端的 `useComponent` Hook —— 接收智能体生成的 HTML，并在沙箱化 iframe 中渲染\n4. **骨架屏加载** 在 iframe 加载期间显示，随后内容平滑淡入\n5. iframe 内部的 **ResizeObserver** 将内容高度回传给父页面，实现无缝自动调整尺寸\n\n### 关键 CopilotKit 模式\n\n| 模式 | Hook | 示例 |\n|---------|------|---------|\n| 生成式 UI | `useComponent` | 饼图、柱状图、小部件渲染器 |\n| 前端工具 | `useFrontendTool` | 主题切换 |\n| 人在环路（Human-in-the-loop） | `useHumanInTheLoop` | 会议调度器 |\n| 默认工具渲染 | `useDefaultRenderTool` | 工具执行状态 |\n\n## 决策矩阵 —— 选择合适的可视化方式\n\n| 用户询问的内容……           | 输出类型                | 技术栈              |\n|-----------------------------|-------------------------|---------------------|\n| X 的工作原理（物理层面）    | 示意图                  | SVG                 |\n| X 的工作原理（抽象层面）    | 交互式讲解              | HTML + 内联 SVG     |\n| 流程 \u002F 步骤                 | 流程图                  | SVG                 |\n| 架构 \u002F 包含关系             | 结构图                  | SVG                 |\n| 数据库模式 \u002F 实体关系图（ERD） | 关系图                | Mermaid             |\n| 随时间变化的趋势            | 折线图                  | Chart.js            |\n| 类别对比                    | 柱状图                  | Chart.js            |\n| 整体中的部分                | 环形图（Doughnut chart）| Chart.js            |\n| 关键绩效指标（KPI）\u002F 度量   | 仪表盘                  | HTML 指标卡片       |\n| 设计用户界面（UI）          | 线框图（Mockup）        | HTML                |\n| 在多个选项间做选择          | 对比卡片                | HTML 网格           |\n| 循环流程                    | 分步展示（Step-through）| HTML 步进器         |\n| 物理 \u002F 数学                 | 仿真（Simulation）      | Canvas + JS         |\n| 函数 \u002F 方程                 | 绘图器（Plotter）       | SVG + JS            |\n| 数据探索                    | 可排序表格              | HTML + JS           |\n| 创意 \u002F 装饰性内容           | 艺术 \u002F 插图             | SVG                 |\n| 3D 可视化                   | 3D 场景                 | Three.js            |\n| 音乐 \u002F 音频                 | 合成器（Synthesizer）   | Tone.js             |\n| 网络 \u002F 图结构               | 力导向布局（Force layout）| D3.js              |\n| 快速的事实性回答            | 纯文本                  | 无                  |\n| 代码解决方案                | 代码块                  | 无                  |\n| 情感支持                    | 温暖的文字              | 无                  |\n\n## 技术栈\n\nNext.js 16、React 19、Tailwind CSS 4、LangChain Deep Agents、LangGraph、CopilotKit v2、Turborepo、Recharts\n\n## 许可证\n\nMIT","# OpenGenerativeUI 快速上手指南\n\n## 环境准备\n\n- **操作系统**：推荐 macOS \u002F Linux（Windows WSL2 亦可）\n- **Node.js**：v20 或更高版本\n- **包管理器**：推荐使用 `pnpm`（v8+）\n- **API 密钥**：需准备以下任一 LLM 提供商的 API Key：\n  - OpenAI（推荐 `gpt-5.4` 或 `gpt-5.4-pro`）\n  - Anthropic（`claude-opus-4-6`）\n  - Google（`gemini-3.1-pro`）\n\n> ⚠️ 注意：生成式 UI 对模型能力要求较高，低性能模型可能导致布局错乱或交互缺失。\n\n## 安装步骤\n\n1. 克隆仓库：\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002FOpenGenerativeUI.git\n   cd OpenGenerativeUI\n   ```\n\n2. 安装依赖并生成配置模板：\n   ```bash\n   make setup\n   ```\n\n3. 配置 API 密钥：\n   编辑 `apps\u002Fagent\u002F.env` 文件，填入你的 OpenAI（或其他）API Key：\n   ```env\n   OPENAI_API_KEY=your_api_key_here\n   LLM_MODEL=gpt-5.4  # 或其他支持的模型\n   ```\n\n4. 启动开发服务：\n   ```bash\n   make dev\n   ```\n\n服务启动后，访问以下地址：\n- 前端应用：http:\u002F\u002Flocalhost:3000\n- Agent 服务：http:\u002F\u002Flocalhost:8123\n\n> 💡 国内用户建议配置 npm\u002Fpnpm 镜像加速安装：\n> ```bash\n> pnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\n> ```\n\n## 基本使用\n\n1. 打开 http:\u002F\u002Flocalhost:3000\n2. 在聊天框中输入可视化请求，例如：\n   - “用动画演示快速排序过程”\n   - “画一个展示用户登录流程的流程图”\n   - “创建一个可交互的饼图，显示各产品销量占比”\n3. AI 将自动生成并渲染交互式 HTML\u002FSVG 组件，嵌入在沙箱 iframe 中，支持自动亮暗色主题和响应式尺寸。\n\n你也可以单独启动特定服务：\n```bash\nmake dev-app      # 仅启动前端\nmake dev-agent    # 仅启动 Agent\nmake dev-mcp      # 仅启动 MCP 服务\n```","某高校计算机系讲师正在准备一堂关于图遍历算法（BFS vs DFS）的互动教学课，希望让学生通过可视化方式直观理解两种算法的执行差异。\n\n### 没有 OpenGenerativeUI 时\n- 需手动编写大量 HTML\u002FCSS\u002FJavaScript 代码实现交互式图遍历动画，开发耗时且容易出错  \n- 若想切换不同算法或调整图结构，几乎要重写整个可视化组件，迭代成本高  \n- 缺乏统一设计语言，图表风格与课程网站不一致，影响整体体验  \n- 无法在课堂上实时响应学生提出的“如果改成加权图会怎样？”等假设性问题  \n- 部分学生使用手机访问，但自研组件未适配移动端，导致体验割裂  \n\n### 使用 OpenGenerativeUI 后\n- 直接向内置 AI 代理输入自然语言指令（如“生成一个可交互的 BFS 和 DFS 对比动画，节点数为 8”），几秒内获得完整可视化组件  \n- 学生现场提问时，讲师只需修改提示词（如“将图改为带权重的有向图”），AI 自动重建并渲染新交互界面  \n- 所有生成内容自动继承课程网站的主题色、字体和暗色模式，视觉风格高度统一  \n- 组件内建响应式布局和渐进式加载动画，无论电脑还是手机都能流畅操作  \n- 所有交互逻辑封装在沙箱 iframe 中，确保教学页面稳定性不受生成内容影响  \n\nOpenGenerativeUI 将算法教学从静态演示升级为动态共创，让复杂概念“所想即所见”。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_OpenGenerativeUI_ef4aba12.png","CopilotKit","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FCopilotKit_3590025f.png",null,"https:\u002F\u002Fcopilotkit.ai","https:\u002F\u002Fgithub.com\u002FCopilotKit",[82,86,90,94,98,102],{"name":83,"color":84,"percentage":85},"TypeScript","#3178c6",75.5,{"name":87,"color":88,"percentage":89},"Python","#3572A5",11.9,{"name":91,"color":92,"percentage":93},"CSS","#663399",11.2,{"name":95,"color":96,"percentage":97},"Dockerfile","#384d54",0.6,{"name":99,"color":100,"percentage":101},"Makefile","#427819",0.5,{"name":103,"color":104,"percentage":105},"JavaScript","#f1e05a",0.2,1090,130,"2026-04-04T23:11:24","MIT",4,"Linux, macOS, Windows","未说明",{"notes":114,"python":112,"dependencies":115},"需要配置 OpenAI、Anthropic 或 Google 的 API 密钥；必须使用高能力大模型（如 gpt-5.4、claude-opus-4-6 或 gemini-3.1-pro）才能正确生成复杂 UI；项目为 Turborepo 单体仓库，包含前端、Agent 和 MCP 三个子应用；需通过 make 或 pnpm 命令管理开发流程。",[76,116,117,118,119,120,121,122,123,124],"LangChain Deep Agents","LangGraph","Next.js","React","Tailwind CSS","Turborepo","Recharts","pnpm","Node.js",[15,26,13],[127,128,129,130,131,132,133,134,135,136,137,138,139,140,141],"agent-native","agentic-ai","agents","ai-agents","ai-copilot","ai-visualization","assistant-chat-bots","copilot","generative-ui","javascript","llm","open-source","typescript","visualization","agentic-visualization","2026-03-27T02:49:30.150509","2026-04-06T05:19:39.090390",[145,150,155,160,165,170],{"id":146,"question_zh":147,"answer_zh":148,"source_url":149},1508,"在移动设备上，Demo 画廊卡片背景透明导致文字难以阅读，如何解决？","应将 Demo 画廊卡片的背景设置为不透明或足够不透明，以确保在移动设备上文字可读；同时调整顶部分类筛选标签的布局，避免重叠。该问题已在 GitHub Issue 中确认并关闭。","https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI\u002Fissues\u002F73",{"id":151,"question_zh":152,"answer_zh":153,"source_url":154},1509,"为什么 Widget 渲染器在包含视口填充内容时高度会无限增长？","这是因为 iframe 高度设置存在反馈循环：内容使用 100% 或 100vh 等相对高度时，每次 reportHeight() 测量后父容器都会额外增加 8px（padding），导致内容不断膨胀。建议移除高度设置中的 +8，或改用 CSS padding；也可测量子元素 scrollHeight 而非容器 offsetHeight，或对连续增长进行防抖和限制。","https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI\u002Fissues\u002F64",{"id":156,"question_zh":157,"answer_zh":158,"source_url":159},1510,"生成可视化内容前能否增加一个规划步骤，而不是直接生成代码？","是的，理想流程应包括：1）Agent 先用 1-2 句文本确认用户请求；2）显式调用规划工具决定技术选型（如 Three.js 或 SVG）和交互设计；3）再调用 widgetRenderer 生成代码。这样可提升用户信心并改善输出质量。该改进已在项目中作为功能需求提出。","https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI\u002Fissues\u002F62",{"id":161,"question_zh":162,"answer_zh":163,"source_url":164},1511,"BFS\u002FDFS 算法可视化时图节点未渲染（显示空白画布），可能原因是什么？","可能原因包括：1）脚本执行时机过早，在 DOM 节点通过 idiomorph 注入前就尝试绘图；2）iframe 的 sandbox 属性（如缺少 allow-same-origin）限制了 canvas 或 SVG 渲染；3）bridge JS 在处理流式 HTML 时剥离了 script 标签，导致初始化脚本未正确执行。需确保绘图脚本在目标 DOM 存在后运行，并检查 sandbox 策略。","https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI\u002Fissues\u002F44",{"id":166,"question_zh":167,"answer_zh":168,"source_url":169},1512,"能否为生成的可视化组件添加“复制代码”和“下载”功能？","可以。建议增加两个功能：1）“复制为代码”按钮，将生成的 HTML\u002FCSS\u002FJS 源码复制到剪贴板；2）“下载工件”选项，导出为独立 HTML 文件或 PNG\u002FSVG 图像。这有助于开发者复用或用户离线保存内容，与现有的“保存为模板”功能互补。","https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI\u002Fissues\u002F42",{"id":171,"question_zh":172,"answer_zh":173,"source_url":174},1513,"Generative UI 组件在流式渲染时出现闪烁，如何实现平滑渐进渲染？","当前 WidgetRenderer 通过 postMessage 流式传输内容，但每次更新都整体替换 innerHTML，导致闪烁。应改用增量 DOM 更新策略（如使用 morphdom 或 idiomorph 进行局部替换），并在内容加载过程中保持骨架屏或占位符，避免布局跳动。该问题已在 Issue #33 中详细描述。","https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI\u002Fissues\u002F33",[]]