CI4A-integrated Ant Design
Updated 28 January 2026
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 ).
At its core, CI4A encodes each UI component instance C C C ⟨ S , T , M ⟩ k \langle S, T, M \rangle_k ⟨ S , T , M ⟩ k ​ k k k
Semantic State View (S S 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 T T A fixed set of parameterized, high-level API primitives Σ τ = { τ 1 , … , τ m } \Sigma_{\tau} = \{\tau_1,\ldots, \tau_m\} Σ τ ​ = { τ 1 ​ , … , τ m ​ } τ \tau τ setValue, sort, navigateTo), collapsing multi-step event chains to a single semantic call.Interaction Metadata (M M M Schema definitions specifying parameter types, constraints (e.g., value ranges, regex), and input requirements for each τ \tau τ
Agent operations are formalized as:
c a l l ( k , τ , p ) subject to p ⊨ M k [ τ ] call(k, \tau, p) \quad \text{subject to} \quad p \vDash M_{k}[\tau] c a ll ( k , τ , p ) subject to p ⊨ M k ​ [ τ ]
with post-call state transition:
S k ′ = u p d a t e ( S k , τ , p ) S_k' = update(S_k, \tau, p) S k ′ ​ = u p d a t e ( S k ​ , τ , p )
where update is the internal business logic for C C C 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 R : k → ⟨ S k , Σ τ k , M k ⟩ R: k \to \langle S_k, \Sigma_{\tau k}, M_k\rangle R : k → ⟨ S k ​ , Σ τ k ​ , M k ​ ⟩
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 R [ k ] R[k] R [ k ] data-cid).Props Listener: Whitelists and surfaces the business state as S k S_k S k ​ 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.
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
S cascader S_{\text{cascader}} S cascader ​ { name, options: [{label, value, children…}], currentValue }Σ τ cascader \Sigma_{\tau\text{cascader}} Σ τ cascader ​ { setValue(value: string) }M cascader M_{\text{cascader}} M cascader ​ { value: { type: string, enum: options.flatMap(v\to v.value) } }Agent Invocations:
1
2
let {tools, meta} = window.__ci4a__.getStatus(" cascader_17 " " cascader_17 " " setValue " value : " westlake "
B. DatePicker
S datepicker S_{\text{datepicker}} S datepicker ​ { name, value: "2023-09-15", format: "YYYY-MM-DD" }Σ τ datepicker \Sigma_{\tau\text{datepicker}} Σ τ datepicker ​ { setValue(dateStr: string), open(), close() }M datepicker M_{\text{datepicker}} M datepicker ​ { dateStr: { type: string, pattern: /^\d{4}-\d{2}-\d{2}$/ } }</code></li>
<li>Agent Invocation:
1
window.__ci4a__.callTool(" datepicker_4 " " setValue " dateStr : " 2025-12-31 "
</li>
</ul>
<p>Each primitive describes an O(1) semantic mutation, backed by parameter schema validation.</p>
<h2 class='paper-heading' id='hybrid-agent-action-space-reconfiguration'>4. Hybrid Agent Action-Space Reconfiguration</h2>
<p>The agent, Eous, dynamically updates its high-level action set at time $ta s f o l l o w s : < / p > < p > as follows:</p>
<p> a s f o ll o w s :< / p >< p > < / p > < p > w h e r e </p>
<p>where < / p >< p > w h ere i s a l l c u r r e n t l y m o u n t e d c o m p o n e n t I D s , a n d is all currently mounted component IDs, and i s a ll c u rre n tl y m o u n t e d co m p o n e n t I Ds , an d a r e b a s e l i n e a t o m i c o p e r a t i o n s ( < c o d e > c l i c k < / c o d e > , < c o d e > t y p e < / c o d e > , < c o d e > s c r o l l < / c o d e > ) . < / p > < p > S t a t e t r a n s i t i o n s — t r i g g e r e d b y U I o r D O M c h a n g e s — r e c o m p u t e are baseline atomic operations (<code>click</code>, <code>type</code>, <code>scroll</code>).</p>
<p>State transitions—triggered by UI or DOM changes—recompute a re ba se l in e a t o mi co p er a t i o n s ( < co d e > c l i c k < / co d e > , < co d e > t y p e < / co d e > , < co d e > scro ll < / co d e > ) . < / p >< p > St a t e t r an s i t i o n s — t r i gg ere d b y U I orD OM c han g es — reco m p u t e v i a : < / p > < o l > < l i > E x t r a c t i n g via:</p>
<ol>
<li>Extracting v ia :< / p >< o l >< l i > E x t r a c t in g b y s c a n n i n g f o r < c o d e > d a t a − c i d < / c o d e > . < / l i > < l i > F e t c h i n g t o o l s e t s a n d m e t a d a t a w i t h < c o d e > g e t S t a t u s ( k ) < / c o d e > f o r e a c h by scanning for <code>data-cid</code>.</li>
<li>Fetching toolsets and metadata with <code>getStatus(k)</code> for each b ysc annin g f or < co d e > d a t a − c i d < / co d e > . < / l i >< l i > F e t c hin g t oo l se t s an d m e t a d a t a w i t h < co d e > g e tSt a t u s ( k ) < / co d e > f ore a c h . < / l i > < l i > F i l t e r i n g t o o l s b y c u r r e n t s a t i s f a c t i o n o f m e t a d a t a c o n s t r a i n t s i n .</li>
<li>Filtering tools by current satisfaction of metadata constraints in . < / l i >< l i > F i lt er in g t oo l s b yc u rre n t s a t i s f a c t i o n o f m e t a d a t a co n s t r ain t s in . < / l i > < l i > S u p p l y i n g t h e r e s u l t i n g .</li>
<li>Supplying the resulting . < / l i >< l i > S u ppl y in g t h eres u lt in g t o t h e L L M − b a s e d p l a n n e r . < / l i > < / o l > < p > A f t e r a n y a c t i o n to the LLM-based planner.</li>
</ol>
<p>After any action t o t h e LL M − ba se d pl ann er . < / l i >< / o l >< p > A f t er an y a c t i o n , t h e u p d a t e d s t a t e , the updated state , t h e u p d a t e d s t a t e p r o m p t s a r e c a l c u l a t i o n o f v a l i d a c t i o n s prompts a recalculation of valid actions p ro m pt s a rec a l c u l a t i o n o f v a l i d a c t i o n s . < / p > < h 2 c l a s s = ′ p a p e r − h e a d i n g ′ i d = ′ l i f e c y c l e − h o o k i n g − a n d − z e r o − i n v a s i v e − i m p l e m e n t a t i o n ′ > 5. L i f e c y c l e H o o k i n g a n d Z e r o − I n v a s i v e I m p l e m e n t a t i o n < / h 2 > < p > C o m p o n e n t i n s t r u m e n t a t i o n i s r e a l i z e d v i a t r a n s f o r m − p l u g i n b a s e d r e w r i t i n g a t b u i l d t i m e . S a l i e n t i n t e g r a t i o n p o i n t s i n c l u d e : < / p > < u l > < l i > < s t r o n g > M o u n t : < / s t r o n g > G e n e r a t e U U I D .</p>
<h2 class='paper-heading' id='lifecycle-hooking-and-zero-invasive-implementation'>5. Lifecycle Hooking and Zero-Invasive Implementation</h2>
<p>Component instrumentation is realized via transform-plugin based rewriting at build time. Salient integration points include:</p>
<ul>
<li><strong>Mount:</strong> Generate UUID . < / p >< h 2 c l a ss = ′ p a p er − h e a d in g ′ i d = ′ l i f ecyc l e − h oo kin g − an d − zero − in v a s i v e − im pl e m e n t a t i o n ′ > 5. L i f ecyc l eHoo kin g an d Z ero − I n v a s i v e I m pl e m e n t a t i o n < / h 2 >< p > C o m p o n e n t in s t r u m e n t a t i o ni sre a l i ze d v ia t r an s f or m − pl ug inba se d re w r i t in g a t b u i l d t im e . S a l i e n t in t e g r a t i o n p o in t s in c l u d e :< / p >< u l >< l i >< s t ro n g > M o u n t :< / s t ro n g > G e n er a t e UU I D ; i n j e c t < c o d e > d a t a − c i d = k < / c o d e > o n r o o t n o d e ; i n i t i a l i z e ; inject <code>data-cid=k</code> on root node; initialize ; inj ec t < co d e > d a t a − c i d = k < / co d e > o n roo t n o d e ; ini t ia l i ze . < / l i > < l i > < s t r o n g > R e n d e r : < / s t r o n g > C o m p i l e − t i m e w h i t e l i s t f i l t e r s b u s i n e s s p r o p s t o s u r f a c e .</li>
<li><strong>Render:</strong> Compile-time whitelist filters business props to surface . < / l i >< l i >< s t ro n g > R e n d er :< / s t ro n g > C o m p i l e − t im e w hi t e l i s t f i lt ers b u s in ess p ro p s t os u r f a ce . < / l i > < l i > < s t r o n g > A c t i o n D i s p a t c h : < / s t r o n g > C a n o n i c a l l y i n v o k e e v e n t h a n d l e r s ( e . g . , < c o d e > o n C h a n g e < / c o d e > ) , e l s e m u t a t e s t a t e d i r e c t l y t o e f f e c t u a t e .</li>
<li><strong>Action Dispatch:</strong> Canonically invoke event handlers (e.g., <code>onChange</code>), else mutate state directly to effectuate . < / l i >< l i >< s t ro n g > A c t i o n D i s p a t c h :< / s t ro n g > C an o ni c a ll y in v o k ee v e n t han d l ers ( e . g . , < co d e > o n C han g e < / co d e > ) , e l se m u t a t es t a t e d i rec tl y t oe ff ec t u a t e ; r e f r e s h r e g i s t r y p o s t − m u t a t i o n . < / l i > < l i > < s t r o n g > U n m o u n t : < / s t r o n g > C l e a n u p ; refresh registry post-mutation.</li>
<li><strong>Unmount:</strong> Clean up ; re f res h re g i s t ry p os t − m u t a t i o n . < / l i >< l i >< s t ro n g > U nm o u n t :< / s t ro n g > Cl e an u p a n d a s s o c i a t e d < c o d e > d a t a − c i d < / c o d e > . < / l i > < / u l > < p > T h i s a u t o m a t i o n m a i n t a i n s c o m p a t i b i l i t y w i t h e s t a b l i s h e d A n t D e s i g n b u s i n e s s l o g i c . N o u s e r − f a c i n g c o d e m i g r a t i o n i s r e q u i r e d b e y o n d p a c k a g e s u b s t i t u t i o n . < / p > < h 2 c l a s s = ′ p a p e r − h e a d i n g ′ i d = ′ e m p i r i c a l − e v a l u a t i o n − i n − t h e − w e b a r e n a − b e n c h m a r k ′ > 6. E m p i r i c a l E v a l u a t i o n i n t h e W e b A r e n a B e n c h m a r k < / h 2 > < p > T h e < a h r e f = " h t t p s : / / w w w . e m e r g e n t m i n d . c o m / t o p i c s / w e b a r e n a " t i t l e = " " r e l = " n o f o l l o w " d a t a − t u r b o = " f a l s e " c l a s s = " a s s i s t a n t − l i n k " x − d a t a x − t o o l t i p . r a w = " " > W e b A r e n a < / a > e v a l u a t i o n , p o s t − m i g r a t i o n o f i t s f r o n t e n d t o A n t D e s i g n + A n t D X ( 34 < u l > < l i > < s t r o n g > T a s k S u c c e s s R a t e : < / s t r o n g > 86.3 < l i > < s t r o n g > A v e r a g e D e c i s i o n S t e p s : < / s t r o n g > 4.7 v e r s u s 10.4 , d e n o t i n g a 54.8 < l i > < s t r o n g > C o m p l e x i t y R e d u c t i o n : < / s t r o n g > < u l > < l i > S e m a n t i c p r i m i t i v e s : O ( 1 ) v e r s u s O ( N ) s e q u e n t i a l a t o m i c a c t i o n s . < / l i > < l i > C o n t e x t e n c o d i n g : and associated <code>data-cid</code>.</li>
</ul>
<p>This automation maintains compatibility with established Ant Design business logic. No user-facing code migration is required beyond package substitution.</p>
<h2 class='paper-heading' id='empirical-evaluation-in-the-webarena-benchmark'>6. Empirical Evaluation in the WebArena Benchmark</h2>
<p>The <a href="https://www.emergentmind.com/topics/webarena" title="" rel="nofollow" data-turbo="false" class="assistant-link" x-data x-tooltip.raw="">WebArena</a> evaluation, post-migration of its frontend to Ant Design + AntDX (34% deeper accessibility tree), encompassed 182 representative tasks:</p>
<ul>
<li><strong>Task Success Rate:</strong> 86.3% (Eous vision-mode) versus 70.3% for the best previous baseline.</li>
<li><strong>Average Decision Steps:</strong> 4.7 versus 10.4, denoting a 54.8% reduction.</li>
<li><strong>Complexity Reduction:</strong>
<ul>
<li>Semantic primitives: O(1) versus O(N) sequential atomic actions.</li>
<li>Context encoding: an d a ssoc ia t e d < co d e > d a t a − c i d < / co d e > . < / l i >< / u l >< p > T hi s a u t o ma t i o nmain t ain sco m p a t ibi l i t y w i t h es t ab l i s h e d A n t Des i g nb u s in ess l o g i c . N o u ser − f a c in g co d e mi g r a t i o ni sre q u i re d b eyo n d p a c ka g es u b s t i t u t i o n . < / p >< h 2 c l a ss = ′ p a p er − h e a d in g ′ i d = ′ e m p i r i c a l − e v a l u a t i o n − in − t h e − w e ba re na − b e n c hma r k ′ > 6. E m p i r i c a lE v a l u a t i o nin t h e W e b A re na B e n c hma r k < / h 2 >< p > T h e < ah re f = " h ttp s : // www . e m er g e n t min d . co m / t o p i cs / w e ba re na " t i tl e = "" re l = " n o f o ll o w " d a t a − t u r b o = " f a l se " c l a ss = " a ss i s t an t − l ink " x − d a t a x − t oo lt i p . r a w = "" > W e b A re na < / a > e v a l u a t i o n , p os t − mi g r a t i o n o f i t s f ro n t e n d t o A n t Des i g n + A n t D X ( 34 < u l >< l i >< s t ro n g > T a s k S u ccess R a t e :< / s t ro n g > 86.3 < l i >< s t ro n g > A v er a g eDec i s i o n St e p s :< / s t ro n g > 4.7 v ers u s 10.4 , d e n o t in g a 54.8 < l i >< s t ro n g > C o m pl e x i t y R e d u c t i o n :< / s t ro n g >< u l >< l i > S e man t i c p r imi t i v es : O ( 1 ) v ers u s O ( N ) se q u e n t ia l a t o mi c a c t i o n s . < / l i >< l i > C o n t e x t e n co d in g : p e r c o m p o n e n t d u e t o d i r e c t s u r f a c e o f s e m a n t i c s t a t e . < / l i > < / u l > < / l i > < / u l > < p > F o r m a l l y , < / p > < p > per component due to direct surface of semantic state.</li>
</ul></li>
</ul>
<p>Formally,</p>
<p> p erco m p o n e n t d u e t o d i rec t s u r f a ceo f se man t i cs t a t e . < / l i >< / u l >< / l i >< / u l >< p > F or ma ll y , < / p >< p > < / p > < p > </p>
<p> < / p >< p > 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 ).
Definition Search Book Streamline Icon: https://streamlinehq.com References (1)