AI 时代的新 UI：当下与近未来的界面应该长什么样

tags: #llm #ai-engineering #ui

前言

这是一个 14 篇系列的最后一篇。前 13 篇我们都在讲**“如何让 LLM 在后台跑得对、跑得稳、跑得起”——但 LLM 应用最终还是要给用户看**。

LLM 不只是”加一个 chat 框”。它正在重新定义 UI：

  • 按钮 → Prompt 按钮（“帮我写一封辞职信”）
  • 表单 → 生成式表单（用户说一句话，表单自动填充）
  • 静态页面 → Agent 工作台（用户拖数据，agent 自己加工）
  • 导航栏 → 意图路由器（用户说”我想看上周的财报”，直接跳转）

这一篇不讲代码细节，讲 UI 设计范式：

  1. 从命令到对话：聊天框不是万能解
  2. Generative UI：LLM 自己生成 UI
  3. Agent 优先：UI 为 agent 工作流设计
  4. 3 个实战 UI 模式
  5. 近未来趋势

一、从命令到对话：聊天框不是万能解

很多团队的 LLM 应用第一版就是”加个 chat 框”。这是最大的错误。

图 1：聊天框 ≠ 任何场景的最佳 UI

哪些场景不适合聊天框

  1. 明确任务型操作：用户想”订明早 8 点去机场的出租车”，按钮 + 表单比 chat 高效 10 倍
  2. 大量数据浏览：用户想”看 Q3 各产品销量对比”，图表比文字描述直观 100 倍
  3. 高频重复任务：用户每天要”导出昨天的销售报表”，自动化 cron 比每天问 agent 合理

哪些场景适合聊天框

  1. 开放式探索：“帮我想想下周去东京的行程” → chat 自然
  2. 多步复杂决策：“分析这季度数据，给出明年规划” → Agent + chat 协作
  3. 自然语言专属：“把这份合同翻译成英文” → 没有比 chat 更直接的 UI

核心原则：LLM 是新工具，但 UI 不应该是新范式。好 UI = 任务最自然的形式，不一定是聊天。

二、Generative UI：LLM 自己生成 UI

这是 2026 年最重要的 UI 趋势——LLM 不只生成文本，而是生成完整的 UI 组件。

案例 1：Claude Artifacts

Claude.ai 的 Artifacts 功能让 LLM 生成可交互的 React 组件：

User: 帮我画一个 SVG 显示过去 7 天的天气
Claude: [生成完整的 React 组件，包含 7 个柱状图]
       [用户可以点击、悬停、缩放]

不是 LLM 告诉你答案，而是 LLM 给你一个 app。

案例 2：Vercel AI SDK 的 Generative UI

Vercel AI SDK 通过 useChat hook + message parts 支持流式渲染自定义 UI 组件：

import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';

function Chat() {
  // AI SDK v4+: api endpoint 通过 transport 配置
  const { messages, sendMessage } = useChat({
    transport: new DefaultChatTransport({ api: '/api/chat' }),
  });
  const [input, setInput] = useState('');

  return (
    <>
      {messages.map((m) => (
        <Message key={m.id} message={m} />
      ))}
      <form
        onSubmit={(e) => {
          e.preventDefault();
          sendMessage({ text: input });
          setInput('');
        }}
      >
        <input value={input} onChange={(e) => setInput(e.target.value)} />
      </form>
    </>
  );
}

function Message({ message }) {
  // message.parts 包含 LLM 流式返回的多个 parts（v4+ 新结构）
  // parts 包括 type='text'、type='reasoning'、type='tool-<toolName>' 等
  return message.parts.map((part, i) => {
    if (part.type === 'text') return <p key={i}>{part.text}</p>;
    if (part.type === 'tool-weather') return <WeatherCard key={i} data={part.output} />;
    if (part.type === 'tool-chart') return <Chart key={i} data={part.output} />;
  });
}

LLM 返回的是 JSON schema，前端根据 schema 渲染对应组件。注意 message.toolInvocations 在 v4+ 中已被 message.parts 取代（每个 tool call 是一个独立的 part）。

案例 3：Chart-as-Answer

// LLM 输出：用户问"Q3 各产品销量对比"
// 1. LLM 调用工具查数据库
// 2. 工具返回结构化数据
// 3. LLM 决定用 chart 组件展示
// 4. 前端渲染 <Chart data={...} />

