Agent Apps崛起：告别Skills，Agent成为应用一等用户

为 AI Agent 时代重新思考 UI

这几十年来，咱们的界面都是给人类用的——图形、可交互，一切围绕着人的视觉和十指转。但大语言模型（LLM）现在也成了“用户”，一个根本性问题就摆上台面了：

当用户不是人，而是模型时，界面长什么样？

这就是面向 Agent 的 TUI（AOTUI）要回答的事情。

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

面向 Agent 的文本用户界面（AOTUI），说白了，就是把 LLM Agent 当成头等公民的一种界面范式。

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

一句话总结：AOTUI 就是当你为模型设计界面、而不是为人设计时，界面该有的样子。

为什么：根本性的不匹配

传统 GUI 里的每一个设计决策，本质上都在为人类三种独特的能力服务：

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

但 LLM 压根儿没有这些能力。

所以结论其实很清晰：人类和 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 步：点击卡片悄悄绑定了这些数据
selectedContact = { id: "jy_chen_id_392", serverId: "sz-01", encryptKey: "..." }

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

你只看到了一个名字和一个头像，从来没碰过用户 ID 或服务器地址。视觉界面把复杂性抓过来藏了起来——只给你做决策需要的信息，默默地把剩下的都封装好。

LLM 可没有这样一座桥。 它看不到头像，也点不了。AOTUI 要做的，就是在文本世界里，把这座桥重新搭起来。

AOTUI 如何重建桥梁

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

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

AOTUI 不画头像，而是把数据以标注文本的形式，暴露在一个结构化的 View 中：

  ## 联系人

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

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 只管调用函数就行。

设计原则：Tool 触发状态转换，但不返回大量数据。数据始终通过下一个 Snapshot 中的 View 更新来流动——而不是通过 Tool 调用的结果。

完整示例：给 JY Chen 发消息

咱们在 AOTUI 里把微信场景重演一遍。

第 1 步 — 应用发送 Snapshot

  ## 联系人

  - [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)` — 发送消息

第 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 到了

  ## 与 [JY Chen](Contact:contacts[2]) 的对话

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

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

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

实现架构

到这里你可能会问：“既然是给纯文本的 LLM 做的，为什么还要用 HTML 和 Ja vaScript？”

原因很简单：Web 生态系统太成熟了，不用白不用。AOTUI 只是把 HTML 当作中间表示——开发者写熟悉的 JSX/Preact 组件，在轻量级的虚拟 DOM 里渲染成 HTML，然后再转换成 LLM 能读懂的 Markdown：

开发者写的是：              运行时渲染的是：              LLM 收到的是：
Preact JSX 组件      →   Worker DOM 中的 HTML  →   Markdown Snapshot
      
    
  {useViewTypeTool(...)}      ## 联系人
                   
                    

这套架构的好处在于，开发者可以继续用自己熟悉的工具，而框架在背后，把处理语义文本生成的复杂性全扛了下来。

总结

AOTUI 不是要把 GUI 变小，也不是要扔掉 CSS。它做的是构建一种不同类型的界面——一种 LLM 能像人操作图形应用一样，自然地去操作的界面。