Skip to main content

Generative UI: AI-Composed Layouts

Build a UI where the AI assembles components on the fly using structured output and tool use.

React 18TypeScriptVercel AI SDKAnthropic SDKZod

About this project

Generative UI is the bleeding-edge frontend pattern in 2026 — let the LLM decide which components to render based on user intent. This requires structured output, a typed component registry, and careful UX patterns for handling AI mistakes. You will build a "smart inbox" or "dashboard composer" where the AI picks chart types, summary cards, and action buttons based on the user's data. The portfolio impact is significant — very few candidates have shipped this pattern.

Why build this in 2026?

Generative UI is one of the highest-signal "I am ahead of the market" portfolio pieces in 2026.

What you'll ship

  • Live demo with at least 5 composable components
GitHub repo with the typed component registry
Demo video (90s) showing the AI assembling UI from a single prompt

Sign up to see the full project brief

Full deliverables, success criteria, and AI Career Tutor support — free.

You'll unlock:Complete project brief, AI tutor that knows this project, and progress tracking when you start.

Skills you'll practice

reacttypescriptlarge language models