Technical Architecture

The A2UI Generation Pipeline

Step 1: Intent Analysis

The Generator Agent (formatter node) receives:

• Original user query
• Retrieved & verified documents
• Query classification (comparison, trend, decision, how-to)

It analyzes the query structure to determine optimal component type:

function selectComponent(query: string, data: any): ComponentType {

if (query.includes('compare') || hasMultipleEntities(data)) {

return 'data-table';

}

if (query.includes('trend') || hasTimeSeriesData(data)) {

return 'chart';

}

if (query.includes('approve') || query.includes('flag')) {

return 'approval';

}

if (query.includes('how do i') || query.includes('steps')) {

return 'plan';

}

// ... more heuristics

}

Step 2: Data Transformation

The agent extracts structured data from retrieved documents:

Example: Contract comparison query retrieves 3 PDFs → Agent extracts:

{

"contracts": [

{ "vendor": "Acme Corp", "liability": "Unlimited", "expires": "2025-12-31", "risk": "High" },

{ "vendor": "TechCo", "liability": "$5M cap", "expires": "2026-06-30", "risk": "Medium" },

{ "vendor": "GlobalServices", "liability": "$1M cap", "expires": "2025-03-15", "risk": "Low" }

]

}

Step 3: JSON Payload Generation

The agent outputs a JSON payload conforming to the component schema:

{

"type": "data-table",

"title": "Vendor Contract Liability Comparison",

"columns": [

{ "key": "vendor", "label": "Vendor Name", "sortable": true },

{ "key": "liability", "label": "Liability Cap", "sortable": true },

{ "key": "expires", "label": "Expiration", "sortable": true, "type": "date" },

{ "key": "risk", "label": "Risk Level", "sortable": true, "renderAs": "badge" }

],

"data": [

{ "vendor": "Acme Corp", "liability": "Unlimited", "expires": "2025-12-31", "risk": "High" },

{ "vendor": "TechCo", "liability": "$5M cap", "expires": "2026-06-30", "risk": "Medium" },

{ "vendor": "GlobalServices", "liability": "$1M cap", "expires": "2025-03-15", "risk": "Low" }

],

"sortable": true,

"filterable": true,

"exportable": true,

"defaultSort": { "column": "risk", "direction": "desc" }

}

Step 4: React Component Rendering

The chat frontend receives the JSON and dynamically renders the appropriate React component:

function renderA2UIComponent(payload: A2UIPayload) {

switch (payload.type) {

case 'data-table':

return <InteractiveTable {...payload} />;

case 'chart':

return <ResponsiveChart {...payload} />;

case 'approval':

return <ApprovalCard {...payload} />;

case 'plan':

return <StepByStepPlan {...payload} />;

// ... more component types

}

}

The component is fully interactive, with sorting/filtering/actions handled client-side.

Step 5: Action Handling

When users interact with components (click "Approve" button, sort table), actions are:

• Captured by the React component
• Sent to backend API (if action requires server logic)
• Logged in audit trail
• Response rendered (e.g., "Approval sent to VP of Finance")

A2UI Design Philosophy

Our Design Principles

1. Progressive Disclosure

Don't overwhelm users. Start with summary view, allow drill-down into details.

• Table: First 10 rows visible, "Load More" for pagination
• Chart: Default to last 3 months, date selector for full history
• Plan: Steps collapsed by default, click to expand sub-tasks

2. Accessibility First

All components meet WCAG 2.1 AA standards:

• Keyboard navigation (tab through table rows, arrow keys for charts)
• Screen reader support (ARIA labels on all interactive elements)
• High contrast mode (readable in light/dark themes)
• Focus indicators (clear visual feedback for keyboard users)

3. Mobile Responsive

Components adapt to screen size:

• Desktop: Full-width tables with all columns
• Tablet: Horizontal scroll for wide tables
• Mobile: Card-based view (tables become stacked cards)

4. Performance Optimized

Large datasets don't freeze the UI:

• Virtualization: Tables render only visible rows (handles 10k+ row datasets)
• Lazy Loading: Charts load data progressively
• Debouncing: Sort/filter actions debounced to prevent excessive re-renders

5. Consistent Styling

All components share design system:

• Colors: Brand blue for primary actions, red for destructive, green for success
• Typography: Inter font family, clear hierarchy (headings 18px, body 14px)
• Spacing: 8px grid system for consistent padding/margins
• Shadows: Subtle elevation for cards (4px blur for depth)

Implementation Details

Technical Stack

Frontend

• React 18: Component-based UI framework
• TypeScript: Type-safe component props
• Tailwind CSS: Utility-first styling
• Recharts: Chart library for data visualizations
• TanStack Table: High-performance table component

Component Libraries

• shadcn/ui: Base component primitives
• Radix UI: Accessible component foundations
• Lucide Icons: Icon library

Backend

• JSON Schema Validation: Ensures component payloads are well-formed
• React Server Components: Optional for SSR performance

Browser Support

• Chrome 90+
• Safari 14+
• Firefox 88+
• Edge 90+

Example Component Schema:

interface DataTablePayload {

type: 'data-table';

title: string;

columns: Array<{

key: string;

label: string;

sortable?: boolean;

filterable?: boolean;

type?: 'string' | 'number' | 'date' | 'badge';

renderAs?: 'text' | 'link' | 'badge' | 'currency';

}>;

data: Array<Record<string, any>>;

sortable?: boolean;

filterable?: boolean;

exportable?: boolean;

defaultSort?: { column: string; direction: 'asc' | 'desc' };

actions?: Array<{ label: string; handler: string }>;

}