前言

智能 Agent 要真正发挥价值，必须与用户进行高效的交互。随着 LLM 技术的发展，对话式 UI（Conversational UI）和 Agent 工具能力的可视化成为下一代应用的关键。本文将梳理从 Google Assistant 到 Vercel AI SDK 及 assistant-ui 的 Agent UI 框架演进，探讨业界最佳实践，并分析“AI IDE”为何正逐步成为智能体应用的理想承载环境。

Part 1：对话式 UI 的设计范式

Google Assistant UI 的设计哲学

对话式用户界面的本质，是让自然语言成为操作接口本身（NL as UI）。Google Assistant 作为对话系统的典型代表，其设计全面考虑了如何把复杂的交互映射为结构化、可编程的流程。核心思想包括：

  • Intent（意图）：准确解析用户想做什么。
  • Entity（实体）：提取意图所需的参数信息（如城市、日期等）。
  • Context（上下文）：支持多轮对话，维护语义连贯性。例如用户补充“明天”时系统知道应该关联上一步的问题。
  • Fulfillment（执行回应）：依据解析结果调用后端服务，实现具体动作，并将结果以自然语言返回。

这种体系允许“从自然语言到 API 调用”的无缝过渡，极大提升了交互能力与自动化水平。

研究显示，良好的自然语言接口可显著降低学习成本，提高用户粘性。但系统要高容错，还需依赖槽位抽取、上下文感知等结构化机制，提升对歧义输入的鲁棒性。自然语言用户界面——维基百科

对话流的状态管理

在实际 Agent 系统（如 Google Assistant、Siri、Alexa）中，状态管理扮演着中枢角色：

  • Session State（会话状态）：记录当前轮对话及上下文，例如“订票”流程中的所有步骤。
  • User State（用户状态）：跨会话保存的个性化偏好、历史操作等，如上次目的地、常用联系人。

分层管理让智能体既能精准理解当下需求，又能根据历史行为提升响应质量，支撑复杂的连续对话与多工具协作。

Part 2：Vercel AI SDK 生态详解

Vercel AI SDK 是近年来极富影响力的 LLM 应用开发工具链，支持 React、Next.js、Svelte、Vue 等多框架，在前端/全栈领域获得良好生态。它的优势是屏蔽不同 LLM 厂商协议差异、内置对话流管理与流式 UI 支持，极大降低了 Agent UI 的实现门槛。Vercel AI SDK 文档

快速入门与核心结构

安装依赖：

1

npm install ai @ai-sdk/react
  • ai：核心包，包含与 LLM 通信、流式推理（如 streamText）等功能。
  • @ai-sdk/react：UI Hooks 包，封装了对话流、文本补全等前端交互控制。

useChat：对话流核心 Hook

useChat 是构建实时对话 UI 的基础。特点包括：

  • 消息对象的有序流式渲染
  • 会话状态、加载/错误处理自动管理
  • 丰富的自定义事件与扩展接口

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

export default function ChatUI() {
  const { messages, sendMessage, status } = useChat({
    transport: { api: "/api/chat" }
  });

  return (
    <div>
      {messages.map(m => (
        <div key={m.id} style={{ margin: "6px 0" }}>
          <span style={{ fontWeight: m.role === 'user' ? 'bold' : 'normal' }}>
            {m.role === 'user' ? '用户' : 'AI'}:
          </span>
          <span style={{ marginLeft: 6 }}>{m.content}</span>
        </div>
      ))}
      <input
        type="text"
        placeholder="请输入..."
        onKeyDown={e => {
          if (e.key === 'Enter') sendMessage(e.target.value);
        }}
        style={{ marginTop: 12 }}
      />
    </div>
  );
}

useCompletion：通用补全场景

useCompletion 适合一切非对话性质的智能补全（如代码、单条文本等）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { useCompletion } from "@ai-sdk/react";
import { openai } from "@ai-sdk/openai";

export default function CompletionUI() {
  const { completion, sendCompletion } = useCompletion({
    model: openai("gpt-4o-mini"),
    prompt: "Once upon a time..."
  });

  return (
    <div>
      <div>{completion}</div>
      <input
        type="text"
        onKeyDown={e => {
          if (e.key === 'Enter') sendCompletion(e.target.value);
        }}
        placeholder="补全文本"
      />
    </div>
  );
}

服务器端与流式输出

后端常用 streamText API 实现大模型输出的实时推送。好处是：用户无需等待整体结果，便可陆续获取生成文本或工具调用结果。前端 Hooks 消费流数据，自动完成 UI 更新。

Part 3：assistant-ui 及 AI Elements 组件库

assistant-ui：可组合对话 UI 体系

Vercel 官方的 assistant-ui 提供适配 AI SDK 的高阶对话 UI 组件，涵盖：

  • 对话流渲染：ChatThread、MessageList 等基础控件
  • 工具调用插槽：如自定义按钮、表单区块，便于 Agent 复杂能力输出
  • 内置状态同步：自动衔接 useChat/useCompletion 数据流

所有组件高度可组合、解耦，风格简洁，并可使用 useChatRuntime 管理运行时上下文，满足多 Agent、多模型应用场景。

AI Elements：高质量对话控件库

AI Elements 是面向产品级落地的 UI 组件集合。主要特性：

  • 流式消息自动渲染，用户体验顺畅
  • Markdown 支持，兼容图片、代码块等富文本格式
  • 工具调用结果展示，可插拔的扩展区域（如卡片、警告、表格等）
  • 主题可配置，适应主流前端设计体系

这类高质量组件解决了绝大多数工程落地时的包袱——开发者专注业务逻辑即可，大幅提升迭代效率。

Part 4：实战集成案例（Next.js）

后端 API 代码 /app/api/chat/route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import { openai } from "@ai-sdk/openai";
import { streamText, UIMessage, convertToModelMessages, tool } from "ai";
import { frontendTools } from "@assistant-ui/react-ai-sdk";

export async function POST(req: Request) {
  const { messages, system, tools } = await req.json();
  return streamText({
    model: openai("gpt-4o"),
    system,
    messages: convertToModelMessages(messages),
    tools: {
      ...frontendTools(tools),
      get_weather: tool({
        description: "获取当前天气",
        execute: async ({ city }) => `Weather in ${city}: sunny`
      }),
    },
  }).toUIMessageStreamResponse();
}

前端主入口集成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
import ChatThread from "./ChatThread"; // 假设你已实现自定义的对话流渲染

export default function Home() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" })
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <ChatThread />
    </AssistantRuntimeProvider>
  );
}

最佳实践补充：可结合工具调用结果的表单插槽、流式进度条等自定义交互，打造 IDE 级丰富体验。例如上传代码片段、文件拖拽、表格输出、链式 Agent 管理等。

小结与展望

本文系统梳理了 Agent UI 的设计演进思路，从 Google Assistant 的结构化对话架构，到 Vercel AI SDK/assistant-ui/AI Elements 的现代通用 UI 方案。实践表明，场景驱动的对话流、可配置工具链与状态分层，是高质量 Agent 应用的三大基石。

最后，AI IDE 正在成为智能体的“容器”：它集成了对话框、代码/数据编辑、实时工具调用、Agent 生命周期可视化，多智能体并发。这样的平台不仅能加速研发迭代，也将成为下一个 Agent 生态的创新沃土。

欢迎留言交流你的 Agent UI 设计经验与见解！