The End of the Static Screen: Architecting Intent-Driven UX — Gus Iwanaga, commercetools
Summary
The presentation outlines a shift from static, complex SaaS UIs to dynamic, intent-driven experiences using generative UI protocols. The core architecture involves an orchestrator that classifies user intent and calls tools, which then map results onto eligible components defined in a component catalog. This process generates a structured UI specification (UI spec) that ensures the final output adheres strictly to the design system, mitigating the unpredictability inherent in pure LLM-generated markup.
Key takeaways
-
The Failure of Pure Generative Output
11:40
Relying solely on an LLM to compose an entire experience (e.g., generating a sales report) leads to inconsistency, such as varying date ranges or KPI card layouts for the same query (7:00). The speaker asserts that this non-deterministic output is unsuitable for production.
-
The Declarative Middle Ground
18:55
A robust approach requires an orchestrator to classify intent, invoke tools (first or third party), and then generate a UI spec. This spec dictates the placement of components from a catalog, ensuring the final output is compliant with the design system every time.
-
The Importance of Hierarchy (Atomic Design)
To maintain control over layout and arrangement—a critical aspect of UX—the architecture must invert the traditional hierarchy: components map to sub-slots, which map to slots, which finally map to templates. This codifies UX knowledge into the agent.
Technical details
-
Intent Classification and Orchestration
1250s
The system uses an orchestrator to extract user intent from a query. This intent guides the selection of tools (first or third party) and retrieves necessary data, providing context for the UX agent to render meaningful content.
-
The Component Catalog as Contract
The component catalog serves as the contract between the generative agent and the interface. Every property within this catalog, including those defining slots and sub-slots, must be curated to allow for controlled, meaningful output.
-
Generative UI Protocols
The speaker discusses three rendering methods based on desired control: 1) Fixed component (highest control); 2) Component selection from a catalog (declarative, recommended for B2B SaaS); and 3) Full LLM autonomy (lowest control, highest risk). Examples of protocols include HTMX, JSON Render, and OpenUI.
Channel & topics
Watch on YouTube · Back to latest
This independent, AI-assisted summary is provided for commentary and informational purposes. It may contain errors or omit important context. Please watch the original video for the creator's complete presentation. Video, thumbnail, and related copyrights belong to their respective owners.