自从大语言模型(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.;
}


