12.1 — App Builder
On this page
12.1 — App Builder
🚧 Admin preview — not yet generally available. The App Builder is a premium add-on that is currently dark-launched: it is enabled for VibeMap admins only while the last-mile connect-and-deploy flows are finished. It is not live on the Starter, Pro, Team, or Enterprise plans yet. This page documents how it works today so you know what's coming; the connect buttons and the public Pro+ rollout land in a later release. Don't expect to see the Build tab on your own project unless your account has been granted preview access.
Every other part of VibeMap turns your idea into a spec and hands it to your AI coding agent. The App Builder is the one feature that turns that spec into a running app — without you leaving the platform.
It compiles your project's blueprint into a complete Next.js + Supabase application: database migrations with row-level security, CRUD logic, authentication, optional Stripe payments, and your pages. Where the spec needs custom business logic, an AI step fills the gaps; the result is verified (install, type-check, lint, build), repaired if needed, then pushed to a GitHub repo and deployed to a live URL.
Think of it as VibeMap's answer to Lovable / Bolt — except it builds from your validated spec (entities, access rules, acceptance criteria) rather than a one-off prompt.
What it does
From a single Build button, the App Builder produces a working app that includes:
- A Next.js scaffold —
package.json, config, Tailwind, layout, and global styles, all on pinned, known-good dependency versions. - Your database schema — one migration per table (columns, foreign keys, and indexes), plus typed row interfaces and
list/get/create/update/deleteserver actions for each entity. - Access control — your access rules compiled directly into Postgres row-level security (RLS) policies, and your page access rules compiled into route guards.
- Authentication — a Supabase sign-in flow matching the method you chose (email/password, social, or magic link), with optional MFA, plus the callback routes, session middleware, and a protected-route wrapper.
- Payments (optional) — if your project uses payments, a Stripe module for the model you chose (recurring subscriptions with a billing portal, or one-off orders), with a signed webhook handler.
- Your pages — route files and layout shells for every page. Pure-CRUD pages are generated end-to-end; pages that need custom logic get a shell plus an AI-filled body driven by their acceptance criteria.
- The features you toggle on — user roles, content/blog, team invitations, file storage, and marketing pages, each compiled from your architecture choices. See 12.2 App architecture options.
The blueprint is used three ways at once: as the input to the compiler, as the goal for the AI fill step, and as the test oracle for verification. That's the part a prompt-only tool can't replicate.
Prerequisites
Before a project can be built, two things need to be true.
1. Your spec must be ready. The blueprint has to be prepared for development — features approved, user stories tied to personas, acceptance criteria written, pages outlined, and the schema reviewed. The Build tab shows a readiness panel and keeps the Build button disabled until the project is prepared. See 8 — Handoff to your AI agent for what "ready" means.
2. You connect the accounts you want to use. The Build tab has a connect checklist. Each provider unlocks a different part of the output:
| Provider | What it's for | Required? |
|---|---|---|
| Supabase | Runs your migrations and gives the deployed app live data. | Needed for a live database; optional for a code-only ZIP. |
| GitHub | Creates a repo and pushes the verified code. | Needed to deploy. |
| Vercel | Creates a project and deploys it to a live URL, linked to the GitHub repo. | Needed for a live URL. |
| Stripe | Connects your account for the generated app's payments. | Only if your project uses payments. |
The per-user account-connect (OAuth) flows are part of the last-mile work still being finished. In the current admin preview, builds run against VibeMap-side credentials rather than your own connected accounts.
How to build from a project
- Open your project and go to the Build tab.
- Work through the connect checklist — connect Supabase, GitHub, and Vercel (and Stripe if your project has payments).
- Confirm the readiness panel shows the project as prepared.
- Choose an output target (see below).
- Click Build.
- Watch the progress stepper as the build moves through its stages.
- When it finishes, use the results panel — open the live URL, visit the repo, or download the ZIP, and re-run later with Rebuild from updated spec.
Output targets
You pick where the build goes. The three paths aren't mutually exclusive:
- ZIP export — the verified app as a downloadable archive, including
.env.exampleand a setup README. Requires no deploy accounts; wire your keys in later. - GitHub — a new private repo with the verified code pushed to it.
- Deploy (Vercel) — a live, deployed URL, linked to the GitHub repo, with environment variables stamped in. (Secrets are set in Vercel, never committed to the repo.)
The build stages
The progress stepper walks through these states:
| Stage | What's happening |
|---|---|
| Queued | The build is waiting to start. |
| Compiling spec | The blueprint is compiled deterministically into a file tree (schema, RLS, auth, pages). |
| Generating custom logic | AI steps fill the gaps the compiler left for custom page bodies and handlers. |
| Verifying build | The app is installed, type-checked, linted, and built; failures are repaired and re-verified (up to a few rounds). |
| Deploying | Migrations run, the repo is pushed, and Vercel deploys. |
| Done / Failed | The terminal result, with the live URL, repo link, ZIP link, or an error summary. |
Current status & limitations
Be aware of where the feature stands today:
- Premium add-on, admin preview only. The App Builder is dark-launched and gated behind admin access. It is not available on the Starter, Pro, Team, or Enterprise plans yet. When the connect-and-deploy last mile is finished, it's planned to open to Pro and above.
- Per-account connect is still being wired up. The OAuth flows that link your Supabase, GitHub, Vercel, and Stripe accounts are part of the remaining work. Until then, builds run on VibeMap-side credentials.
- A deployed app needs a connected Supabase for live data. Without a Supabase project to run the migrations against, the build still produces code-complete output — you just wire the database keys in yourself afterwards.
- First version targets authenticated CRUD-style SaaS apps (with optional Stripe). Broader app archetypes come later.
- Rebuilds are additive. Editing the spec and rebuilding works for additive schema changes; richer migration diffing is a later phase.
The feature has been validated end-to-end — a project compiling, the AI fill step running, verification passing, a repo created, and a live Vercel URL produced — so the pipeline is real. What's gated is the public, self-serve experience.
Where to go next
- Get your spec ready first → 8.1 Handoff overview — what "prepared for development" means.
- Review the schema you're about to build → 6.1 Generating schema.
- Plans & what's included → 9.1 Account & billing.
- Pick your app's architecture → 12.2 App architecture options — auth, roles, payments, content, teams, and more.
- How it's built under the hood → Developer docs: 9 App Builder architecture.