const result = streamText({
  model: openai('gpt-4o'),
  tools: {
    querySales: tool({ /* ... */ }),
    renderChart: tool({
      description: '展示数据图表',
      inputSchema: z.object({
        type: z.enum(['bar', 'line', 'pie']),
        data: z.array(z.any()),
        title: z.string(),
      }),
      execute: async (input) => {
        // 返回结构化数据，前端渲染
        return { type: input.type, data: input.data };
      },
    }),
  },
  prompt: userQuery,
});

用户不再读文字，而是看图表。

三、Agent 优先：UI 为 agent 工作流设计

当 LLM 应用升级为 Agent 后，UI 必须跟着升级：

旧 UI：用户点按钮 → 后端执行

[用户点击"导出报表"] → [按钮禁用] → [loading 圈] → [下载链接]

新 UI：Agent 在跑 → 用户实时看到进度

用户输入: "分析 Q3 销售数据"
  ↓
UI 显示 agent 思考过程：
  "🤔 正在思考：需要查询 3 个数据源..."
  "🔧 调用工具: query_database('sales_q3')"
  "✓ 工具结果: 1247 条记录"
  "🔧 调用工具: render_chart({ type: 'bar' })"
  "✓ 工具结果: 图表已生成"
  "💬 最终答案: [图表 + 文字说明]"

Vercel AI SDK 的 useChat 支持 tool call UI（v4+ 用 message.parts 替代 toolInvocations）：

function Message({ message }) {
  // 过滤出 tool 类型的 parts
  const toolParts = message.parts.filter((p) => p.type.startsWith('tool-'));
  const textParts = message.parts.filter((p) => p.type === 'text');

  return (
    <>
      {toolParts.map((part) => (
        <ToolCallCard
          key={part.toolCallId}
          toolName={part.type.replace('tool-', '')}
          input={part.input}
          output={part.output}
          state={part.state}  // 'input-streaming' | 'input-available' | 'output-available' | 'output-error'
        />
      ))}
      {textParts.map((part, i) => <p key={i}>{part.text}</p>)}
    </>
  );
}

Agent UI 的 3 大要素

  1. 思维流可视化：用户能看到 agent 在想什么、做什么（信任建设）
  2. 工具调用面板：每个工具调用的输入 / 输出 / 延迟可展开查看
  3. 人工介入点：危险工具调用前弹确认框（user-in-the-loop）

案例：Cursor / Devin / v0 的 agent UI

  • Cursor：左侧 chat + 右侧代码 diff，用户全程看着 agent 改代码
  • Devin：左 chat + 中 sandbox 浏览器 + 右 terminal，agent 操作的全过程都在 UI 上
  • v0（Vercel）：用户说一句话，实时生成完整 React 应用，UI 同步更新

这些不是”聊天框”，而是 Agent Workspace——UI 为 agent 设计，不是为人设计。

四、3 个实战 UI 模式

模式 1：Hybrid（混合式）

传统 UI + LLM 助手按钮。不颠覆现有 UI，渐进增强：

[产品列表页]
  [传统表格 + 筛选]
    + [✨ AI 助手]（按钮，弹出 chat 抽屉）
       → "帮我找出销量下滑 30% 的产品"

适用：传统 Web 应用加 LLM 能力，风险最低。

模式 2：Copilot（副驾驶）

LLM 作为辅助，主 UI 还是传统：

[代码编辑器] + [右侧 Copilot 面板]
  → 用户写代码，Copilot 实时建议
  → 用户问"这段代码是什么意思"，Copilot 解释

适用：写作 / 编程 / 设计类工具。GitHub Copilot / Cursor / Notion AI 都是这种。

模式 3：Agent Workspace（Agent 工作台）

UI 完全为 agent 设计，用户主要做”指令 + 监督 + 介入”：

[Chat] [Files] [Browser] [Terminal] [Settings]
  ↕     ↕      ↕        ↕         ↕
  [用户输入] [agent 操作的所有资源]

适用：Devin / Cursor Agent Mode / 自动化测试平台。用户角色从”操作员”变成”指挥官”。

五、近未来趋势

2026-2028 年 LLM UI 的几个明确趋势：

趋势 1：对话 → 意图（Conversational → Intentional）

未来的 UI 不再需要”打字”：

  • 语音优先：Whisper / 实时语音模型 + Agent 直接执行
  • 手势 / 眼神：VR / AR 设备上的多模态输入
  • 环境感知：Agent 主动观察用户行为（打开了什么页面、停留多久），主动介入而不是被动回答

