Open Generative UI
用 CopilotKit 和 LangChain Deep Agents 构建交互式 AI 生成界面的开源框架。
证据显示：沙箱 iframe 隔离生成 UI，限制 localStorage/cookies 和同源 fetch，但未提供权限最小化的详细说明；用户确认机制未提及；数据流透明度部分，README 描述了数据流，但未明确数据保留或第三方共享；敏感数据处理未明确；依赖安全有 CI 和依赖固定，但未提及漏洞扫描；外部影响有沙箱限制，但未明确网络访问控制；回滚机制未提及；来源归属有 MIT 许可证和版权声明，但发布者未验证。扣分原因：缺乏用户确认、敏感数据策略、回滚机制和明确的权限最小化。
证据显示：README 和测试文件一致，测试覆盖关键功能，但未提供运行时可靠性证据；依赖可用性有 CI 构建，但未提供依赖可用性保证；失败消息未明确。扣分原因：静态审查无法验证运行时可靠性，失败消息文档不足。
证据显示：README 明确目标受众和场景，提供决策矩阵；能力边界通过技能文件和提示词限制；触发精度通过提示词和测试保证；环境适配支持多种模型和部署方式。扣分原因：未提供多环境配置细节。
证据显示：信息架构清晰，有架构图和目录结构；安装说明详细；命名稳定性未明确；示例和 FAQ 有 README 和测试；已知限制有模型要求说明；许可证为 MIT；版本变更日志缺失；维护责任有 CI 和 Slack 通知，但发布者未验证。扣分原因：缺少版本变更日志，命名稳定性未明确。
证据显示：输出可用性高，生成 UI 可直接使用；边际价值高，提供独特功能；成本效益未明确，但依赖多个外部服务。扣分原因：成本效益未量化。
证据显示：README 和测试文件可追溯，但未提供外部验证；跨源佐证有限；事实与推断分离不明确。扣分原因：静态审查无法验证运行时行为，外部验证不足。
- 发布者身份未验证，需谨慎评估供应链风险。
- 依赖安全未提及漏洞扫描，建议检查依赖漏洞。
- 用户确认和敏感数据处理机制缺失，需在部署前明确。
- 版本变更日志缺失，难以追踪变更历史。
这个 Agent 能做什么，适合哪些场景？
Open Generative UI 是一个开源展示项目，用于构建丰富的交互式 AI 生成界面。它通过 CopilotKit 和 LangChain Deep Agents 实现，能够将算法可视化、3D 动画、图表和交互式小组件等实时渲染为沙箱 iframe 中的 HTML/SVG。仓库是一个包含三个包的 Turborepo monorepo：Next.js 前端、基于技能的 Deep Agent 后端以及独立的 MCP 服务器。代理使用基于 SKILL.md 文件的技能架构，按需加载指令，并通过 `generateSandboxedUi` 工具和 OpenGenerativeUIMiddleware 生成 UI。前端利用 CopilotKit v2 的 `openGenerativeUI` 和 `renderActivityMessages` 来流式渲染更新。该项目需要高性能模型（如 Claude 系列），并通过 make 或 pnpm 命令提供完整的本地开发环境。
该代理根据用户提示生成交互式 UI 组件。它接收用户请求，通过 create_deep_agent（LangChain Deep Agents）进行处理，该代理使用 SKILL.md 文件中的技能来决定输出类型。当需要可视化时，它调用 generateSandboxedUi 工具（由 CopilotKit 运行时提供），该工具接受流式参数：initialHeight、placeholderMessages、css、html、jsFunctions 和 jsExpressions。运行时中的 OpenGenerativeUIMiddleware 将这些参数转换为前端订阅的 open-generative-ui 活动事件。前端通过 renderActivityMessages 展示 HTML 流，并使用 Idiomorph 将更新平滑地合并到预览 iframe 中，最终启动带有设计系统 CSS 和 CDN importmap 的 websandbox iframe。生成的 UI 通过 Zod 验证的 sendPrompt 和 openLink 沙箱函数与宿主通信，并使用 ResizeObserver 自动调整大小。
- 希望在聊天界面中直接可视化算法（如二分查找、排序）的教育者。
- 希望为他们的 AI 助手构建交互式数据仪表板的开发者。
- 希望在网页内容中嵌入实时 3D 动画或多维数据集的产品团队。
- 希望使用支持 MCP 的客户端（如 Claude Desktop）生成界面组件的用户。
- 需要探索流程图、图表和网络图等视觉表示的 AI 应用开发者。
- 希望在 CopilotKit 项目中快速原型化交互式 UI 小部件的技术人员。
这个 Agent 有哪些优点和局限？
- 提供完整的开源框架，用于生成丰富的交互式 UI，而不仅仅是文本响应。
- 模块化架构：前端、代理和 MCP 服务器独立，便于定制和扩展。
- 基于技能的设计支持渐进式披露，减少令牌使用并提高专注度。
- 支持多种可视化类型，包括算法、3D、图表和交互式模拟。
- 提供自动主题、响应式尺寸和交错动画开箱即用的功能。
- 在多个命令和环境（make、pnpm、Claude Desktop、Cursor）中有清晰的文档。
- 需要高性能模型（如 Claude 系列）才能可靠地生成复杂的 HTML/SVG；较弱的模型会产生损坏的输出。
- 依赖 CopilotKit 和 LangChain 生态，如果这些依赖发生变化，可能会引入学习曲线和潜在的破坏性更改。
- 代理主要针对 Claude 进行调优；切换模型提供商可能需要修改代码和配置（例如
model.py）。 - 本地开发需要多个服务（前端、代理、MCP）同时运行，这可能对性能或部署有较高要求。
- 在生成 UI 时依赖网络连接（例如从 CDN 加载库），这可能不适合受限环境。
- 文档中描述的模型名称（如
claude-fable-5）可能是虚构或未来的模型，实际使用时可能需要调整。
如何安装或部署这个 Agent？
- 克隆仓库并运行
make setup来安装依赖并创建.env模板。 - 编辑
apps/agent/.env，设置你的 Anthropic API 密钥（ANTHROPIC_API_KEY），或根据需要设置LLM_MODEL（例如claude-opus-4-6）和OPENAI_API_KEY。 - 运行
make dev启动所有服务。确保已安装 Node.js 和 pnpm。
如何使用这个 Agent？
- 启动开发服务器后，在浏览器中打开
http://localhost:3000（应用）和http://localhost:8123（代理 API）。 - 在聊天界面中，向代理发送请求，例如“可视化二分查找”或“创建一个饼图”。
- 代理将生成一个交互式 HTML/SVG 组件，它会在沙箱 iframe 中自动渲染。
- 如需将 MCP 服务器与 Claude Desktop 或 Claude Code 一起使用，请按照
apps/mcp/README.md中的配置说明，通过 stdio 或 HTTP（对 HTTP 运行pnpm dev）进行设置。
这个 Agent 与同类方案有什么区别？
该项目明确与 CopilotKit 中的标准生成式 UI 区分开，后者仅使用 useComponent 实现简单的可视化，而该项目通过 generateSandboxedUi 支持完整的沙箱化 HTML/SVG。它还使用 LangChain Deep Agents 与典型的 LangGraph 代理进行对比。
常见问题
运行这个项目需要哪些凭证？
apps/agent/.env 中设置），因为默认模型是 claude-fable-5。如果你设置了 gpt-* 模型，则需要 OpenAI API 密钥。可以自定义模型，但可能需要更改 model.py。我可以在生产环境部署生成的 UI 吗？
如果我使用较弱的模型会怎样？
我可以使用 Claude Desktop 或 Claude Code 作为前端吗？
assemble_document 工具生成 iframe 就绪的文档。我需要总是运行所有服务吗？
make dev）。但你可以使用 make dev-app、make dev-agent 或 make dev-mcp 单独启动它们，如果你只需要特定的部分。