千问点奶茶时弹出的 UI 是怎么实现的，是生成式 UI 吗

2026-02-28 | Web开发 | 前端 | 阅读 | 956 字 | 3 分钟

文章目录

一、方案概览
二、实现简介
三、方案对比

前段时间千问奶茶免单很火，可以直接在 chat 界面输入“千问，帮我点杯奶茶”，后续就像我们自己操作一样，一步一步完成下单。

我们知道， AI chat 现在比较普遍的数据交互是 markdown，markdown 是渲染不出这种交互式UI 的，必须借助 HTML+CSS+JS 的能力才能做到。那么千问是怎么实现的呢？是交互过程中生成的 UI，前端做渲染吗？我感觉这个选项可以首先排除，具体原因下面会做分析。

一、方案概览

目前实现这种效果的常见方案主要有以下几种：

硬编码规则，根据服务端返回的特定格式的数据结构，映射到封装好的固定 UI。
让 AI 生成 html ，缺点是效果不稳定，需要持续调 prompt，这也是为什么我一开始觉得千问用的应该不是这个方案的原因。
定制一些卡片模板，告诉模型 input schema ，模型按数据结果填进来，缺点是模版还需要人力开发。
google/a2ui 这类方案，让 AI Agent 直接驱动或生成用户界面，实现“对话即操作”“自然语言即界面”，与第二点的差异在于，前面 AI 输出的是代码，而这个方案生成的是schema，由引擎去解析，而不是直接渲染。

二、实现简介

首先应该有个输出定制的过程，输出格式可能是这样

// 硬编码规则
{
  "title": "标题",
  "summary": "总结",
  "bullets": ["要点1", "要点2", "要点3"]
}
// AI 生成 HTML
"<section><h3>标题</h3><p>内容</p></section>"
// 定制卡片模板
[
  { "type": "metric", "title": "成本", "value": "低", "desc": "描述" },
  { "type": "step", "title": "步骤", "items": ["A", "B", "C"] }
]
// google/a2ui 类方案
{
  "type": "container",
  "children": [
    { "type": "text", "variant": "title", "content": "A2UI 风格标题" },
    { "type": "text", "content": "这里是可组合 UI schema 示例" },
    { "type": "list", "items": ["项1", "项2", "项3"] }
  ]
}