I built a personal onboarding experiment that turns a written request into an interactive screen. It is separate from my Microsoft employer work.
I built an onboarding interface that assembles screens from six reusable components. A person writes a request, Claude returns a structured description, and the app checks it before displaying the interface. This personal project is separate from the Microsoft onboarding work.
I explored how a written request could become a guided, interactive screen.
One pass: a plain-language onboarding request, a structured UI spec from Claude, and an interactive interface rendered from it. The screens are assembled at request time, not hardcoded.
A recorded run through the sample prompts. Each one assembles a different interface, and every component is interactive. Open the live demo → to try it yourself.
The model does not return a chat reply. It returns a typed list of UI blocks; the app validates them with Zod and mounts the interactive components. The interface is generated, not hardcoded.
The model does not draw pixels. It picks from a fixed set of interactive components and fills their props. Six block types cover a new hire's first week.
Claude is forced to call one tool. Its argument is the UI spec — an ordered, typed list of blocks. This is what comes back from the request "what does my first week look like?"
Tool-use forcing guarantees the envelope. A Zod discriminated union validates every block's props before a single component mounts — an invalid block never reaches the screen. The renderer switches on type and mounts the matching React component.
No screen in this app is hardcoded. Every interface a visitor sees is rendered from a structured spec; change the request, and the UI changes with it.