逆向工程 Claude 的生成式 UI - 然后为终端构建它

SaaS dashboard widget rendered in a native macOS window

pi install npm:pi-generative-ui

Source: github.com/Michaelliv/pi-generative-ui

来源： github.com/Michaelliv/pi-generative-ui

The Discovery

发现

Anthropic announced generative UI for Claude a couple of hours ago. Interactive widgets - sliders, charts, animations - rendered inline in claude.ai conversations. Not images. Not code blocks. Living HTML applications with JavaScript running inside the chat.

Anthropic 为 Claude 宣布了生成式 UI 几个小时前。交互式小部件 - 滑块、图表、动画 - 在 claude.ai 对话中内联渲染。不是图像。不是代码块。带有在聊天中运行的 JavaScript 的活 HTML 应用程序。

This wasn’t a surprise. Generative UI has been pushed by Vercel and others for a while, and I knew Anthropic would do something with it. This also isn’t the first time I’ve dug into Anthropic’s implementation details - I’ve previously reverse-engineered their sandbox architecture and written about their sandbox.

这并不令人惊讶。Generative UI 已经被 Vercel 和其他人推动一段时间了，我知道 Anthropic 会对此做些什么。这也不是我第一次深入研究 Anthropic 的实现细节 - 我之前已经反向工程了他们的 sandbox 架构并写过他们的 sandbox。

So I went to claude.ai with a specific purpose: understand exactly how they implemented it. I ended up building my own version for pi, the terminal-based coding agent.

所以我带着一个具体目的去了 claude.ai：精确理解他们是如何实现的。最后我为 pi，基于终端的编码代理，构建了自己的版本。

Part 1: Interrogating Claude About Its Own UI

第 1 部分：审问 Claude 关于其自身 UI

The Tool, Not the Markdown

工具，而非 Markdown

My first assumption was wrong. I thought Claude was outputting HTML as part of its markdown response and the frontend was rendering it inline. Claude corrected me:

我的第一个假设错了。我以为 Claude 在其 markdown 响应中输出 HTML，前端内联渲染它。Claude 纠正了我：

“Ha, yes! Caught me - it’s not ‘part of the markdown output’ at all. I call a tool called show_widget and pass the HTML as a parameter.”

“哈哈，是的！被你抓到了——它根本不是‘part of the markdown output’。我调用了一个名为 show_widget 的工具，并将 HTML 作为参数传递。”

So it’s a tool call. The same mechanism as web search or file operations. The HTML is a parameter payload, not streamed text. Here’s the shape Claude described:

所以这是一个工具调用。与网页搜索或文件操作相同的机制。HTML 是参数负载，而不是流式文本。这是 Claude 描述的形状：

{
 "i_have_seen_read_me": true,
 "title": "snake_c...