逆向工程 Claude 的 Generative UI：不是 iframe，不是 markdown，是 tool call + DOM 注入

> 来源: https://michaellivs.com/blog/reverse-engineering-claude-generative-ui/

> 作者: Michael Livshits（Pi coding agent 贡献者）

> 代码: https://github.com/Michaelliv/pi-generative-ui

> 日期: 2026-03-16（Claude generative UI 发布当天）

📌 一句话总结

Anthropic 给 claude.ai 加了 Generative UI——对话中直接渲染交互式 HTML 组件（滑块、图表、动画）。作者在发布几小时内就逆向出了完整架构：不是 iframe，不是 markdown 嵌入 HTML，而是 tool call + 直接 DOM 注入 + CSP 限制。然后用这个发现为终端 coding agent Pi 构建了自己的版本。

🔍 逆向发现

核心架构：Tool Call，不是 Markdown

第一个也是最重要的发现：Claude 的 Generative UI 不是在 markdown 输出中嵌入 HTML。而是调用一个名为 show_widget 的 tool，把 HTML 作为参数传递。

{
  "i_have_seen_read_me": true,
  "title": "compound_interest_calculator",
  "loading_messages": ["计算复利...", "渲染图表..."],
  "widget_code": "<style>...</style>\n<div>...</div>\n<script>...</script>"
}

两步机制：先读规范，再渲染

用户: "帮我可视化复利增长"
    ↓
Claude 调用 read_me(modules: ["chart", "interactive"])
    ↓
系统返回: Chart.js 设计规范 + 交互组件规范
    ↓
Claude 调用 show_widget(widget_code: "...")
    ↓
前端: 流式 DOM 注入 → 实时渲染

read_me 是按需加载的设计规范系统——不把所有文档塞进 context（浪费 token），只在需要时加载特定模块：

不是 iframe，是直接 DOM 注入

作者通过 4 个证据证明这不是 iframe：

1. CSS 变量继承 — var(--color-text-primary) 正常解析（同一文档，同一 CSS cascade）

2. sendPrompt() 可用 — 能调用宿主页面的函数

3. 背景透明 — 没有 iframe 容器、滚动条、白色背景

4. 流式渲染 — iframe 需要完整 HTML 才能渲染；这里是 token 到哪渲染到哪

"安全沙箱" 仅仅是 CSP，限制