Want to build your own Lovable or Bolt.new, but under your own control and without a monthly prototype-tool bill? This tutorial shows you exactly how to build an AI app builder from scratch using a free, open-source Next.js starter and a single API key. You will clone a real repository, add one key, run it locally, turn a plain-English prompt into a working full-stack app, and deploy it. A non-technical founder can follow the plain-language explanations to understand what is happening; a developer can copy the exact commands and ship it the same afternoon. The whole thing runs on one Totalum key that covers hosting, database, authentication, AI, and custom domains.
Quick Answer
- How to build an AI app builder: clone the open-source ai-app-builder-open repo, register at totalum.app for a free API key, put the key in a
.envfile, runnpm installthennpm run dev, and you have a working prompt-to-app builder on your own machine. - The starter is a real Next.js 16 / React 19 app under the MIT license, not a locked demo. You own the code.
- One
TOTALUM_VCAAS_API_KEYpowers the whole engine: hosting, sandboxes, a managed database, auth, AI orchestration, GitHub sync, and custom domains. You do not wire up six services. - Every person who runs the builder needs their own Totalum key, and the first 50 AI credits are free, so this is the fastest way to try the API behind Lovable-style tools.
- Deploy to Vercel with one click, or to any Node host (Docker, a VPS, Railway) with
npm run buildandnpm start.
What "build your own AI app builder" actually means
An AI app builder is a product like Lovable, Bolt.new, v0, or Replit: you describe an app in plain English and it generates a working web application for you. "Build your own" means running the same kind of tool yourself, on your own domain and your own terms, instead of paying to use someone else's hosted version.
There are two honest ways to do this, and it helps to know which one you are choosing:
- Buy the engine, own the shell. You do not rebuild the hard parts (the AI that writes the app, the servers that run it, the database, the login system). You call a service that already does all of that through an API, and you build the interface and brand around it. This is what the tutorial below does, and it is why one key is enough.
- Rebuild everything yourself. You stitch together a code-generation model, a sandbox to run untrusted code, a database, an auth provider, a hosting layer, and a deploy pipeline. This is months of work and a real operations burden.
A few terms you will see, defined once:
- Full-stack app: an app that has both a front end (what users see) and a back end (database, logins, server logic). Lovable-style tools that only produce a front-end prototype fall short the moment you need real data or real users.
- API key: a secret string that lets your app talk to an outside service on your account. Think of it as a password for software. Here, one key from Totalum unlocks the whole build-and-run engine.
- .env file: a small text file where you keep secrets like your API key, so they stay out of your code and out of your browser. The
.envnever gets shipped to visitors. - Self-hosting: running the software on infrastructure you control instead of using a vendor's hosted website. The starter here is self-hostable, so you are not locked in.
What you are building
You are going to run ai-app-builder-open, Totalum's open-source reference implementation of an AI app builder. It is a complete Next.js application with a chat panel, a code browser, database views, and deployment tooling already wired in. It positions itself as a free, self-hosted, white-label alternative to v0, Lovable, Bolt, and Replit, and it is published under the permissive MIT license so you can fork it, rebrand it, and build a product on top of it.
The important architectural detail is that the front end never touches your secret key. Your browser talks to a small server route inside the Next.js app, and that server route talks to the Totalum API. Your TOTALUM_VCAAS_API_KEY lives only on the server. This is the same security-first pattern Totalum documents in its build your own AI app builder guide, where every call funnels through a single server-only module so the key never reaches the browser.
Here is what the one key replaces:
| Capability you would normally buy separately | In this starter |
|---|---|
| AI that writes the full app from a prompt | Included via the Totalum API |
| Sandbox to build and preview the app safely | Included |
| Managed database with an admin panel | Included |
| Authentication and user accounts | Included |
| Hosting and deployment | Included |
| Custom domains and GitHub sync | Included |
| Number of API keys / accounts to manage | One |
Before you start: prerequisites
In plain terms: you need a recent version of Node.js on your computer, a free Totalum account for the key, and about ten minutes. If you are non-technical, you can still register and grab the key yourself, then hand the commands to a developer.
For developers:
- Node.js 20 or newer, plus
npm. - A terminal and Git.
- A Totalum account (free tier is enough to start).
How to build an AI app builder in 7 steps
This is the core of how to build an AI app builder that actually produces real, deployable apps. Follow the steps in order. Each one has a short "what and why" first, then the exact commands under For developers.
Step 1: Get your Totalum API key
What and why: the key is what gives your builder its brain and its infrastructure. Without it, the app runs but cannot build anything. Registering also puts you on the free tier, which includes 50 AI credits so you can test end to end at no cost.
For developers:
- Create an account at www.totalum.app.
- During onboarding, choose "Use the Totalum API".
- Copy the API key it gives you. It starts with a
tlm_prefix. Keep it private.
The full walkthrough for getting a key and making your first call is in the Totalum quickstart, and the endpoint reference lives in the Totalum API overview.
Step 2: Clone the open-source repository
What and why: cloning means downloading a copy of the project's code to your machine so you can run and change it. Because the repo is MIT-licensed, this copy is yours to modify and brand.
For developers:
git clone https://github.com/totalumlabs/ai-app-builder-open.git
cd ai-app-builder-openIf you plan to build a real product on it, click Star and Fork on GitHub first, then clone your fork. Starring also helps other builders find the project.
Step 3: Install the dependencies
What and why: an app is built from many small building blocks written by other people. Installing pulls all of those blocks into your copy so the app can run. You only do this once.
For developers:
npm installStep 4: Add your API key to a .env file
What and why: this is where your one key goes. The app reads the key from this file at startup and keeps it on the server, so it never leaks to the browser. This single value is what unlocks hosting, the database, auth, AI, and domains all at once.
For developers:
cp .env.example .env.localThen open .env.local and set your key:
TOTALUM_VCAAS_API_KEY=your_key_hereThere is one optional variable, NEXT_PUBLIC_APP_URL, which you set to your public URL (for example https://your-domain.com) once you deploy. You can leave it empty while working locally.
Step 5: Run the development server
What and why: the development server runs the builder on your own computer so you can use it in a browser before it is live for anyone else. "Localhost" just means "this machine."
For developers:
npm run devOpen http://localhost:3000 and you will see the builder interface: a chat box, a code view, and database panels.
Step 6: Turn a prompt into a working app
What and why: this is the payoff. You type a description of an app, and the engine generates a real full-stack app for you, then runs it in a live preview. Try something concrete, like "a booking app for a hair salon with services, time slots, and a customer list."
For developers: send your prompt from the chat panel. Under the hood, the browser posts to a server route (the proxy in src/lib/vcaas.ts), which calls the Totalum API using your key. The API spins up a project, generates the code, provisions a database, and streams the build back. The generated app reads and writes its data through the TotalumSDK; if you want to customize how the app queries its own database, the Totalum database SDK reference documents the typed CRUD client the generated app uses.
Step 7: Deploy your builder
What and why: deploying means putting your builder on the public internet so real users, or you, can reach it at a real web address. You have two easy paths.
For developers:
- Vercel (one click): use the Deploy button in the repo README. Set
TOTALUM_VCAAS_API_KEYas an environment variable in the Vercel dashboard. - Any Node host (Docker, VPS, Railway):
npm run build
npm startSet TOTALUM_VCAAS_API_KEY in the host environment. The app serves on $PORT, defaulting to 3000. Because the starter is a standard Next.js app, it deploys anywhere Node runs, which is what makes it genuinely self-hostable rather than tied to one vendor's website.
Why one API key replaces a whole backend
The reason this tutorial is short is that Totalum is not a hosting layer you bolt onto a coding tool. It is a full AI app builder in its own right, a peer to Lovable, Bolt, and Replit, that you can also drive from your own code through a REST API and MCP. So when your starter calls the Totalum API, it is asking a complete engine to build and run the app, not just to store some files.
That is why a single TOTALUM_VCAAS_API_KEY covers hosting, sandboxes, a managed database with an admin panel, authentication, AI orchestration, GitHub sync, multitenancy, and custom domains. Multitenancy, one more term worth defining, means the engine can keep many users' apps isolated from each other on the same system, which is exactly what you need if you turn this into a product with real customers. If you want to compare the hosted builders this starter stands in for, our breakdown of Lovable vs Bolt and a third option covers where each one stops short of production.
Where to go deeper
You now have a running builder. These are the pages to read next, depending on what you want to do:
- Understand the whole approach and the security pattern: build your own AI app builder.
- Make your first API call end to end: Totalum quickstart.
- Look up endpoints for projects, the AI agent, deployments, and databases: Totalum API overview.
- Customize how generated apps read and write data: Totalum database SDK.
- See the full field of self-hosted options this starter belongs to: our roundup of open source AI app builders.
- If your goal is to embed this inside an existing product rather than run it standalone, read how to embed an AI app builder in your SaaS via API.
FAQ
How to build an AI app builder without a full engineering team?
You do not rebuild the engine. You clone the open-source ai-app-builder-open starter, add one Totalum API key, and let the Totalum API handle code generation, sandboxing, the database, auth, hosting, and domains. Your job is the interface and the brand, which is a weekend of work rather than months.
Is the starter really free and open source?
The starter repository is MIT-licensed and free to clone, fork, and rebrand. Running it requires a Totalum API key; the free tier includes 50 AI credits so you can test the full flow at no cost, and you move to a paid plan only when you need more usage.
Do I need one API key per user, or one for the whole app?
The app itself uses a single TOTALUM_VCAAS_API_KEY on the server. If you are building a product where many people each run their own builds, each account still traces back to a Totalum account and credits, which is how usage and billing stay clean.
Can a non-technical founder do this alone?
You can register, choose "Use the Totalum API", and copy your key without writing any code. The clone, install, and deploy commands are best handed to a developer, but the plain-language explanation in each step means you understand exactly what your developer is doing.
Where does my generated app's data live?
Each generated app stores its data in Totalum's managed database, with an admin panel and automatic backups, and reads and writes through the TotalumSDK. You can inspect and query that data using the patterns in the database SDK documentation.
Ready to build your own AI app builder?
The fastest way to see how to build an AI app builder is to run one. Register free at totalum.app, choose "Use the Totalum API" to get your key with 50 free credits, then clone ai-app-builder-open and follow the seven steps above. You will have a working, deployable Lovable-style builder on your own domain the same day, running on a single key.