趋势 2：UI = Agent 的输出（UI-as-Output）

UI 不再是”开发者设计 + 用户使用”——LLM 实时生成 UI：

  • 用户说”我要看北京到上海的航班” → LLM 实时渲染航班列表 UI
  • 用户说”分析这个 CSV” → LLM 实时渲染图表 + 数据透视 UI

每个 query = 一个新 UI。固定 UI 时代结束。

趋势 3：Agent 经济（Agentic Economy）

Agent 互相调用、互相协作：

  • 用户的 agent 调用”订票 agent” → 订票 agent 调用”支付 agent” → 支付 agent 调用”银行 agent”
  • 每个 agent 都有自己的 UI，用户在最高层 agent 看到整体流程

类似”淘宝”是商家和消费者的市场，未来是 agent 和 agent 的市场。

趋势 4：个性化 UI 退役

2026 年所有 Web 应用的 UI 长得越来越像（Vercel / shadcn / Tailwind 模板）。LLM 时代不再需要个性化 UI——用户每次 query 都得到为其定制的 UI，固定模板失去意义。

六、设计 LLM UI 的 5 个原则

无论用什么模式，5 个原则通用：

  1. 透明：Agent 在做什么、用了什么工具、花了多少钱，用户能看见
  2. 可控：危险操作必须 user-approval，永远不能 auto-execute
  3. 可中断：用户能随时暂停 / 取消 / 改方向
  4. 可回滚：Agent 做的所有操作都能 undo
  5. 可预期：Agent 的能力边界明确告诉用户，不要给”AI 万能”的错觉

七、对前端工程师的影响

LLM 应用对前端工程师的要求正在变：

之前现在
写 React 组件设计组件 schema（LLM 渲染）
处理用户输入处理 LLM 输出（流式 JSON）
调 API设计 tool schemas（LLM 调用）
写 loading 状态设计 agent 思维流 UI
写测试写 eval 集 + 端到端 trace

不是被 LLM 取代，而是写代码的对象从”浏览器 DOM”变成”LLM 输出”。

总结

5 个 takeaway：

  • 聊天框 ≠ 万能 UI：任务型 UI / 图表 / 自动化 trigger 在很多场景更好。
  • Generative UI 是趋势：LLM 自己生成 UI（Artifacts / 图表 / 表单），每个 query 一个新 UI。
  • Agent 优先 UI：思维流 + 工具面板 + 介入点，用户从操作员变成指挥官。
  • 3 个实战模式：Hybrid（渐进增强）/ Copilot（副驾驶）/ Agent Workspace（工作台）。
  • 前端工程师转型：从写 DOM 到设计 LLM 输出 schema + 流式 UI + agent 思维流。

系列完结 🎉

14 篇博客覆盖 LLM 应用工程的全栈：

Batch主题篇数
1LLM 基础认知3
2RAG 核心2
3Agent 核心2
4工程化三件套3（Memory + Observability + Evaluation）
5生产化收官 + AI UI4（成本优化 + Guardrails + Production Engineering + AI UI）
合计14 篇（28 个 .mdx）

如果你读完了这个系列，你应该能：

  • 设计并实现一个生产级 RAG 系统
  • 构建多 agent 协作的工作流
  • 用 observability + eval 持续改进质量
  • 用 caching + routing 控制成本
  • 用 guardrails 防范安全威胁
  • 设计 LLM 原生的 UI 体验

下一步：动手做项目。理论看完不练，等于没看。

参考资料

🔗 原文链接 分享让更多人看到

// 相关文章

2026年7月7日

Agent 架构：ReAct、Plan-and-Execute 与多 Agent 协作

从单步工具调用到完整 agent 思考循环——ReAct / Plan-and-Execute / Multi-Agent 三大主流架构与生产权衡

2026年7月7日

Function Calling 与 Tool Use：从协议到工程实现

LLM 怎么调用你的代码——JSON schema 设计、tool 选择、错误处理、Zod 强校验、生产工程陷阱

2026年7月7日

Embedding 模型与向量数据库选型实战

RAG 的两个核心依赖怎么选——BGE / OpenAI / Cohere / Voyage 选哪个？Pinecone / Milvus / pgvector / Qdrant / Weaviate 怎么挑？

评论