Case Study
Generative UI · GitHub
An agent that composes interfaces from GitHub repo data
Paste any public GitHub repo and ask it a question. A model classifies the question, picks from a hand-built catalog of 41 components, and the renderer streams the screen in. Click any card, row or chart point and the screen rewrites itself around it. Every number the model writes is checked against the data it cites, and a public eval harness scores the whole pipeline on every change.
Overview
Most generative UI demos let a model write the page. This one doesn't. The model emits a small JSON description, chosen from a Zod-validated registry, and never touches HTML, CSS or a pixel value; the system decides what everything looks like. Haiku classifies each question into one of fifteen layout templates and fills the slots; Sonnet composes only when no template fits, which keeps a typical answer around a fifth of a cent. Screens arrive as a stream of ops against stable component ids, so a follow-up click doesn't reload anything: the pieces that no longer apply exit in reverse of how they entered, the survivors morph into their new positions, and the new ones draw in. Underneath is a design system I built in Claude Design and then audited to the number: 41 components, each with default, skeleton, empty, error and warming states at three densities, two tokens per status color so text and fills both pass contrast, and six motion moves with Motion owning presence and GSAP owning what happens inside a card. The eval harness runs 99 cases three times each on three model configurations and publishes everything, including the finding that Haiku alone matches production on routing and numbers at a third of the cost.
Key Features
- 01Model decides, code renders. The composer emits JSON against a Zod registry and never HTML, class names or colors. Unknown or malformed output renders the component's error state instead of throwing.
- 02Rewrites in place. Stable ids and a diff engine turn a follow-up click into exits, morphs and entrances rather than a page load. Exit is the strict reverse of enter.
- 03Two-model routing. Haiku classifies into fifteen templates and fills them; Sonnet composes only off-template. Production answers cost about $0.002 and arrive in about six seconds.
- 04Numbers are verified. Any figure the model writes into a sentence, delta or chart finding is checked against the data it cites. A mismatch is replaced by a system sentence, never rendered.
- 05Five states, three densities, every component. Error is never styled as critical, a zero is data not empty, and the frame always renders so you can see what's loading, missing or failed.
- 06Cost controls that show on screen. Fifteen live compositions per visitor per day, precomputed answers for five sample repos, and a global daily cap that flips the site to cached-only mode and says so.
- 07Public evals with the failures left in. 99 cases, three runs, three model configurations, scored on template, bindings, numbers, rules, latency and cost, with a regression gate before any composer change can land.
- 08A design system built to be audited. Tokens generated from one JSON file, CSS modules with no framework, measured contrast on every status color, and Motion plus GSAP split so neither touches the other's element.