跳到主要内容

生成式 UI

问题​

什么是生成式 UI？如何用 LLM 的 Structured Output 驱动前端组件渲染？

答案​

一、概念​

生成式 UI（Generative UI）是指 LLM 不只输出文本，而是输出结构化数据来驱动 UI 组件的动态渲染：

二、实现方式​

方式一：Structured Output → 组件映射​

LLM 输出 JSON，前端根据 type 渲染对应组件：

// 定义输出 Schema
import { z } from "zod";

const UISchema = z.discriminatedUnion("type", [
  z.object({
    type: z.literal("weather"),
    city: z.string(),
    temperature: z.number(),
    condition: z.string(),
  }),
  z.object({
    type: z.literal("chart"),
    title: z.string(),
    data: z.array(z.object({ label: z.string(), value: z.number() })),
  }),
  z.object({
    type: z.literal("text"),
    content: z.string(),
  }),
]);
后端：生成结构化输出
import { generateObject } from "ai";
import { openai } from "@ai-sdk/openai";

const { object } = await generateObject({
  model: openai("gpt-4o"),
  schema: UISchema,
  prompt: "查看北京天气",
});
// → { type: "weather", city: "北京", temperature: 25, condition: "晴" }
前端：根据 type 渲染组件
function DynamicUI({ data }: { data: z.infer<typeof UISchema> }) {
  switch (data.type) {
    case "weather":
      return <WeatherCard city={data.city} temp={data.temperature} />;
    case "chart":
      return <BarChart title={data.title} data={data.data} />;
    case "text":
      return <p>{data.content}</p>;
  }
}

方式二：Vercel AI SDK streamUI​

后端：streamUI
import { streamUI } from "ai/rsc";
import { openai } from "@ai-sdk/openai";

export async function submitMessage(input: string) {
  "use server";

  const result = await streamUI({
    model: openai("gpt-4o"),
    prompt: input,
    tools: {
      showWeather: {
        description: "显示天气信息",
        parameters: z.object({ city: z.string() }),
        generate: async function* ({ city }) {
          yield <div>加载 {city} 天气中...</div>;
          const weather = await fetchWeather(city);
          return <WeatherCard {...weather} />;
        },
      },
    },
  });

  return result.value;
}

三、典型产品案例​

产品生成式 UI 场景
v0.dev根据描述生成 React 组件代码
ChatGPT数据分析结果生成图表
Perplexity搜索结果生成引用卡片
Claude Artifacts生成可交互的代码 / 图表

四、设计模式​

常见面试问题​

Q1: 生成式 UI 和纯文本输出相比有什么优势？​

答案：

  • 交互性：组件可点击、可折叠、可复制，纯文本只能阅读
  • 信息密度：图表、卡片比文字更直观
  • 可操作性：生成的表单可以直接填写提交
  • 品牌一致性：使用团队的设计系统组件

Q2: Structured Output 如何保证 LLM 输出格式正确？​

答案：

  • OpenAI 的 response_format: { type: "json_schema" } 可以强制 100% 格式匹配
  • Vercel AI SDK 的 generateObject 封装了 Schema 验证
  • 如果模型不支持 JSON Schema 模式，需要在 prompt 中强调格式要求 + 后端做 zod 校验和容错

相关链接​