How I build UI with free AI models (no subscription, no backend)

dev.to AI2026-11-13 01:390 views

Most AI UI generators work the same way: you type a prompt, you get a nice layout, and then you hit a paywall. But a lot of the models behind them are available for free if you call them yourself. Groq gives you GPT-OSS 120B with roughly a thousand requests a day, and Google AI Studio hands out Gemini Flash keys for free.

So I built openconstructor, an open-source UI builder that runs on your key, right in the browser.

How it works

Pick a provider and paste a key. Open the AI providers panel (gear icon), choose Groq, Gemini, OpenRouter, Mistral or a paid one (OpenAI, Anthropic, xAI, DeepSeek, Together, Cerebras).
Describe what you want. "A pricing section with three tiers, the middle one highlighted, friendly tone." The assistant builds sections or whole pages.
Or drag components. There are 320+ HTML/CSS components (forms, dashboards, auth screens, pricing tables, landing sections, AI chat UIs) that you can drop on a canvas and mix with AI output.
Export. Plain HTML, or React / Vue / Svelte components. There's also a LÖVE 2D target that writes a main.lua for game UIs.

Where does the key go?

Nowhere but the provider. openconstructor has no AI backend: requests go straight from your browser to the provider you chose. The key is kept for the current tab by default, or on your device if you tick "remember keys". You don't need an account for any of this: building, AI and export all work without signing in.

Tips for better results on free models

Use the bigger free models. GPT-OSS 120B and Gemini Flash produce noticeably better layouts than small models.
Be specific. Name the sections, give item counts, describe the tone.
Edit small. Select one element and ask for a change; the rest of the page stays as it is.
Try Fusion. Right-click an element, choose Fusion, then click another one: you get the first element's content in the second one's visual style.