A practical series for engineers exploring generative user interfaces: how model-directed composition works, how to build the development environment, and how to keep generated experiences trustworthy.
Practical notes, experiments and architecture.
Create a project, configure service principal authentication and .env variables, control costs, and prepare your first Python agent.
Read tutorial →Inspect the generated files, complete the manufacturers browser, and verify pagination, retries, and responsive behavior before deployment.
Read tutorial →Create and review requirements.md, design.md, and tasks.md. Refine pagination, retry behavior, and API assumptions before implementation.
Read tutorial →Establish project context with product.md, tech.md, and structure.md. Follow an initial Kiro session, from API investigation to reviewed steering documents.
Read tutorial →From static screens to model-directed composition: a practical explanation of architecture, benefits, limits and the design vocabulary behind Generative UI.
Read article →Build a reproducible TypeScript workspace with clear component boundaries, APIs, testing and secure configuration.
Read article →Why generated interfaces should remain constrained by validation, explicit actions, accessibility and meaningful user control.
Read article →A minimal setup using Vite, React, TypeScript and Zod, including the folder structure and the first runtime validation boundary.
Read tutorial →Create Text, Card, Alert, Table and Button components, validate UI intent with a Zod discriminated union, and dynamically map trusted JSON to React components.
Read tutorial →