The Problem
Manually writing UI components is slow, repetitive, and inconsistent. Design handoffs break down, component APIs drift from the design system, and engineers spend hours on boilerplate instead of product logic.
The Solution
LLMs can generate production-quality component code when given the right context — your design system tokens, TypeScript conventions, and component patterns. At ERVFlow, AI writes the scaffold; engineers write the soul.
The Prompt Architecture
Good AI UI generation starts with a well-structured prompt. We pass in the design system tokens, component conventions, and TypeScript strict mode requirements as system context.
Streaming UI Patterns
Using the Vercel AI SDK's `streamUI` with `renderTool` callbacks, you can stream UI components directly into the page as the model generates them — no round-trips required.
The model writes the scaffold. You write the soul.
The ERVFlow Workflow
Define your system context
Feed the model your design tokens, Tailwind config, and 2–3 reference components as system context. Consistency comes from what you give the model, not from luck.
Schema the output
Use structured output (JSON schema or Zod) to constrain what the model returns — component name, props interface, JSX. Validate before writing to disk.
Stream UI directly
Use Vercel AI SDK's `streamUI` to render components as the model generates them. Users see progress; engineers see fast iteration.
Human-in-the-loop review
Never auto-merge AI-generated components. A 10-second review catches prop naming drift, missing aria labels, and off-brand spacing before they enter the system.
Key Takeaways
- System context (design tokens, conventions) is the difference between generic and on-brand output
- Schema-constrained output gives you parseable, validatable component code
- Streaming UI reduces perceived wait time and enables real-time iteration
- Human review of AI output is non-negotiable — treat it like a junior dev's PR
Frequently Asked Questions
Claude Sonnet produces consistently well-structured TypeScript with correct Tailwind usage. GPT-4o is a close second. Always benchmark on your specific component types.