12.1 — App Builder

Pro+ feature. The App Builder is a premium add-on available on the Pro, Team, and Enterprise plans. On Free and Starter, the Build tab shows an upgrade prompt. See Account & Billing.

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 / delete server 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:

Connecting GitHub and Vercel links your own accounts via OAuth — the repo and deployment land in your GitHub and Vercel, and your tokens are stored encrypted. If you haven't connected GitHub, the build still runs in build-only mode (you get the ZIP, no repo or deploy). Per-account Supabase connect is still being finished: deployed apps currently ship with placeholder Supabase environment variables that you replace with your own project's keys in Vercel.

How to build from a project

1. Open your project and go to the Build tab.
2. Work through the connect checklist — connect Supabase, GitHub, and Vercel (and Stripe if your project has payments).
3. Confirm the readiness panel shows the project as prepared.
4. Choose an output target (see below).
5. Click Build.
6. Watch the progress stepper as the build moves through its stages.
7. 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. The panel also shows the run's duration, its approximate AI cost, and how many spec gaps the AI fill stage completed.

You can pick which model handles the AI fill stage from the Build button's model picker (code-capable models only). Bigger models fill complex custom logic more reliably; the default is a strong middle ground.

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.example and 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:

Current status & limitations

Be aware of where the feature stands today:

• Premium add-on. The App Builder is available on the Pro, Team, and Enterprise plans (not Free or Starter).
• Supabase per-account connect is still being wired up. GitHub and Vercel connect via OAuth today; deployed apps ship with placeholder Supabase environment variables that you replace with your own project's keys in Vercel. The build always 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.
• Authentication "none" apps are generated without login flows by design. Pages still call a requireUser() guard, but it's a documented no-op in that mode — so the app compiles and runs open. If you later want real auth, flip the architecture choice and rebuild (or replace lib/auth/guards.ts in the generated code).

The pipeline 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.

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.