希望用户名首字母可以大写，好多人注册都不清楚名字需要区分大小写吧！
希望用户名首字母可以大写，好多人注册都不清楚名字需要区分大小写吧！
简介
为 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 要弥合的能力差距。
要理解原因，我们需要看看鼠标实际上做了什么。
鼠标实际上做了什么
每次鼠标交互本质上都是两种操作之一：
- 选择 —— 选择要操作的哪些数据
- 触发 —— 调用一个命令
让我们追踪一个具体例子。
你想在微信上给 JY Chen 发消息。
- 识别：微信渲染了 JY Chen 的头像和名字。你通过应用提供的视觉表现识别出那是 JY Chen——不是通过任何内部 ID，而是通过视觉表现。
- 选择：你点击了联系人卡片。视觉上是点击了一个 UI 元素。但幕后实际发生的是：应用将底层数据对象绑定到你当前的上下文——JY Chen 的内部用户 ID、服务器地址和其他你从未见过也不需要关心的元数据。
- 触发：你输入"你好！"然后点击发送。应用使用第 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 应用宿主。
