Generative UI（Artifacts）系统
Generative UI（Artifacts）系统
学习目标
本章聚焦 LibreChat 的 Artifacts 系统。你将了解：
- Artifacts 的前端组件架构与版本管理
- React 组件、HTML 与 Mermaid 图表的三种渲染模式
- 代码编辑器与预览窗口的同步机制
- 下载与分享功能
前置知识
- React 组件基础
- 沙箱 iframe 安全模型
项目实践
前端组件架构
Artifacts 系统的核心组件：
Artifacts/├── Artifacts.tsx # 主容器，管理 artifact 状态├── Artifact.tsx # 单个 artifact 展示├── ArtifactTabs.tsx # 代码/预览/可视化标签页切换├── ArtifactCodeEditor.tsx # 代码编辑器（Monaco）├── ArtifactPreview.tsx # 实时预览窗口├── ArtifactButton.tsx # artifact 触发按钮├── ArtifactVersion.tsx # 版本回溯├── DownloadArtifact.tsx # 下载功能├── Code.tsx # 代码渲染└── Mermaid.tsx # Mermaid 图表渲染三种渲染模式
Artifacts 支持三种内容类型：
| 类型 | 渲染方式 | 安全性 |
|---|---|---|
| React 组件 | 沙箱 iframe + Monaco 编辑器 | 高（iframe 隔离） |
| HTML 页面 | 沙箱 iframe + srcdoc | 中（CSP 限制） |
| Mermaid 图表 | mermaid.js 直接渲染 | 高（纯 SVG） |
React 组件渲染流程：
1. LLM 输出 React 组件代码2. 代码存入 artifact 状态3. Monaco 编辑器展示代码（可编辑）4. 预览 iframe 通过 srcdoc 加载5. 版本切换回溯历史代码版本管理
ArtifactVersion.tsx 支持多版本管理：
每次 LLM 生成 artifact 内容时： 1. 创建新版本号 2. 保留旧版本 3. 用户可切换查看历史版本 4. 用户可下载任意版本下载功能
DownloadArtifact.tsx 支持多种下载格式：
React 组件 → .jsx/.tsx 文件HTML 页面 → .html 文件Mermaid 图表 → .svg/.png 文件问题与规避
问题 1：iframe 中的 React 组件执行环境不安全
规避：使用沙箱 iframe 的 sandbox 属性限制权限：
allow-scripts：允许 JS 执行（渲染 React 组件需要）- 不设置
allow-same-origin：防止访问父页面 DOM - 不设置
allow-forms：防止表单提交
问题 2：Mermaid 图表渲染阻塞主线程
规避：Mermaid.tsx 使用异步渲染，mermaid.run() 不阻塞组件挂载。大图表使用 Web Worker（如果可用）。
问题 3：artifact 内容过大影响聊天性能
规避：artifact 内容通过引用传递，不直接嵌入聊天消息。聊天消息仅包含 artifact 的元数据（类型、版本、尺寸），实际内容按需加载。
设计取舍
内嵌预览 vs 弹出窗口
| 方案 | 优势 | 代价 |
|---|---|---|
| 内嵌（LibreChat） | 保留聊天上下文、代码与预览并排 | 占用聊天区域空间 |
| 弹出窗口 | 更大预览空间 | 丢失聊天上下文 |
LibreChat 选择了内嵌，因为用户在查看 artifact 时通常需要参考聊天上下文。