DEV Community

TimofeUS
TimofeUS

Posted on

A New Innovation in AI & Dev-Tools: I added "Code Mode" (Pre-Alpha) to my free UI builder — generate full apps and drop them onto your web canvas

#webdev #ai #javascript #opensource

Bugs are possible — this is a pre-alpha version (I’ll release an update tomorrow)

🚀 A NEW INNOVATION IN AI & DEV-TOOLS

Every AI builder right now forces you to pick a side:

  • Either you use a visual website builder (great for layout and design, terrible when you need a real working app with state and logic),
  • Or you use an AI coding workspace (great for writing an app, terrible when you want to place that app inside a full website layout and tweak it visually).

Today I shipped the Pre-Alpha version of Code Mode inside Openconstructor — bridging both worlds in one browser studio.

👉 Try Code Mode (Pre-Alpha) live (free, no sign-up): https://openconstructor.pw
👉 GitHub repo (MIT): https://github.com/Kuloka/openconstructor

How Code Mode Works (and Why It's Different)

In Code Mode, you don't just generate static UI sections — you chat with the AI to write complete, working applications with real JavaScript logic, state, interactive controls, and a live preview.

And here is the killer workflow:
The moment your app is ready in Code Mode, you can place it directly onto the visual Web Constructor canvas in one click!

  1. Write a full interactive app in Code Mode: Ask the AI to build a working calculator, a SaaS ROI estimator, a Kanban board, an interactive pricing configurator, a dashboard widget, or a mini-game.
  2. Drop it straight into the Web Builder: Place your newly coded app right onto the visual canvas alongside 320+ plain HTML/CSS components and ready-made website templates.
  3. Export or publish everything together: Publish to a live shareable link in one click, or export to HTML, React (Vite .zip), Vue, Svelte, Roblox Luau (ScreenGui / .rbxmx), or LÖVE 2D (Lua).

⚡ Pro Tip for Heavy Code Mode Jobs: Use Ultra-Cheap High-TPS Models (like GLM 5.3 Flash via OpenRouter)

Writing a full, multi-hundred-line interactive application in Code Mode is much heavier than generating a single hero section. If a model streams at 15–20 tokens per second, a heavy app build takes too long.

While Openconstructor includes a built-in free AI tier out of the box (3 free generations/day with no sign-up, 20/day with a free account), for heavy Code Mode workloads I strongly recommend plugging in an OpenRouter key and selecting ultra-fast, ultra-cheap Flash-class models — especially GLM 5.3 Flash via OpenRouter:

  • Massive Tokens Per Second (TPS): High-throughput models like GLM 5.3 Flash stream code at blazing speed, cutting heavy full-app generation times down from minutes to seconds.
  • Fraction-of-a-cent cost: You get near-instant iterative coding in Code Mode without burning through expensive frontier model credits.
  • 100% client-side key storage: Your OpenRouter (or Groq / Gemini / Anthropic / DeepSeek) API key stays encrypted locally in your browser.

You can also check our speed and quality comparisons on the AI Models benchmark page.

⚠️ Heads-Up: This is a Pre-Alpha Release of Code Mode

Just to be 100% transparent: Code Mode is currently in Pre-Alpha, so you may still run into occasional bugs or rough edges when the AI is writing or updating complex code.

I'm actively fixing bugs and smoothing out the code generation pipeline right now — if a prompt produces broken code or an unexpected glitch, let me know in the comments or open an issue on GitHub so I can patch it fast!

Try Code Mode (Pre-Alpha) Right Now

Everything runs directly in your browser with zero setup:

(Our *$5 community support goal** is also still live via the Support button in the top bar — as soon as the first $5 lands, I'm unlocking additional free models and raising daily limits for everyone!)*

Go test Code Mode, drop a working app onto the web canvas, and tell me what breaks (or what works!) in the comments!

Top comments (0)