自从大语言模型（LLM）爆发以来，前端开发者接到了无数'给系统加个 AI 对话框'的需求。我们熟练地接入 API，处理流式（Streaming）响应，看着文字像打字机一样一个个蹦出来。
但这真的是 AI 时代前端交互的终点吗？
想象一下这个场景：用户问'帮我对比一下苹果和微软的近期股价'。传统的聊天机器人只能吐出一堆干瘪的文字，或者勉强渲染一个 Markdown 表格。但作为一名前端工程师，你的组件库里明明躺着精美的 Echarts K 线图、带有交互提示的卡片和丝滑的动画。
为什么我们不能让大模型直接'生成'一个可交互的 React 或 Vue 组件呢？答案是：可以。这就是目前前端领域最具颠覆性的范式——Generative UI（生成式 UI）。
什么是 Generative UI？
Generative UI 是指结合 AI 大模型的能力，在对话流中动态生成、下发并渲染带有完整样式和交互逻辑的前端界面的技术。
过去，前端预先写好 100 个页面的路由，用户通过'点击'来一步步寻找信息。而在 Generative UI 的理念下，'对话即界面'。前端只需要储备充足的'组件积木'，大模型会根据用户的意图，像产品经理一样实时挑选、组装这些组件，并直接推送到用户的眼前。
深度解密：Generative UI 的底层魔法
要实现 Generative UI，并不是靠大模型自己写 CSS 和 JS 代码，而是依赖两个核心技术的结合：大模型的 Function Calling（函数调用） 与 React Server Components (RSC)。
整个流程可以分为三个关键步骤：
1. 暴露'工具箱' (Function Calling)
大模型本身不懂怎么画图表，也没有实时数据，但它能精准理解用户的意图。我们可以在请求大模型时，向它提供一个包含可用前端组件的 JSON 描述（即 Tools）。
我们告诉 AI：'我这里有一个 WeatherCard 的工具，需要接收 city (城市名) 作为参数'。
2. 服务端的组件映射 (Server-side Mapping)
当用户输入'今天北京天气怎么样？'，大模型判断需要调用工具，于是返回一个结构化的指令，例如：{"function": "WeatherCard", "arguments": {"city": "Beijing"}}。
前端的 Server 侧（如 Next.js 的 Node.js 环境）截获这个指令，调用真实的第三方气象 API 获取北京的实时天气数据，并将数据注入到我们预先写好的 React 组件 <WeatherCard data={weatherData} /> 中。
3. 流式下发到客户端 (Streaming RSC)
借助 React 18+ 的流式渲染能力，服务端将这个已经包含真实数据的 React 组件，以虚拟 DOM 的形态直接通过 HTTP Stream '流式'传输给浏览器。
用户在对话框里看到的不再是一段 Markdown 文本，而是一个立刻可以点击、带有动画效果的天气卡片。
实战演练：用 Vercel AI SDK 搭建 Generative UI
空谈无益，让我们来看一段极其精简的核心代码。目前业界最成熟的方案是使用 Vercel AI SDK 配合 Next.js App Router。
以下代码展示了如何利用 streamUI 方法，让 AI 根据用户输入动态下发一个天气组件：
// app/actions.tsx (Server Action)
import { streamUI } from 'ai/rsc';
import { openai } from '@ai-sdk/openai';
import { z } from ;
= () => (
);
() {
;
result = ({
: (),
: userInput,
: ,
: {
: {
: ,
: z.({
: z.().(),
}),
: () {
mockData = (city);
(
);
},
},
},
});
result.;
}
