生成式 UI
Claude 在对话中直接生成的交互式可视化 — 图表、示意图、计算器等。
生成式 UI
生成式 UI 让 Claude 能在对话中创建交互式可视化组件。不再是用文字描述一个流程，Claude 可以直接生成一张流程图；不再是列举一串数字，它可以生成一个你可以拖动探索的交互式图表。
这些不是预置的模板 — Claude 根据对话内容实时生成 HTML、SVG 和 JavaScript 代码。每次生成的可视化都是独一无二的，完全取决于你的问题。
能做什么
SVG 示意图
Claude 会根据你的问题自动选择最合适的图表类型：
- 流程图 — 流程展示、决策树
- 时间线 — 历史序列、项目阶段
- 层级图 — 组织架构、系统结构
- 循环图 — 反馈循环、迭代过程
- 对比图 — 特性对比、优缺点分析
- 层叠图 — 架构分层、技术栈
交互式图表
基于 Chart.js 构建，支持实时交互：
- 折线图、柱状图、饼图、雷达图
- 滑块和按钮控制数据视图
- 多数据集切换控制
计算器和工具
嵌入对话的小型交互工具：
- 贷款计算器，可调节参数
- 单位换算器
- 公式可视化，带滑块控制
多 Widget 叙事
对于复杂话题，Claude 会在文字解释中穿插多个不同类型的 widget，从多个角度展示。例如，"LLM 是怎么工作的"这个问题可能会生成：
- 一张层级图展示模型架构
- 文字解释训练过程
- 一个交互式图表展示 loss 曲线
- 文字总结关键要点
钻取交互
图表中的节点可以点击。点击某个节点会自动发送一条追问消息，深入了解该主题的细节。
如何使用
生成式 UI 默认开启，无需手动开启或配置。Claude 会自动判断何时使用可视化比纯文字更有帮助。
只需提出适合可视化展示的问题：
- "解释一下 HTTP 请求的工作流程"
- "对比 React、Vue 和 Svelte"
- "展示大语言模型的训练流程"
- "可视化排序算法"
Claude 会选择合适的可视化类型并在对话中内联生成。
Widget 类型指南
| 你的意图 | Claude 生成的内容 |
|---|---|
| 流程 / X 怎么工作 | SVG 流程图 |
| 结构 / X 是什么 | SVG 层级图或分层图 |
| 历史 / 时间序列 | SVG 时间线 |
| 循环 / 反馈回路 | SVG 循环图 |
| 对比 A 和 B | SVG 并排对比 |
| 数据 / 趋势 | Chart.js 交互式图表 |
| 计算 / 公式 | HTML 计算器（带滑块） |
| 排名 / 比例 | HTML 条形展示 |
主题融合
Widget 自动继承当前主题。切换深色/浅色模式时，所有 widget 实时更新 — 颜色、背景和文字无缝适应。这通过 CSS 变量桥接实现，将 CodePilot 的主题变量映射到 widget 的样式系统。
安全性
每个 widget 运行在严格安全控制的沙箱 iframe 中：
- 禁止网络访问 — Widget 无法发起 fetch 请求、XHR 调用或 WebSocket 连接（
connect-src 'none'） - DOM 隔离 —
sandbox="allow-scripts"不含allow-same-origin，widget 无法访问父页面 - CDN 白名单 — 外部脚本仅限四个可信 CDN：cdnjs.cloudflare.com、cdn.jsdelivr.net、unpkg.com、esm.sh
- 链接拦截 — 所有链接点击被拦截，通过父页面在新标签页中打开
- HTML 清理 — 危险标签（iframe、object、embed、form）始终被剥离
持久化
Widget 作为消息内容的一部分被持久化存储。切换到其他对话再回来时，widget 会从存储的代码重新渲染。依赖 CDN 的 widget（如 Chart.js 图表）会在重新渲染时重新加载库。
限制
- 需要官方 API — 部分第三方 API 服务商可能无法正确转发 widget 系统提示。如果 widget 没有出现，请确认使用的是官方 Anthropic API 服务商。
- CDN 加载时间 — Chart.js 等 CDN 库需要网络加载。首次渲染可能需要几秒钟。加载过程中会显示微光动画提示。
- Widget 大小 — 建议每个 widget 不超过 3000 字符。非常复杂的可视化可能会拆分为多个 widget。
- 无持久状态 — Widget 的内部状态（滑块位置、选中的标签页）在重新打开对话时会重置。