• 时间:
  • 分类:

简介

为 AI Agent 时代重新思考 UI

几十年来，用户界面一直专为人类设计——图形化、可交互，GUI 服务于人类视觉和双手。但随着大语言模型（LLM）作为新型用户出现，我们面临一个根本性问题：

当用户不是人类时，用户界面应该是什么样的？

这正是 面向 Agent 的 TUI（AOTUI） 要回答的问题。

是什么：一种新的界面范式

面向 Agent 的文本用户界面（AOTUI） 是一种以 LLM Agent 为一等公民 的界面范式。

它不为人类眼睛去渲染像素，而是为 LLM 上下文窗口渲染语义化 Markdown 文本。没有鼠标点击，Agent 调用Tool/Funtion。没有视觉提示（颜色、布局、头像），数据通过文本引用来引用。

简言之：AOTUI 就是当你为模型而非人类设计时，用户界面的样子。

为什么：根本性的不匹配

传统 GUI 中的每个设计决策都是为人类的三种特有能力服务的：

人类能力在 GUI 中的作用
视觉感知颜色、布局、空间关系、图标
双手通过鼠标和键盘进行点击、拖拽和输入
持续感知体验持续流动的 UI——悬停状态、动画、实时反馈

CSS 的存在是因为人类能看到。鼠标事件存在是因为人类有双手。动画的存在是因为人类持续地感知变化。

LLM 不具备这些能力。

LLM 缺少什么影响
没有视觉CSS、颜色和布局不可见——完全是无意义的 token
没有双手无法悬停、点击或拖拽
没有持续感知不会体验流动的 UI 流——只能在每个时刻读取一个静态快照

核心洞察：人类和 LLM 通过根本不同的模态感知现实。这种差异要求一种全新的界面范式。

怎么做：从约束到设计

让我们逐一审视每个约束——你会发现大多数其实是好消息。

没有视觉 → 不需要渲染复杂性

不需要为人类眼睛生成像素，就不需要完整的渲染引擎、像素级精确的布局或 CSS。语义化文本格式既足够又更好。我们不抵抗这个约束，而是拥抱它：渲染 Markdown，而非像素。

没有持续感知 → 更简单的状态模型

LLM 不会观看 UI 随时间变化。它读取当前状态的完整快照，推理，然后行动。这实际上大大简化了状态模型——没有动画、没有部分状态、没有过渡。每次交互都是一个干净的读取 → 推理 → 行动循环。同样是好消息。

没有双手 → 真正的问题

这里变得困难了。

没有键盘？ 实际上不是问题。键盘给人类提供了输入文本的方式。LLM 原生输出文本。它们不需要键盘——它们就是键盘。

没有鼠标？ 这才是真正的问题。 没有鼠标，LLM 无法在任何传统 UI 中指向、选择或触发操作。这就是 AOTUI 要弥合的能力差距。

要理解原因，我们需要看看鼠标实际上做了什么。

鼠标实际上做了什么

每次鼠标交互本质上都是两种操作之一：

  1. 选择 —— 选择要操作的哪些数据
  2. 触发 —— 调用一个命令

让我们追踪一个具体例子。

你想在微信上给 JY Chen 发消息。

  1. 识别：微信渲染了 JY Chen 的头像和名字。你通过应用提供的视觉表现识别出那是 JY Chen——不是通过任何内部 ID，而是通过视觉表现。
  2. 选择：你点击了联系人卡片。视觉上是点击了一个 UI 元素。但幕后实际发生的是：应用将底层数据对象绑定到你当前的上下文——JY Chen 的内部用户 ID、服务器地址和其他你从未见过也不需要关心的元数据。
  3. 触发：你输入"你好！"然后点击发送。应用使用第 2 步捕获的数据作为参数构造函数调用——你提供了消息文本，应用提供了其他所有信息。

在底层，你的交互转化为类似这样的操作：

// 第 2 步：点击卡片默默绑定了这些数据
selectedContact = { id: "jy_chen_id_392", serverId: "sz-01", encryptKey: "..." }

// 第 3 步：点击发送调用了这个函数——使用绑定的数据
sendMessage(recipient: selectedContact, message: "你好！")

你只看到了一个名字和一个头像。你从未接触过用户 ID 或服务器地址。视觉界面捕获了复杂性并将其隐藏——只呈现你做决定所需的信息，默默绑定其余部分。

LLM 没有这样的桥梁。 它看不到头像，也无法点击。AOTUI 的工作就是在文本中重建这座桥梁。

AOTUI 如何重建桥梁

AOTUI 为没有鼠标的 Agent 解决了问题的三个部分——识别、选择和触发。

1. 识别：在文本中标注数据

AOTUI 不渲染头像，而是将数据以标注文本的形式暴露在结构化的 View 中：

