Type a prompt, get a working full-stack Next.js app — hosted, with a database, auth, a visual editor, GitHub sync, Figma and custom domains already built in.
A free, self-hosted, white-label alternative to v0, Lovable, Bolt and Replit. Run it for yourself, or put an AI app builder inside your own product.
🚀 Quick Start · 🧩 Put it in your product · ☁️ Deploy · 📚 Docs · ⭐ Star this repo
From prompt to deployed app — live preview, code editor, database and deploy, all in one place.
A ready-to-run AI app builder, open source under MIT.
A user types what they want, for example "a CRM with kanban boards and Stripe billing". The AI builds a real full-stack Next.js app, shows it live in the browser, and publishes it to a public URL when the user is happy.
Everything a builder like this normally needs is already handled:
- The hard part is done by the Totalum API. Totalum runs the AI agent that writes the code, and hosts every generated app with its database, file storage, SSL, CDN, deploys and custom domains. One API key gives you all of it.
- This repo is the product on top. It is the user interface: the prompt box, the live preview, the code editor, the visual editor, the database browser, the logs, the version history and everything else you see in the demo.
In one sentence: clone this repo, paste one API key, and you have your own AI app builder running in minutes, for yourself or for your customers.
| You are… | What you get |
|---|---|
| 🧑💻 A builder or indie hacker | Your own free, self-hosted v0 / Lovable / Bolt alternative. Prompt → deployed app. |
| 🏢 A SaaS or software company | Let your users build full-stack apps inside your product, without building the infrastructure. |
| 🎨 An agency or no-code team | Ship client apps faster, under your own brand. |
| 🧪 Curious, not technical | No servers to manage. One key, and everything works. |
All of this works with one API key. No other cloud accounts, no glue code:
- 🤖 Prompt → full-stack app. Describe an app in plain English and the AI agent builds a complete Next.js project.
- 👀 Live preview. Watch the running app update while the agent works.
- 🖱️ Visual editor. Click any element in the preview and change its text, size, colours or image. The change is written back to the exact file and line, and the app rebuilds.
- 🧑💻 Code editor. A Monaco (VS Code) editor to read and edit every generated file. Save, rebuild, done.
- 🗄️ Database. Every app gets a real database. Browse, query and edit its records from the UI.
- 🔐 Secrets and environment variables. Managed per project and per environment.
- 🚀 Hosting and one-click deploy. Every project has a live URL. Publish to production in one click.
- 🌐 Custom domains. Attach your own domain with guided DNS setup and watch it go live.
- 🔗 GitHub sync. Connect a repo and push or pull changes in both directions.
- 🎨 Figma. Paste a Figma frame link in the chat and the agent builds from the design.
- 📦 Export, import and duplicate projects. Package a whole project into an import code, restore it, or clone it in one action.
- 🕓 Version history. Every AI build is a restorable checkpoint, with a diff viewer showing exactly what changed.
- 📜 Logs. Read runtime logs from the preview server and from production.
- 🧱 Isolated sandboxes. Each project runs in its own environment. A sleeping one wakes on demand, and the UI tells the user instead of failing silently.
- 🏢 Multi-tenant. Create isolated projects per user or per customer with no extra work.
- 🌍 Deploy anywhere. Vercel, Docker, or any Node.js host.
You can have it running locally in about three minutes.
git clone https://github.com/totalumlabs/ai-app-builder-open.git
cd ai-app-builder-open
npm installCreate a .env file (or .env.local) in the project root:
TOTALUM_VCAAS_API_KEY=your_key_here👉 No key yet? It is free to start. See Getting your API key just below.
npm run devOpen http://localhost:3000, type what you want to build, and watch it happen. 🎉
Requirements: Node.js 20+ and npm. Nothing else.
The only thing this app needs is a Totalum API key. The first 50 AI credits are free.
- Create an account at totalum.app/api.
- During onboarding, choose "Use the Totalum API".
- Copy your API key into your
.envfile asTOTALUM_VCAAS_API_KEY.
That single key covers hosting, databases, AI, custom domains, GitHub sync and sandboxes. No other providers are required.
| Variable | Required | What it is |
|---|---|---|
TOTALUM_VCAAS_API_KEY |
✅ Yes | Your Totalum API key. The only variable the app needs. It is read on the server only and never reaches the browser. |
NEXT_PUBLIC_APP_URL |
⬜ Optional | The public URL of your deployment, e.g. https://your-domain.com. Used to allow-list your origin for CSP and CORS in production. Defaults to the same host. |
To start from the example file:
cp .env.example .env.local🔒 Security: the API key is only read in
src/lib/vcaas-server.ts, which never ships to the browser. It is deliberately not aNEXT_PUBLIC_variable.
This is a standard Next.js app with no platform lock-in. It runs wherever Next.js runs.
That is on purpose — we want you to add the auth that fits how your system works, or however you prefer. Out of the box every route is public and the app acts on a single API key, so anyone who can reach the URL can use it and spend that key's credits.
Before you publish this anywhere public, put an auth layer in front of it. The hooks are already there: make the two guards in
src/app/api/vcaas/_shared.tsreal and protect the pages insrc/proxy.ts. See Use it as a boilerplate for the step-by-step. Running it locally or on a private network with no login is fine.
Import the repo, set TOTALUM_VCAAS_API_KEY under Environment Variables, and deploy.
npm run build
npm start # serves on $PORT (default 3000)Set TOTALUM_VCAAS_API_KEY in the host's environment and point your process manager or container at npm start.
This is not only a standalone tool. It is a drop-in AI app-builder layer for a SaaS you are launching or already run.
- 🏢 Multi-tenant by design. Every generated app is an isolated Totalum project. Create one per user, team or customer.
- 🎨 White-label. It is your codebase and your UI. Rebrand it, restyle it, embed it in your dashboard.
- 🔌 One integration. A single API key gives your users hosting, databases, AI, domains, GitHub and sandboxes. You do not stitch together five vendors.
- 📈 A new revenue stream. Resell app building, hosting or premium AI credits on top of your product.
The pitch to your customers: "Build and ship a full-stack app right here, inside our platform."
⚠️ Before you put real users behind it, readsrc/app/api/vcaas/_shared.ts. This app runs on one API key, so "who is asking?" and "may they touch this project?" are answered with "yes" by default. That file is where you add your own auth and ownership checks. The API routes already delegate the decision to it.
- Run it beside your product. Deploy this app on a subdomain, put your login in front, rebrand it, and link or iframe to it. Hours, not weeks.
- Port the flow into your stack. Keep the contract, not the UI: a server-side proxy that adds the
api-keyheader, thenlaunch→ poll agent status → show the preview URL → follow-up prompts → deploy. One Totalum project per customer, ownership checked on every proxied call. The step-by-step version, with the exact files to mirror, is inAGENTS.md.
Want to ship this as your own product? Add an auth provider such as Supabase for login (a profiles and a projects table, make the two guards in _shared.ts real, protect the pages in src/proxy.ts) and Stripe for payments (checkout for credit packs or a plan, a webhook that tops up profiles.credits, a 402 on spend-shaped calls when the balance is empty, which the UI already turns into a "buy credits" dialog). The concrete checklist is in AGENTS.md.
Two different things live here, and it is worth keeping them apart:
-
The apps the AI builds for you come with a managed database, hosting, auth and everything else they need to run — all provided by the Totalum API. Nothing to install.
-
This builder UI itself is deliberately lean. It ships no auth, payment or AI SDK, because it needs none: it is a thin client in front of one API key. When you turn it into your own product you add exactly the providers you want — the step-by-step is in
AGENTS.md:- Auth: Supabase Auth, Better Auth, Clerk, Auth0 or your own.
- Payments: Stripe, or any provider — for credit packs or plans.
- Database (for your own users/billing): Supabase, Postgres, PlanetScale, MongoDB, anything.
Add a provider by installing its SDK and setting its key in the Secrets panel.
The builder runs on Next.js 16 / React 19 / TypeScript / Tailwind 4. The only other runtime dependencies are UI and utility libraries:
| Area | Packages |
|---|---|
| UI primitives | Radix UI, lucide-react, sonner, cmdk, next-themes, class-variance-authority, clsx, tailwind-merge |
| Code editor | @monaco-editor/react |
| Forms | react-hook-form |
| Dates / archives | react-day-picker, fflate |
┌──────────────────────────────────────────────────────────────┐
│ This repo (the Next.js front-end, or your own SaaS) │
│ │
│ UI components ──► API client (src/lib/vcaas.ts) │
│ │ same-origin fetch │
│ ▼ │
│ /api/vcaas/* (server proxy routes) ──► adds the api-key │
└────────────────────────────┬─────────────────────────────────┘
│ HTTPS + your secret API key
▼
╔═══════════════════════════════════════════╗
║ Totalum API ║
║ AI agent · hosting · sandboxes ║
║ database · deploys · domains · GitHub ║
╚═══════════════════════════════════════════╝
Three things worth knowing:
- The browser never sees your API key. Client code calls same-origin proxy routes under
/api/vcaas/*. The server adds the key and forwards the request to Totalum. - Every Totalum call goes through one file. The client side is
src/lib/vcaas.ts, with its types insrc/lib/vcaas-types.ts. The part that holds the key issrc/lib/vcaas-server.ts. If you want to see how an endpoint is really called, polled and error-handled, read there. - Credits belong to the operator. Every action runs on the one API key in your environment. When that account runs out of credits the app says so once and links to the billing page.
⚠️ That message is for you, not your users. Remove it before you sell this to customers.
Everything this app calls is documented in one Markdown file, written to be read by people and by AI coding assistants alike:
It covers the whole core API (account and credits, projects, the AI agent, deployments, server and logs, versions, secrets, custom domains, analytics) and links to the optional areas (GitHub, Figma, database, webhooks, files, project transfer, project groups). The browsable docs are at www.totalum.app/docs, with the quickstart and the OpenAPI spec.
Working on this repo with an AI agent? Start from AGENTS.md. It is the short, agent-oriented map of the project: commands, architecture, where each feature lives, the rules that are not obvious from the code, and how to take the next steps.
src/
├─ app/
│ ├─ page.tsx # Dashboard: prompt box, your projects, import/duplicate
│ ├─ project/[projectId]/ # The workspace (chat, preview, code, database, …)
│ └─ api/
│ ├─ vcaas/[...path]/ # Server proxy to the Totalum API
│ ├─ preview/[projectId]/ # Same-origin proxy of a project, needed by the visual editor
│ ├─ visual-edit/…/apply # Turns visual changes into real source edits
│ └─ config/ # Reports whether the API key is configured
├─ components/
│ └─ workspace/ # Chat, Preview, Code, Database, GitHub, Figma, Logs…
│ └─ visual-editor/ # Inspector panel, changes bar, the editor's own hook
├─ i18n/ # One English dictionary + `useT()`
├─ lib/
│ ├─ vcaas.ts # 🧠 The Totalum API client (browser side)
│ ├─ vcaas-server.ts # The half that holds the API key, server only
│ ├─ vcaas-types.ts # Shared API types
│ └─ visual-edit*.ts # Matching a clicked element back to its source
└─ proxy.ts # CORS / CSP boundary
AGENTS.md # The map for AI coding agents working on this repo
Is it really free?
The code is free and open source. Running it needs a Totalum API key, which is free to start (the first 50 AI credits are included). You pay only as usage grows. See pricing.
Do I need to set up a database, hosting or an AI provider?
No. The single Totalum API key provides hosting, databases, AI, domains, GitHub and sandboxes. You can still add your own providers such as Supabase or Stripe if you want them.
Can my users build apps inside my own product?
Yes. It is multi-tenant and white-label by design. See Put it inside your own product.
What can it build?
Full-stack Next.js web apps: dashboards, CRMs, internal tools, marketplaces, SaaS MVPs, landing pages with a backend, and more.
Where is the API key stored? Is it safe?
Server side only. It is read in src/lib/vcaas-server.ts and never shipped to the browser. Client requests go through same-origin proxy routes that add the key on the server.
Can I self-host without Vercel?
Yes. npm run build && npm start runs on any Node.js host: a VM, Docker, Railway, Render, Fly.io and so on.
| AI App Builder Open | v0 · Lovable · Bolt · Replit | |
|---|---|---|
| Open source | ✅ | ❌ |
| Self-hostable | ✅ | ❌ |
| White-label, embeddable in your SaaS | ✅ | ❌ |
| Multi-tenant out of the box | ✅ | Limited |
| Hosting + database + domains + GitHub included | ✅ (one key) | Varies |
| Bring your own providers (Supabase, Stripe…) | ✅ | Limited |
| Deploy anywhere | ✅ | ❌ |
Contributions are welcome, whether a bug fix, a new panel, docs or a feature idea:
- Fork the repo and create a branch:
git checkout -b my-feature - Read
AGENTS.mdfor the layout and the rules, make your changes, and runnpm run buildto check them. - Open a pull request describing what you changed and why.
Found a bug or have an idea? Open an issue.
Released under the MIT License. Free for personal and commercial use. See LICENSE.
Open-source AI app builder · self-hosted v0 / Lovable / Bolt / Replit alternative · prompt-to-app · full-stack Next.js · multi-tenant · embeddable AI app builder for your SaaS.
Built with ❤️ on the Totalum API · Docs · Get your free API key