Describe your UI.
Watch it come to life.
Lumos turns plain-English prompts into production-ready React components — rendered live, refined conversationally, and ready to ship.
No credit card · Free Groq & Gemini tiers · Run 100% local with Ollama
Works with the models you already trust
Everything you need
A studio built for shipping UI
From first prompt to production code, Lumos keeps you in flow.
Live preview, instantly
Watch your component render in a secure sandbox the moment the AI writes it. No copy-paste loop.
Conversational iteration
“Make the header sticky and add a dark variant.” Refine in plain English — Lumos edits in place.
Production-ready output
Clean React + Tailwind, sanitized and validated. Copy it straight into your codebase.
Version history
Every generation is saved. Jump back to any version of a component with one click.
Sandboxed & safe
Generated code is statically validated and run in an isolated sandbox — never on your machine.
Bring your own model
Groq, OpenAI, Anthropic, Gemini, or fully local Ollama. Switch providers on the fly.
Prompt → Pixels
See the result before you write a single line
Lumos renders every generation in an isolated Sandpack environment with Tailwind preloaded. Toggle between a live preview and the source, copy the code, or roll back to an earlier version — all without leaving the canvas.
- Real-time streaming output
- Preview / Code tabs
- One-click copy & version rollback
export function PricingCard() {
return (
<div className="rounded-2xl border
border-white/10 bg-neutral-900 p-8">
<h3 className="text-xl font-semibold">
Pro
</h3>
<p className="mt-2 text-4xl font-bold">
$29<span className="text-base
text-neutral-400">/mo</span>
</p>
<button className="mt-6 w-full rounded-lg
bg-violet-500 py-3 font-medium">
Get started
</button>
</div>
);
}How it works
From idea to component in three steps
No setup, no boilerplate. Just describe and generate.
Describe it
Type what you want in natural language — a pricing table, a dashboard card, a hero section.
Generate
Lumos picks the right model and streams clean, accessible React + Tailwind code in real time.
Iterate & ship
Preview, tweak with follow-up prompts, browse versions, then copy the code into your project.
Build your next component now
Open the studio and ship your first AI-generated component in under a minute.