A2UI: Designing the Semantic Frontdoor

Traditional generative UI is non-deterministic and risky—it sends code that your browser executes. A2UI is the architectural shift to Declarative UI. It allows agents to stream structured "Blueprints" that your system renders natively, ensuring security, consistency, and performance.

The "Flat Adjacency List" Hook

Most LLMs struggle to close deep JSON brackets when streaming complex UI trees. A2UI solves this by using a flat array model where components are linked by IDs. This allows for Progressive Hydration—the browser renders the header before the agent even finishes generating the footer.

Legacy Nested (Slow/Fragile)

{
  "type": "page",
  "children": [
    {
      "type": "header",
      "children": [
        { "type": "nav", ... }
        // LLM often fails here 
        // if context window shifts
      ]
    }
  ]
}

A2UI Flat (Fast/Reliable)

[
  { 
    "id": "root", 
    "type": "layout", 
    "children": ["nav_1", "hero_1"] 
  },
  { 
    "id": "nav_1", 
    "type": "navigation", 
    "props": { ... } 
  }
]

Performance: Hydration Metrics

By moving to a flat semantic structure, we bypass the overhead of heavy React Server Component (RSC) payloads during initial streaming.

Metric	Traditional RSC	A2UI Semantic
Time to First Byte (TTFB)	~240ms	~85ms
Payload Density	High (Code + Data)	Low (Intent Only)

Security: The UI Firewall

A2UI is logic-agnostic. The agent sends Intent (JSON), not Code (JSX). This creates an air-gap between the LLM's output and the user's execution environment. We implement "Redlining" to sanitize props before they hit the renderer.

Event Sanitization: The renderer only accepts a predefined whitelist of event types (e.g., NAVIGATE, SUBMIT). Inline JavaScript or eval() calls inside props are discarded.
Prop Validation: If an agent tries to inject a dangerouslySetInnerHTML prop into a generic text component, the A2UI parser redacts it before it ever reaches the DOM.

Summary

In the age of agents, the frontend is no longer just a display layer—it's a security perimeter. A2UI provides the contract needed to render agentic intents safely, predictably, and at the speed of thought.