How to use VibeSafe Builder — from first prompt to published app

01What VibeSafe Builder does

You describe an app in plain English, and VibeSafe Builder generates a complete, working app. For most requests that's a single self-contained HTML file, live in seconds. For a bigger idea, start a multi-file React project instead (§10) — real components in separate files, a backend for shared data when you need one, and a path to a repository on GitHub and a deployment on your own Vercel account when it's ready for the world. Either way: every generation shows its cost before you commit to it, every change is a version you can roll back, and every build is scanned for common security mistakes before you can publish or feel good about sharing it.

02Create your account

Every account — whether you'll bring your own API key or go Managed — starts by signing up at the builder. Three ways in, all landing you in the same place:

• Email and password — enter your name, email, and a password (at least 8 characters).
• Continue with Google
• Continue with GitHub — this is a sign-in only. It just confirms who you are; it does not give VibeSafe access to your repositories. Pushing code to GitHub is a separate connection you make later, with its own explicit permission screen — see §11.

Your password is handled by Supabase Auth, our authentication provider — it's stored hashed, and we never see or handle it in plaintext ourselves.

03Choose a mode: bring your key, or go Managed

Open the builder and click ⚙ Settings in the top bar. You have two ways to pay for generations:

You can also set a session spend cap in the same Settings panel (BYOK mode only) — generation is blocked once a new request would push your successful-build spend past that number.

04Build your first app

Two ways to start, both in the chat panel on the left:

• Describe it — type something like "a habit tracker with streaks" or "an invoice generator" into the composer and click Build it.
• Start from a template — pick one of the 15 free templates shown above the composer for an instant v1 at zero generation cost, then keep chatting to customize it.

Generation streams in live; you'll see the assistant's one-line summary followed by the app appearing in the Preview tab on the right.

05Read the cost estimate and spend meter

Before you hit send, the composer shows an estimated cost range for that specific request. After it completes, the top bar's build spend meter updates — but only for generations that actually produced a working app. If a generation fails (an invalid response, a refusal, a timeout), its cost shows separately as "failed (not counted)" and is never added to your spend total. This is the "failures don't count" principle from the homepage, made literal.

06The workspace tabs

The panel on the right of the chat has several tabs. Which ones you see depends on whether your current project is a single file or a multi-file React project (§10):

• Preview — your app running live in a sandboxed iframe, exactly as a user would see it.
• Build Health — a combined pass/fail verdict from the security scan and Launch Check together, for multi-file projects.
• Code — the full source, with Copy code and Download buttons.
• Versions — every generation you've kept, see §8.
• GitHub — push a multi-file project to a repository you own, see §11.
• Deploy — deploy a multi-file project to your own Vercel account, see §12.
• Security — the scan results for the current version, see §9.
• Launch Check — loads your app in a real browser to catch console errors, crashes, and mobile-layout breaks that a static scan can't see.

07Ask for changes — and what happens when a fix doesn't work

Keep chatting to iterate: "add dark mode", "the delete button doesn't work", "make it mobile-friendly". Each request only touches what you asked for — the model is instructed to preserve everything that already works rather than silently rewriting your app.

08Version history and rollback

Every successful generation is saved as a version in the Versions tab, newest first, each showing its cost and a short note. Click any version to see a line-by-line diff against the one before it. Click Restore on any older version to make it current again — nothing is lost, later versions stay in the list. Version history lives in your browser's localStorage (capped at the most recent 20 versions to stay within storage limits), so it survives a page reload but not a browser data wipe — download the app if you want a permanent copy.

09The security tab

Every generation is checked against a set of common AI-coding mistakes — hardcoded API keys and secrets, eval() / dynamic code execution, passwords written to localStorage, insecure requests, and more. The Security tab badge turns red if anything critical is found, with a plain-English explanation of each issue and how to ask the AI to fix it. This same check runs again, server-side, the moment you try to publish — so a bypassed or stale client-side result can never slip a critical issue onto a public link.

Deploying to your own Vercel account runs a related but separate check, the Publish Security Check — see §12.

10Building something bigger: multi-file React projects

