跳转至

CI4A: Semantic Component Interfaces for Agents Empowering Web Automation

会议: NeurIPS 2026
arXiv: 2601.14790
OpenReview: https://openreview.net/forum?id=2OjpGbcs3u
领域: LLM Agent
关键词: Web Agent, UI组件接口, 动作空间折叠, 语义封装协议, Web自动化

一句话总结

针对传统 Web Agent 在底层 DOM/GUI 上陷入脆弱的长序列原子操作链问题,本文提出 CI4A 协议将现代前端 UI 组件封装为结构化的语义工具原语,并在工业级 Ant Design 框架上实现 AntDX 参考实现与混合动作空间智能体 Eous,在重构后的 WebArena 基准上将任务成功率提升至 86.3%、执行步数削减 57.5%。

研究背景与动机

随着大语言模型与多模态模型的发展,Web Agent 在信息检索与高层语义规划等任务中表现出强大潜力。然而,一旦面对以复杂 UI 交互为核心、需要多步骤状态流转的操作密集型任务,现有智能体的任务成功率与工业落地标准仍有巨大鸿沟。智能体本质上遵循离散且具备固有高延迟的“感知-推理-动作”交互循环,而现代 Web 应用的前端设计完全以人类用户为中心——人类具备毫秒级的连续视觉反馈和精细运动控制,因此前端广泛采用级联菜单、抽屉、折叠面板等渐进式信息展示机制。这种人机交互设计迫使智能体消耗昂贵的上下文和推理开销在 DOM 树中盲目试探,并被束缚在点击、输入、滚动等原子操作空间中。

这种范式错位的核心矛盾在于:底层物理操作的脆弱性与高维业务意图的确定性之间的断裂。传统方法依赖冗长的物理操作链来完成一个复合意图(例如在复杂的级联日期控件中翻页、定位坐标并避开不可用日期),不仅交互效率极其低下,而且一旦单步物理执行出现坐标漂移、渲染抖动或格式幻觉,就会引发严重的误差级联累积,导致整个任务彻底崩溃。现有工作尝试通过强化学习微调提升定位精度,或者采用外挂脚本与启发式规则拼凑高层技能,但始终无法消除对脆弱底层 DOM 的深度依赖。

本文换位思考:与其强迫智能体去艰难适应专为人类设计的脆弱界面,不如从前端根源重构原生对智能体友好的组件交互接口。现代 Web 应用普遍采用模块化的 UI 前端组件库架构,其内部天然封装了高层业务语义。核心 idea:提出 CI4A(Component Interface for Agent)协议,将前端 UI 组件的内部状态与操作逻辑封装为标准化的语义工具三元组,使智能体通过直接调用组件工具原语将脆弱的多步物理操作折叠为确定性的单步调用。

方法详解

整体框架

CI4A 旨在将传统基于渲染结果的脆弱逆向操作,转变为基于组件实例的确定性前向调用。其核心机制包括三大支柱:静态三元组契约、全局注册与混合视图构建机制、以及支持高层工具与底层原子动作回退的混合动作空间智能体 Eous。

在运行期,支持 CI4A 的前端组件在挂载时将自身注册到浏览器全局对象 window.__ci4a__。智能体在感知环境时,将 DOM 树中的带标记节点替换为包含语义状态、工具签名与参数约束的混合语义视图,从而直接生成合法的结构化函数调用;若目标组件未提供语义接口,智能体则平滑回退至底层 WebDriver 原子操作。

%%{init: {'flowchart': {'rankSpacing': 24, 'nodeSpacing': 28, 'padding': 6, 'wrappingWidth': 400}}}%%
flowchart TD
    A["Web 应用运行时<br/>UI 组件库加载与挂载"] --> B["全局注册与组件收发器<br/>维护实例映射 window.__ci4a__"]
    B --> C["语义三元组接口封装<br/>状态视图 S / 工具集 T / 元数据 M"]
    C --> D["混合视图构建<br/>DOM拓扑与语义节点替换"]
    D --> E["Eous 混合动作空间决策<br/>优先语义工具 / 失败回退原子操作"]
    E --> F["确定性执行与参数校验<br/>单步调用折叠长序列物理链"]

关键设计

1. 语义三元组接口封装:解耦渲染细节与业务意图 针对传统智能体必须穿透繁复 DOM 树或图像像素才能感知组件状态的痛点,CI4A 为每个 UI 组件定义了标准化的语义三元组契约 \(\langle\mathcal{S},\mathcal{T},\mathcal{M}\rangle\)。语义状态视图 \(\mathcal{S}\) 直接映射组件的内存内部数据模型(如 React 的 State/Props 或 Vue 响应式对象),将状态编码开销从随 DOM 深度膨胀的 \(O(N)\) 降至与渲染无关的 \(O(1)\),使智能体能瞬间“透视”如级联选择器候选全集或懒加载数据,根除了 DOM 解析与视觉识别噪声。可执行工具集 \(\mathcal{T}\) 将组件的状态变更逻辑抽象为标准原子操作原语(如 navigateTo、setValue、sort、filter),把动辄多轮的翻页与点击长链坍缩为单次函数调用。交互元数据 \(\mathcal{M}\) 则在编译期注入并结合运行期计算,显式暴露参数类型、枚举区间与格式约束(如 YYYY-MM-DD 格式要求),消除了因无形前端校验导致的格式幻觉。

