问 AI「番茄炒蛋怎么做？」，它可以回复一大段文字，也可以回复一张能勾选的步骤卡、一个按钮、一个计时器。由 AI 在运行时决定要显示什么界面，这就是 Generative UI。
这期视频我们用同一个「厨房助手」页面，把 Generative UI 的三种做法各做一遍，看看 AI 的自由越大，能换来什么、又要付出什么。所有回复、时间和 token 数都来自真实的 API（OpenRouter、openai/gpt-6-luna）。
你会学到：
・什么是 Generative UI，以及业界的三种做法（Vercel AI SDK、Google A2UI、Gemini dynamic view）
・第一种「选组件」：每个组件当作一个 strict 的 tool，tool_calls → render[名字](数据)
・tool call 在这里的意思是「把这个组件画出来」；createElement + textContent 让数据只被当作文字
・按钮的选择作为新的 user 消息发回模型；勾选和计时器留在页面里处理；没有合适的组件时显示文字
・第二种「搭积木」：用 JSON Schema 的 anyOf 定义一套积木，response_format 保证回复是 blocks 数组
・第三种「写成页面」：innerHTML 会让模型的 CSS 改掉你的页面，<img onerror> 能把用户的 cookie 发到别的网站（XSS）
・正确做法：sandbox 的 iframe + srcdoc，只开 allow-scripts（MCP Apps 也是这样显示界面）
・三种做法的真实成本：189、288、646–844 个 token；3.5、4.0、约 7 秒
・实际开发中怎么选择
动手试试：在第一种做法里再加一个组件（比如购物清单），看看模型什么时候会选它。
注意：API key 就像密码，不要放在公开网站的前端代码里。
