如何在 AI 对话中实现流式生成交互式图表

Anthropic 前天在 Claude 里上线了基于生成式 UI 的新交互——可以在聊天中直接生成可视化图表、交互式小工具。

Code Pilot 作者用两天时间复刻了这个功能，而且做得更通用：支持 Kimi K2.5、Minimax M2.5 等国产模型。

能做什么？

1. 数据可视化

让 AI 画一个"美国和伊朗冲突每天成本估算"的图表。以前 AI 给你一大段文字，数字关系根本看不清。现在直接出图表，每部分金额多少一目了然。

2. 交互式小工具

让它做一个复利计算器。拖滑块改初始金额、改投资年限，下面的图表和数字实时变化。这不是静态图片，是真的能交互的小工具。

3. 架构图和流程图

让它画 API 到 JWT 身份验证的完整流程。特性对比、流程图、层级结构全是图形化的，比看文字描述理解架构快太多了。

4. 分析线上数据

直接丢一个 GitHub 仓库链接给它，它自己抓数据然后可视化分析。星数、fork 数、技术栈、架构设计、核心模块，全部画成图表。

5. 深度交互和解释

你可以跟生成的示意图进行交互，让它进行更详细的解释。比如让它解释季风和洋流的关系，点击"洋流机制"按钮，就会自动向模型发送指令，继续生成洋流机制的示意图。

对于物理数学公式的可视化，每个参数都可以通过滑块和输入控制，动画立刻会发生变化。对学生来说非常好用。

技术实现方案

Claude 官方的做法

Claude.ai 用的是 tool_use 机制：模型调用一个专用 tool 输出结构化的 widget 内容，前端解析 tool 调用的 input 参数来渲染。

但这个方案有三个问题：

1. SDK 限制：Claude Agent SDK 的 preset: 'claude_code' 模式没法注册自定义 tool
2. 流式体验：tool_use 的结果要等 input_json_delta 拼完才能渲染，不支持 HTML 增量渲染
3. 渲染隔离：需要处理样式泄漏和脚本逃逸问题

Code Pilot 的方案

触发：代码围栏

模型输出一段特殊的 Markdown 代码围栏来触发渲染：

show-widget
{"title":"training_flow","widget_code":"<svg width=..."}

这个格式复用了 Code Pilot 已有的代码围栏模式，前端 parser 链天然支持。

渲染：sandbox iframe

每个 widget 渲染在一个 sandbox="allow-scripts" 的 iframe 里。

• CSP 策略只放行 4 个 CDN 域名的外部脚本
• connect-src 'none' 禁止所有网络请求
• 通过 postMessage 接收内容更新
• 流式预览阶段发 widget:update，不执行脚本
• 最终渲染发 widget:finalize，执行脚本
• ResizeObserver 监听内容高度变化，通过 postMessage 报告给父页面

CSS 变量桥接

这是让 widget 跟应用视觉融合的关键。

Code Pilot 用 OKLCH 色彩空间的 CSS 变量。桥接层在 iframe 初始化时，把 Code Pilot 的变量值注入 iframe 的 :root。模型按指南写的 CSS 就能直接用当前主题的颜色。

深色模式切换时，父页面检测到 class 变化，重新算变量值推给 iframe。

流式渲染

这是整个实现里最复杂的部分。模型逐 token 生成，任意时刻收到的 widget 代码都可能是不完整的 JSON、不完整的 HTML。

Code Pilot 的解决方案：

• 实时解析不完整的 JSON 和 HTML
• 边生成边渲染到 iframe
• 最终完成时执行脚本

国产模型支持

Code Pilot 实现之后不只是 Claude 能用。Kimi K2.5、Minimax M2.5、Anthropic 原生模型都跑得起来。

作者特别提到：K2.5 画的图形甚至比 Sonnet 4.6 还好看，架构分析也很详细。如果用这个功能推荐首选 K2.5 试试。

如何使用

直接安装 Code Pilot：https://github.com/op7418/CodePilot

安装后就可以直接使用，无需额外配置。

Toolin 点评

这是一个典型的"看到好东西就复刻"的开源精神体现。更重要的是，Code Pilot 的实现方案比 Claude 官方更通用——支持多个模型，而且是开源的。

生成式 UI 的核心价值在于：让 AI 的输出不再局限于文本，而是可以直接生成可交互的界面。这对数据分析、教育、技术文档等场景都有巨大价值。

适合谁？

• 需要数据可视化的分析师
• 需要理解复杂概念的学生
• 需要快速生成交互式演示的开发者

不适合谁？

• 只需要纯文本对话的场景
• 对视觉呈现没有要求的用户

定价：开源免费