Everything above works the same way for a single-file app or a bigger project — the difference is what you start with. Click ⚛ New React project (in the chat, or from the empty state on the GitHub or Deploy tabs) instead of building a single page, and the builder generates a real project instead: components, hooks, and styles in separate files, assembled with Vite so it's a genuinely portable, buildable codebase — not something specific to this builder.

• Targeted edits. Ask for a change and only the files that need it get rewritten — the rest of your project is left alone.
• Visual editing. Click any element in the Preview to edit its text or style directly, without writing a prompt for small changes.
• A real backend, when you ask for it. If a request clearly needs data shared between people or across devices — a shared list, a leaderboard, a guestbook — the AI reaches for a built-in backend API automatically. There are no accounts on it by default (everyone who visits a published app shares the same data, like a public whiteboard); ask specifically for per-visitor accounts if you need private data per user.

Once you're in a multi-file project, three more tabs light up: GitHub (§11), Deploy (§12), and Build Health, which combines the security scan and Launch Check into one verdict.

11Connecting GitHub

The GitHub tab pushes a multi-file project into a real repository you own — so your code isn't trapped in the builder. This is a separate connection from signing in with GitHub (§02): signing in only confirms who you are, while connecting here asks for permission to create and write to repositories, shown on GitHub's own consent screen before anything happens.

Disconnect any time from the GitHub tab — this removes the stored connection only, it doesn't touch anything already pushed to GitHub.

12Deploying to your own Vercel account

The Deploy tab puts a multi-file project live on your own Vercel account — your domain, your bill, and it keeps working whether or not you ever open this builder again. This is different from the built-in Publish button (§13): Vercel builds your project from real source with npm install and a real Vite build, the same as if you'd pushed it yourself.

Making it public. When you're ready for anyone to see it, click Make public… on the Deploy tab. This runs the Publish Security Check first — a scan of every file in your project for live credentials (API keys, database passwords, tokens) and other serious issues. A live credential blocks the change outright, with no way to override it; there's no legitimate reason to knowingly publish a working key, and it may already need rotating if it reached this point. You'll then be asked to type the project's name to confirm — a real safeguard, not a checkbox, since this is the one action here that exposes your app to the whole internet. After it runs, the builder actually checks that the site is reachable by an outside visitor, rather than just trusting Vercel's response.

Making it private again. Make private… restores protection to exactly the mode it was in before — not a generic default, so if you'd only protected preview deployments, that's what comes back.

Every connect, deploy, and protection change is recorded in an activity log on the Deploy tab, and you can disconnect your Vercel account at any time — this only removes the stored token, your deployed sites stay online.

13Download or publish

These two work the same way for multi-file projects. For a real custom domain, or to host the project entirely under your own control, GitHub (§11) and Vercel (§12) are the paths built for that — see also the full deployment guide for every other option, from Netlify to Cloudflare Pages.

14Managed plan budget and limits

The Managed plan's $10/month included usage is tracked automatically. If you hit that limit mid-month, generation pauses with a message telling you exactly how much you've used — you can wait for the next billing cycle, or switch to your own API key in Settings to keep going immediately. BYOK mode has no monthly cap beyond the session spend cap you set yourself.

15Troubleshooting

• "Invalid API key" error — double-check the key in Settings; it should start with sk-ant-.
• Generation blocked by the spend cap — raise the session cap in Settings, or wait if you're near your intended budget on purpose.
• Lost my project — BYOK projects live in browser localStorage only; if you cleared browser data or switched devices without downloading first, it can't be recovered. Reload the same browser/profile to have it restored automatically.
• Publish button is disabled — you need at least one generated version, and the current version must pass the security scan.
• Make public is blocked — the Publish Security Check found a live credential or a serious issue. A live credential can't be overridden — remove it from the code and rotate it, since it may already be compromised. Other issues can be reviewed and, if you're sure, continued past.
• Vercel connection doesn't work / can't change protection — reconnect with a fresh token if it was revoked or expired, and make sure it's scoped to the project you're deploying to. Some tokens can deploy but aren't permitted to change project settings — if Make Public says so, turn Deployment Protection off directly in your Vercel project settings instead.
• GitHub push fails — reconnect GitHub from the GitHub tab; a token can expire or be revoked outside the builder.
• Something else — email contact@vibesafebuilder.com.