CI4A-integrated Ant Design

• CI4A-integrated Ant Design is an agent-optimized semantic interface overlaying industrial-grade UI components for efficient LLM-driven web automation.
• It formalizes UI interactions using semantic abstraction triplets and AntDX to collapse multi-step event chains into single semantic calls.
• Empirical evaluations on the WebArena benchmark show an 86.3% task success rate and a 54.8% reduction in decision steps compared to traditional methods.

The CI4A-integrated Ant Design system provides an agent-optimized interaction layer over industrial-grade UI components, enabling LLMs and associated agents to conduct high-fidelity, semantically grounded web automation. Departing from previous approaches that force agents to work through human-facing front-ends or brittle RL-finetuned pipelines, CI4A introduces a formal interface specification and instrumentation protocol spanning 23 fundamental Ant Design components. The integration is delivered via AntDX, an augmentation of Ant Design that yields standardized tool primitives for direct agent consumption, allowing agents to transcend O(N) chains of atomic user events in favor of O(1) semantic calls. Empirical evaluation on the WebArena benchmark demonstrates quantifiable gains in task success and execution efficiency (Qiu et al., 21 Jan 2026).

1. Formal Semantics of the CI4A Component Interface

At its core, CI4A encodes each UI component instance $C$ as a semantic abstraction triplet $\langle S, T, M \rangle_k$ for unique identifier $k$. This encapsulation facilitates streamlined programmatic invocation by agents:

• Semantic State View ($S$): Represents a direct snapshot of the component's business state (e.g., reactive props in React/Vue), avoiding DOM traversal and exposing latent application logic, even when hidden or lazily instantiated.
• Executable Toolset ($T$): A fixed set of parameterized, high-level API primitives $\Sigma_{\tau} = \{\tau_1,\ldots, \tau_m\}$, each $\tau$ being a function effecting a meaningful, user-centric semantic action (e.g., setValue, sort, navigateTo), collapsing multi-step event chains to a single semantic call.
• Interaction Metadata ($M$): Schema definitions specifying parameter types, constraints (e.g., value ranges, regex), and input requirements for each $\tau$, supporting runtime validation and safeguarding against format hallucination.

Agent operations are formalized as:

$$call(k, \tau, p) \quad \text{subject to} \quad p \vDash M_{k}[\tau]$$

with post-call state transition:

$\langle S, T, M \rangle_k$0

where update is the internal business logic for $\langle S, T, M \rangle_k$1 (Qiu et al., 21 Jan 2026).

2. Instrumentation Architecture within Ant Design (AntDX)

CI4A integration into Ant Design is realized through systematic, intrusive instrumentation of the component library, delivering an agent-centric abstraction layer. Every eligible component is augmented with:

• Global Registrar (window.__ci4a__): Maintains the global registry $\langle S, T, M \rangle_k$2. Exposes:
  • getStatus(k) → {state: S_k, tools: \Sigma_{\tau k}, meta: M_k}
  • callTool(k, \tau, p) → {success/exception}
• Component Transceiver (Per-Component):
  • Auto-Registration: On (un)mount, attaches/detaches $\langle S, T, M \rangle_k$3, auto-annotates DOM (data-cid).
  • Props Listener: Whitelists and surfaces the business state as $\langle S, T, M \rangle_k$4.
  • Dispatcher: Routes callTool invocations to component event handlers (e.g., onChange, update:value) or, where not possible, directly mutates component state.

All 23 core UI components—including navigation, data entry, and display—consequently appear as typed tool-providing resources to the agent.

3. Supported Ant Design Components and Tool API Specification

The integration spans 23 canonical Ant Design components, classified below:

Category	Components
Navigation	Menu, Tabs, Breadcrumb, Steps, Pagination
Data Entry	Input, InputNumber, Select, TreeSelect, Cascader, DatePicker, TimePicker, RangePicker,
	Slider, Upload, Switch, Checkbox, Radio, Rate, ColorPicker
Data Display	Table, List, Tree, Tooltip, Tag, Avatar, Badge

Two representative tool API schemas:

A. Cascader

• $\langle S, T, M \rangle_k$5: { name, options: [{label, value, children…}], currentValue }
• $\langle S, T, M \rangle_k$6: { setValue(value: string) }
• $\langle S, T, M \rangle_k$7: { value: { type: string, enum: options.flatMap(v\to v.value) } }
• Agent Invocations: $T$1

B. DatePicker

• $\langle S, T, M \rangle_k$8: { name, value: "2023-09-15", format: "YYYY-MM-DD" }
• $\langle S, T, M \rangle_k$9: { setValue(dateStr: string), open(), close() }
• $k$0: { dateStr: { type: string, pattern: /^\d{4}-\d{2}-\d{2}$/ } }</code></li> <li>Agent Invocation: $T$2

Each primitive describes an O(1) semantic mutation, backed by parameter schema validation.

4. Hybrid Agent Action-Space Reconfiguration

The agent, Eous, dynamically updates its high-level action set at time $k$1 as follows:

$k$2

where $k$3 is all currently mounted component IDs, and $k$4 are baseline atomic operations (click, type, scroll).

State transitions—triggered by UI or DOM changes—recompute $k$5 via:

1. Extracting $k$6 by scanning for data-cid.
2. Fetching toolsets and metadata with getStatus(k) for each $k$7.
3. Filtering tools by current satisfaction of metadata constraints in $k$8.
4. Supplying the resulting $k$9 to the LLM-based planner.

After any action $S$0, the updated state $S$1 prompts a recalculation of valid actions $S$2.

5. Lifecycle Hooking and Zero-Invasive Implementation

Component instrumentation is realized via transform-plugin based rewriting at build time. Salient integration points include:

• Mount: Generate UUID $S$3; inject data-cid=k on root node; initialize $S$4.
• Render: Compile-time whitelist filters business props to surface $S$5.
• Action Dispatch: Canonically invoke event handlers (e.g., onChange), else mutate state directly to effectuate $S$6; refresh registry post-mutation.
• Unmount: Clean up $S$7 and associated data-cid.

This automation maintains compatibility with established Ant Design business logic. No user-facing code migration is required beyond package substitution.

6. Empirical Evaluation in the WebArena Benchmark

The WebArena evaluation, post-migration of its frontend to Ant Design + AntDX (34% deeper accessibility tree), encompassed 182 representative tasks:

• Task Success Rate: 86.3% (Eous vision-mode) versus 70.3% for the best previous baseline.
• Average Decision Steps: 4.7 versus 10.4, denoting a 54.8% reduction.
• Complexity Reduction:
  • Semantic primitives: O(1) versus O(N) sequential atomic actions.
  • Context encoding: $S$8 per component due to direct surface of semantic state.

Formally,

$S$9

$T$0

These results empirically validate the robustness and efficiency gains conferred by CI4A's semantic encapsulation—reducing error propagation and accelerating web automation (Qiu et al., 21 Jan 2026).