2. 全局注册与组件收发器:无侵入的运行时通信桥梁 为了在现存前端工程生态中无缝落地上述接口,CI4A 实现了基于工业级 Ant Design 深度改造的参考实现 AntDX(覆盖导航、数据录入、数据展示等 23 类核心组件)。其核心是注入组件内部的收发器(Transceiver)与全局注册网关 window.__ci4a__。收发器内嵌三个协同单元:自动注册单元在组件挂载和卸载生命周期内维护全局实例映射 \(\mathcal{R}[\mathcal{K}]\to\langle\mathcal{S}_{\mathcal{K}},\mathcal{T}_{\mathcal{K}},\mathcal{M}_{\mathcal{K}}\rangle\),并在 DOM 根节点绑定唯一标识属性 data-cid;Props 监听器基于字段白名单过滤 UI 样式等渲染杂音,只向上暴露出纯粹的业务语义视图;分发器监听调用指令,优先转发给标准事件处理器(如 update:value)以保持正常事件流不被破坏,在无标准处理器时才直接变更内部受控状态。

3. 混合动作空间智能体 Eous:语义优先与原子回退兼备 为了兼顾结构化高层调用的极致效率与开放网页的通用性,本文构建了混合架构智能体 Eous。在感知阶段,Eous 支持结构化模态与多模态视觉两种模式:结构化模式下,它将带有 data-cid 的组件子树就地替换为语义节点 \(\langle\mathcal{S},\Sigma_{\mathcal{T}},\mathcal{M}\rangle\),大幅压缩 Token 冗余并保留页面拓扑骨架;视觉模式下,它将 SoM 标记与提取出的语义三元组在 Prompt 中建立图例绑定,使智能体拥有“透视”未展开面板的语义预知能力。在决策阶段,Eous 的动作空间定义为语义工具与底层原子动作的并集 \(a = a_{\Sigma_{\mathcal{T}}} \cup a_{atomic}\),遵循“语义工具优先(Semantic First)”策略,统一执行标准调用指令: $\(call(k, \tau, p), \quad k \in \mathcal{K}, \, \tau \in \Sigma_{\mathcal{T}_k}, \, p \models \mathcal{M}_k\)$ 运行时由注册中心校验参数合法性,校验失败或组件不可用时立即抛出结构化异常,仅在无语义工具支持时自适应回退至点击与输入等物理操作,从而在闭环执行中兼顾确定性与泛化兜底能力。

一个完整示例

以用户指令“选择 2025 年 12 月 31 日并提交”在复杂的日期选择器(DatePicker)上的执行为例: 1. 传统 baseline 模式:智能体需先点击输入框激活弹出层,触发日历浮层渲染;若当前为 2026 年,智能体需连续识别翻页按钮坐标,发起数次 click(x, y) 切换年份与月份;接着在网格中识别“31”对应单元格并避开禁用日期,再点击确定。整个物理序列长达 4-5 步,极易发生点击偏移或格式校验拦截(例如在输入框盲打 2025/12/31 被前端拒绝)。 2. Eous + CI4A 模式:组件挂载后通过收发器向 window.__ci4a__ 暴露 DatePicker 的元数据 \(\mathcal{M}\)(规定必须为 YYYY-MM-DD 字符串格式)与工具 setValue。Eous 感知混合视图后,一步直达生成结构化调用:call("datepicker_cid_01", "setValue", "2025-12-31")。网关完成参数约束校验后,分发器驱动组件直接更新值并触发校验事件,仅消耗 1 个交互步即保证 100% 正确执行。

实验关键数据

主实验

为了在保证业务逻辑一致的前提下客观评测,研究团队利用 Ant Design 标准组件对 WebArena 基准的 Playground 场景进行了语义保持重构(组件封装使得 Accessibility Tree 深度由 12.1 层加深 34% 至 16.2 层,对传统模型更具挑战)。测试涵盖 182 项任务,以功能正确性衡量成功率(Success Rate, SR),以决策轮次衡量平均步数(Average Steps)。

模型与框架 输入模态 成功率 SR (%) 平均步数 (Average Steps) 相对 baseline 步数变化
WebArenaBase (GPT-5) 结构化 (Accessibility Tree) 26.4 10.0 基线
AgentOccam-Text (GPT-5) 结构化 (Accessibility Tree) 69.2 9.4 -6.0%
Eous-Structured (GPT-5) 结构化 (CI4A 混合树) 75.3 4.2 -58.0%
MidScene (Seed-1.8) 视觉截图 (Screenshot) 61.5 13.0 +30.0%
AgentOccam-Vision (GPT-5) 结构化 + 视觉截图 70.3 10.4 +4.0%
Eous-Vision (GPT-5) 视觉截图 + CI4A 语义补充 86.3 4.7 -54.8%

消融实验