<view id="contacts" type="ContactList" name="联系人列表" app_id="wechat">
  ## 联系人

  - [Wills Guo](Contact:contacts[0]) — 在线
  - [Emma Chen](Contact:contacts[1]) — 离开
  - [JY Chen](Contact:contacts[2]) — 在线
</view>

View 是一个边界清晰、自包含的上下文单元——屏幕或面板的文本等价物。LLM 通过阅读标签"识别"JY Chen，就像人类通过看到头像识别他一样。

2. 选择：类型化引用

光有标签还不够。LLM 还需要一种方式在调用操作时引用所选数据。AOTUI 将类型化引用直接嵌入每个标签旁边：

[JY Chen](Contact:contacts[2])

格式是 [人类可读标签](类型:引用路径)。当 LLM 想要"选择"JY Chen 时，它使用引用 contacts[2] 作为参数。在执行时，运行时根据其索引解析这个路径——检索完整的底层数据对象（user_id、serverId、encryptKey 以及应用需要的其他信息）——并传递给函数。

LLM 永远看不到这些。就像你永远看不到 jy_chen_id_392。AOTUI 将 LLM 无需关心的实现细节屏蔽在外，同时仍然给它精确、无歧义的引用来执行操作。

3. 触发：Tools 作为类型化函数调用

LLM 原生产生结构化函数调用——这正是 tool-calling 的设计目的。AOTUI 将每个交互元素映射为一个类型化的 Tool，LLM 可以调用：

### 可用工具
- `open_chat(contact: Contact)` — 打开对话
- `send_message(recipient: Contact, message: string)` — 发送消息

不需要鼠标。LLM 调用函数即可。

<Callout type="default">
设计原则：Tool 触发状态转换；它们不返回大量数据。数据始终通过下一个 Snapshot 中的 View 更新流动——而非通过 Tool 调用结果。
</Callout>

完整示例：给 JY Chen 发消息

让我们在 AOTUI 中重放微信场景。

第 1 步 — 应用发送 Snapshot

<view id="contacts" type="ContactList" name="联系人列表" app_id="wechat">
  ## 联系人

  - [Wills Guo](Contact:contacts[0]) — 在线
  - [Emma Chen](Contact:contacts[1]) — 离开
  - [JY Chen](Contact:contacts[2]) — 在线

  ### 可用工具
  - `open_chat(contact: Contact)` — 打开对话
  - `send_message(recipient: Contact, message: string)` — 发送消息
</view>

第 2 步 — LLM 接收指令："给 JY Chen 发送'你好！'"

LLM 阅读快照，识别 contacts[2] 是 JY Chen，构造调用：

{
  "tool": "send_message",
  "arguments": { "recipient": "contacts[2]", "message": "你好！" }
}

第 3 步 — 应用解析并执行

contacts[2] → { id: "jy_chen_id_392", name: "JY Chen" } → 消息发送。

第 4 步 — 更新后的 Snapshot 到达

<view id="chat_jy" type="ChatDetail" name="与 JY Chen 的对话">
  ## 与 [JY Chen](Contact:contacts[2]) 的对话

  - [你](User:currentUser): 你好！ — 刚刚

  ### 可用工具
  - `send_message(message: string)` — 发送另一条消息
  - `close_view()` — 关闭此对话
</view>

LLM 现在在全新的上下文中操作。没有渲染像素。没有鼠标。没有 CSS。只有干净的结构化文本和类型化函数调用——通过读取 → 推理 → 行动的循环流转。

实现架构

你可能会问："如果我们是为纯文本的 LLM 构建，为什么还要用 HTML 和 JavaScript？"

因为 Web 生态系统是成熟的。AOTUI 使用 HTML 作为中间表示——开发者编写熟悉的 JSX/Preact 组件，在轻量级虚拟 DOM 中渲染为 HTML，然后转换为 LLM 可读的 Markdown：

开发者编写：              运行时渲染：              LLM 接收：
Preact JSX 组件      →   Worker DOM 中的 HTML  →   Markdown Snapshot
<View id="contacts">      <div data-view="...">    <view id="contacts">
  {useViewTypeTool(...)}    <span data-tool="...">  ## 联系人
</View>                   </div>                    </view>

这个架构让开发者使用熟悉的工具，而框架处理语义文本生成的复杂性。

总结

GUI 概念AOTUI 对应物
可视页面View（语义容器）
CSS / HTML 渲染Markdown 文本
头像 / 颜色 / 位置文本引用（Type:reference）
鼠标点击Tool（函数调用）
持续的 UI 流离散的 Snapshot
屏幕空间上下文窗口 token

AOTUI 不会缩小 GUI 或移除 CSS。它构建了一种不同类型的界面——一种 LLM 可以像人类操作图形应用一样自然地操作的界面。

下一步：认识 Agentina → — 基于 AOTUI 构建的 Agent 应用宿主。

标签: none

添加新评论