DEV Community

TimofeUS
TimofeUS

Posted on

I'm building "Code Mode" inside my free open-source AI UI builder to write full working apps (40% done)

#webdev #ai #javascript #opensource

Right now, Openconstructor is great at visual UI building: you drag from 320+ components, fuse styles together, or prompt the AI to generate sections on a visual canvas, and export to HTML, React, Vue, Svelte, Roblox Luau, or LÖVE 2D.

But what if you don't just want a landing page or a UI layout — what if you want the AI to write a complete, working application with real logic, state, and interactive code from a chat prompt?

I've started building Code Mode inside Openconstructor, and it's already 40% done.

👉 Try the current studio (free, no sign-up): https://openconstructor.pw
👉 GitHub repo: https://github.com/Kuloka/openconstructor

Visual Mode vs. Code Mode: Two ways to build in one studio

Instead of forcing every project onto a drag-and-drop canvas, Openconstructor is getting a dedicated Code Mode right next to the visual builder:

  1. Canvas Mode (Visual UI Builder): Drag-and-drop 320+ components, use Fusion (combine Block A's layout with Block B's style), tweak spacing visually, or start from ready-made templates.
  2. Code Mode (AI App Builder — 40% complete): A chat-driven AI coding workspace where you describe the app you want, and the AI writes the full application code — complete with interactive logic, state, event handlers, and a live running preview.

What Code Mode does

  • Prompt-to-App generation: Ask it to build a working Pomodoro timer with stats, a Kanban board with local storage, a dashboard with live charts, a mini-game, or an interactive tool — and watch it stream the full HTML/CSS/JS (or framework code) live token-by-token.
  • Iterative chat + live preview: Talk to the AI to add features or fix bugs ("add dark mode persistence", "wire up keyboard shortcuts", "add CSV export"). It updates the code and refreshes the running app preview on the spot.
  • Inspect & edit the raw code directly: Full access to the source code the AI writes so you can tweak functions, styles, or logic yourself at any moment.
  • Works with the built-in free AI or your own API key: Run Code Mode on the built-in free tier (powered by a multi-provider fallback chain across Cloudflare Workers AI, OpenRouter free models, Gemini Flash, and Groq) or plug in your own key (OpenRouter, Groq, Gemini, Anthropic, DeepSeek).
  • One-click export & publish: Once your app works in Code Mode, publish it to a live shareable URL in one click or export the project to React (Vite .zip), Vue, Svelte, single-file HTML, Roblox Luau, or LÖVE 2D.

What's already working (the first 40%)

  • Core Code Mode workspace layout and mode switcher inside the studio
  • Streaming code generation pipeline connected to our upgraded multi-provider free AI fallback chain (Cloudflare Workers AI -> OpenRouter :free models -> Google Gemini -> Groq with compact prompt routing so large app prompts don't trigger 413 token limits)
  • Live sandboxed app preview + raw code editor view

Next up for the remaining 60%: multi-turn partial code updates, error recovery from the live preview console, and seamless one-click export/publish directly from Code Mode.

Check out the studio & tell me what you'd build first

While I finish the remaining 60% of Code Mode, the studio is live right now with 320+ components, 12+ full templates, AI image & 3D .glb generation, and live AI model benchmarks:

(And the *$5 community support goal** is still open via the Support button in the top bar — as soon as the first $5 arrives, I'm adding new free models and raising the daily free generation limits for everyone!)*

What's the first mini-app or tool you'd ask Code Mode to build once it drops? Let me know in the comments!

Top comments (0)