针对任务复杂度与典型复杂交互组件,论文深入分析了动作空间分布与任务跨度下的表现韧性:

任务序列长度分组 任务步数区间 Baseline 平均成功率 (%) Eous-Structured SR (%) Eous-Vision SR (%) 韧性表现
短序列 (Short) 1-5 步 81.10 高水平保持 高水平保持 物理链短时各模型基础精度尚可
中等序列 (Medium) 6-10 步 衰减明显 稳定收敛 稳定收敛 Baseline 误差开始累积
长序列 (Long) > 10 步 37.15 51.4 74.3 Baseline 发生灾难性衰退,Eous 展现极强抗累积误差能力

针对典型复杂组件交互的微观对比: - Cascader(级联选择器):传统 Baseline 平均需要 4.2 步展开并滚动各级菜单,成功率为 74.0%;Eous 依靠状态视图 \(\mathcal{S}\) 实现语义预知,平均仅需 1.1 步(步数减少 73.8%),成功率达到 100%。 - DatePicker(日期选择器):传统 Baseline 平均耗费 3.9 步,且易陷入格式幻觉与坐标漂移;Eous 凭借元数据约束与 setValue 语义直达,平均步数压缩至 1.0 步(步数减少 74.4%)。

关键发现

  • 交互范式的语义跃迁打破了长序列误差累积陷阱:Baseline 模型在长序列任务中成功率从 81.1% 暴跌至 37.15%,呈现显著线性衰退趋势;而 Eous 凭借语义工具将物理长链折叠为单步原子调用,使任务复杂度与交互步数彻底解耦,长序列成功率依然高达 74.3%。
  • 视觉与语义的协同互补显著优于纯像素交互:纯视觉 Baseline(如 MidScene)对屏幕渲染与分辨率差异极度敏感,易因坐标微小漂移导致整链失败;Eous 将视觉 SoM 与显式参数契约结合,不仅消除了格式幻觉,更在无需特定领域微调的前提下斩获 86.3% 的绝对高分。

亮点与洞察

  • 逆向思维确立“面向智能体的 ARIA”范式:不同于主流路线让模型通过昂贵的强化学习或视觉定位去死磕人类界面的渐进展示与像素坐标,CI4A 倡导前端组件主动向智能体暴露语义工具原语,构筑了人机共生型 Web 的基础设施雏形。
  • 状态透视与参数契约彻底消除黑盒盲猜:通过在内存态直接提取组件数据,将信息获取复杂度从 DOM 遍历的 \(O(N)\) 降到 \(O(1)\);元数据 \(\mathcal{M}\) 显式约束输入规范,从根源掐断了表单格式幻觉。
  • 混合动作空间实现了理论高度与工业兼容性的平衡:没有激进地要求全站绝对重写,而是设计了“语义调用优先、底层 WebDriver 兜底”的容错架构,为技术渐进过渡提供了极其务实的路径。

局限与展望

  • 侵入式插桩改造成本高昂:目前 AntDX 依赖对 Ant Design 源码的人工侵入式插桩,覆盖了 23 类组件,但面对庞大且异构的历史遗留前端项目,逐个组件手工适配的人力成本过高。
  • 开放 Web 环境的泛化瓶颈:在未经 CI4A 协议改造的外部站点上,智能体仍会退化为依赖传统底层操作的弱势状态。作者提出未来可通过大模型代码分析或静态分析自动生成兼容包装层,或采用运行时脚本注入实现通用组件的动态在线技能抽象。

相关工作与启发

  • vs WebArenaBase / SteP:传统结构化方法直接依赖脆弱且深沉的 DOM 或 Accessibility Tree 进行规则修剪,不仅由于组件封装导致上下文暴增,而且受限于渐进式展示无法感知折叠数据;CI4A 通过内存状态视图直接旁路了 DOM 树解析噪声。
  • vs SeeClick / WebVoyager / OmniParser:基于视觉坐标的定位方法不仅面临视觉幻觉与坐标漂移的脆弱性,且无法避免多步点击尝试;CI4A 将视觉 ID 与参数化工具绑定,实现了意图与执行的确定性对齐。
  • vs SkillWeaver / WALT:现有技能抽象方法通常在事后通过复杂的 API 逆向工程或轨迹挖掘拼凑高层动作,对前端微小布局变动极其脆弱;CI4A 依托前端工业组件生态进行正向接口暴露,规范性与稳定性远超事后挖掘。

评分

  • 新颖性: ⭐⭐⭐⭐⭐ 改变了“智能体迎合人类界面”的旧思维,提出面向 Agent 的组件级语义交互协议。
  • 实验充分度: ⭐⭐⭐⭐☆ 在工业级 Ant Design 与重构的 WebArena 上进行了细致的步数与长序列鲁棒性分析,案例剖析透彻。
  • 写作质量: ⭐⭐⭐⭐⭐ 概念抽象清晰,问题阐述切中要害,三元组契约与架构设计严密。
  • 价值: ⭐⭐⭐⭐⭐ 为未来构建 Agent-native Web 生态树立了重要的标准化标杆,具备重大的工程与产业价值。