{"slug": "i-built-an-open-source-ai-interface-builder-that-exports-to-react-vue-svelte-and", "title": "I built an open-source AI interface builder that exports to React, Vue, Svelte… and Roblox", "summary": "A solo developer released openconstructor, an MIT-licensed, browser-based interface builder that assembles pages from 145 plain HTML/CSS components with help from a bring-your-own-key AI assistant supporting OpenRouter, Gemini, Groq, OpenAI, Anthropic and other providers. The tool converts screenshots into editable blocks, supports AI 'fusion' of components, and exports layouts to React, Vue, Svelte, Roblox (ScreenGui/Frame/TextLabel) and LÖVE by reading the rendered layout rather than the HTML, though the Roblox and LÖVE outputs are visual-only with no wired-up logic.", "body_md": "Hey DEV 👋\n\nI've been building **[openconstructor](https://openconstructor.pw)**: a browser-based interface builder where you put together pages from ready-made blocks and an AI assistant. It's free, needs no install, and the whole thing is open source under MIT.\n\n👉 **Try it:** [https://openconstructor.pw](https://openconstructor.pw)\n\n👉 **Source:** [https://github.com/Kuloka/openconstructor](https://github.com/Kuloka/openconstructor)\n\n**1. A real component library.** There are 145 components in 12 sections: AI & Chat (chat windows, prompt composers, \"thinking\" indicators, agent steps), Dashboards and charts, Pricing & Commerce, Auth, Navigation, Landing sections, Effects and more. Each one is plain HTML + CSS with no framework lock-in. Animated components play when you hover them in the catalog. [Browse the sections →](https://openconstructor.pw/components)\n\n**2. Bring your own AI.** Connect a key from OpenRouter, Google Gemini, Groq, Cerebras, Mistral, DeepSeek, OpenAI, Anthropic, xAI or Together, then type \"a pricing section with three plans\". The block lands on the canvas. Select an element first and only that element gets changed.\n\nYour keys stay in your browser and are sent only to the provider you picked. On a budget? Groq's no-cost plan with **GPT-OSS 120B** and Gemini Flash both work well. [More on the AI generator →](https://openconstructor.pw/ai-ui-generator)\n\n**3. Screenshot → blocks.** Paste a screenshot of any site or mockup (Ctrl+V works) and a vision model rebuilds it as editable HTML/CSS.\n\n**4. Edit without code.** Double-click an element to edit its text directly on the page. Click any part of it to change color, size, weight, radius or padding in a small inspector.\n\n**5. ⚗ Fusion.** This is the experiment I'm most curious about. Right-click a component → *fuse with…* → click another one. The AI breeds a new component that **does the first one's job in the second one's visual style**. A sign-in form × a glassmorphism card gives you a glass sign-in form, in its own new design rather than a copy of either.\n\n**6. Responsive by default (if you want).** Switch the page from *free* layout to *stack*. Blocks then flow top to bottom, and the export adapts to any screen. A preview shows the page on phone, tablet and desktop side by side.\n\n**7. Page-wide themes.** One click recolors every component on the page to a new accent. Grays stay gray, and alpha and notation are preserved. You can also swap any single color everywhere, or set one font and one corner style for the whole page.\n\nThis is the part I haven't seen in other web builders:\n\n`ScreenGui`, `Frame`, `TextLabel`, `TextButton`, `UICorner`, `UIStroke`, `UIGradient` and a `UIScale` that fits any screen. Drop it into `StarterPlayerScripts` and press Play. `main.lua` that draws the layout with `love.graphics`. The Roblox and LÖVE exports don't guess from your HTML. They read the **rendered** layout, using each element's real position, size, colors, radius, borders and text, and then generate native UI code from that snapshot. To be clear, they're visual only: buttons and text boxes have no logic wired up yet.\n\nHit **publish** and the page gets a public link like `openconstructor.pw/p/my-page`. Signed-in users can also keep projects in the cloud and open them on any device. Sign-in is optional, and everything else works without an account.\n\n`script-src 'none'`.\nI'd love feedback, especially on:\n\nIssues and PRs are very welcome: [https://github.com/Kuloka/openconstructor](https://github.com/Kuloka/openconstructor)\n\nIf you like the project, a ⭐ on GitHub really helps a solo dev get it in front of more people. Thanks for reading!", "url": "https://wpnews.pro/news/i-built-an-open-source-ai-interface-builder-that-exports-to-react-vue-svelte-and", "canonical_source": "https://dev.to/timofeus_248d45d3902a91a3/i-built-an-open-source-ai-interface-builder-that-exports-to-react-vue-svelte-and-roblox-466k", "published_at": "2026-11-06 19:50:20+00:00", "updated_at": "2026-11-06 19:53:15.742819+00:00", "lang": "en", "topics": ["ai-tools", "generative-ai", "developer-tools", "ai-products"], "entities": ["openconstructor", "OpenRouter", "Google Gemini", "Groq", "Cerebras", "Mistral", "DeepSeek", "OpenAI"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/i-built-an-open-source-ai-interface-builder-that-exports-to-react-vue-svelte-and", "markdown": "https://wpnews.pro/news/i-built-an-open-source-ai-interface-builder-that-exports-to-react-vue-svelte-and.md", "text": "https://wpnews.pro/news/i-built-an-open-source-ai-interface-builder-that-exports-to-react-vue-svelte-and.txt", "jsonld": "https://wpnews.pro/news/i-built-an-open-source-ai-interface-builder-that-exports-to-react-vue-svelte-and.jsonld"}}