The Philosophy: Using A2UI is like hiring a Ghostwriter (the Agent). They write the content, but You (the Publisher) decide the font, the cover art, and the layout.
The Problem with “Generated UI”
If you ask GPT-4 to generate HTML, it might give you a blue button today and a red button tomorrow. It might use comic-sans if it feels whimsical.
This is a nightmare for Brand Consistency.
The A2UI Solution: Semantic Styling
A2UI forces a strict separation of concerns:
- Agent: Says “This is a primary heading”.
- Host App: Decides “Primary headings are 24px Bold Inter font”.
1. Semantic Hints
The Agent sends usageHint, not CSS.
// ✅ The A2UI Way
{
"component": {
"Text": { "text": "Warning!", "usageHint": "alert-text" }
}
}
// ❌ The HTML Way (Forbidden)
{ "style": "color: red; font-size: 20px;" } 2. Global Theming
You configure the renderer once, and it applies to all agents.
/* globally styles all agent-generated buttons */
.a2ui-button-primary {
background-color: #00D1B2; /* Your Brand Teal */
border-radius: 8px;
}3. Dark Mode Support
Because the Agent controls data and you control rendering, Dark Mode comes for free. You simply provide a Dark Theme CSS, and the Agent’s JSON doesn’t need to change a single bit.
Best Practices
- Don’t fight the framework: Avoid trying to pass hex codes from the LLM. It breaks consistency.
- Use Design Tokens: Map A2UI’s
primary,secondary,accentroles to your existing design system tokens. - Accessibility: Since you control the DOM, you (not the AI) seek compliance for WCAG contrast ratios.