AI assistant · bring your own key
AI UI generator that runs on free-tier models
Describe a screen — “a pricing section with three plans” or “a chat app with a sidebar of conversations” — and the openconstructor assistant builds it as real HTML and CSS on the canvas. You choose the model and use your own key, so you can start with providers that have no-cost tiers.
Open the editor →Getting a free key
Open the AI providers panel (the gear icon), pick a provider and paste a key. These options have no-cost tiers at the time of writing — limits are set by each provider and can change:
- Groq — a no-cost plan with GPT-OSS 120B and Llama models. Very fast, with roughly a thousand requests a day.
- Google Gemini — a no-cost tier with the Flash models, which are good at layout. Keys come from Google AI Studio.
- OpenRouter — one key for hundreds of models, about a dozen of them at no cost (for example Gemma and Nemotron), with paid ones like Claude and GPT available on the same key.
- Mistral — a free tier for experimentation.
Paid providers are supported too: OpenAI, Anthropic (Claude), xAI (Grok), DeepSeek, Together AI and Cerebras (which offers trial credit).
What the assistant can do
- Build new sections and whole pages from a description.
- Edit one element: select it first, then ask for the change (“make it lighter”, “add a monthly/yearly toggle”). Only that element is rewritten.
- Answer questions about the page without changing anything.
- ⚗ Fusion: right-click an element, choose Fusion, then click a second one. The result keeps the purpose and content of the first and takes the visual style of the second — a sign-in form in the style of a neon card, for example.
- Port the finished page to Flutter, SwiftUI, Jetpack Compose or Tailwind HTML.
Because the AI works with the same HTML and CSS as the component library, you can mix both freely: start from a hand-picked hero and have the model write the rest, or generate a dashboard and fine-tune it by dragging.
Privacy: your key stays in the browser
openconstructor has no AI backend. Your key is stored in the browser — for the current tab by default, or on your device if you tick “remember keys” — and requests go directly from your browser to the provider you picked. The key and your prompts never pass through openconstructor servers. The code is open source, so you can verify this, and the privacy policy describes it in full.
Tips for better results
- Be concrete about content and structure: name the sections, the number of items and the tone.
- Larger models (GPT-OSS 120B, Gemini Flash, Claude) follow layout instructions noticeably better than small ones.
- Edit in small steps on a selected element instead of regenerating the whole page.
When you are done, export to React, Vue or Svelte, plain HTML, or game engines like Roblox.
FAQ
Is the AI UI generator free?
The editor is free. AI requests are billed by the provider you choose, and Groq, Google Gemini, OpenRouter and Mistral offer no-cost tiers that are enough to build pages.
Do you see my API key?
No. The key is stored in your browser and requests go straight from your browser to the provider. There is no openconstructor server in between.
Which model is best for UI?
Larger models handle layout best. GPT-OSS 120B on Groq and Gemini Flash are strong no-cost choices; paid models such as Claude are stronger still.
Do I need an account?
No. Sign-in is optional; you can build, use the AI with your own key and export without one.
Ready to try it?
openconstructor is free, open source (MIT) and runs entirely in your browser. No sign-up is needed to build and export.
Open the editor →