01What VibeSafe Builder does
You describe an app in plain English, and VibeSafe Builder generates a complete, working, single-file web app — one HTML document with the styling and logic built in. 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.
02Choose 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:
Bring Your Own Key (free platform fee)
Paste an Anthropic API key (get one at platform.claude.com) into the Anthropic API key field. It's stored only in your browser and sent straight to our server per-request — we never log or store it. You're billed by Anthropic directly, at their standard rates, with no markup from us.
Managed plan ($15/month)
Enter your email under Managed plan and click Email me a sign-in link. Click the link in your inbox, and you're signed in — no API key needed. We cover up to $10/month of Anthropic usage on our own key. Subscribe via the pricing section on the homepage first if you haven't already.
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.
03Build 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.
04Read 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.
05Preview and code tabs
The workspace on the right has four tabs:
- Preview — your app running live in a sandboxed iframe, exactly as a user would see it.
- Code — the full HTML source, with Copy code and Download .html buttons.
- Versions — every generation you've kept, see §7.
- Security — the scan results for the current version, see §8.
06Ask 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.
07Version 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.
08The 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.
09Download or publish
Download .html
From the Code tab — saves the current version as my-app.html, a single portable file you can open locally, host anywhere, or hand to someone else. This is your app; there's no lock-in. Installable to a phone's home screen out of the box.
Publish
From the Preview tab — uploads the current version to a shareable link at vibesafebuilder.com/p/<id>. Blocked automatically if the security scan finds a critical issue. Publishing is public: anyone with the link can open it, installable to their home screen, and works offline. Click Republish after later changes to update the same link.
Want your own domain instead of a vibesafebuilder.com link? See the full deployment guide — Netlify, Vercel, GitHub Pages, and more.
10Managed 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.
11Troubleshooting
- "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.
- Something else — email contact@vibesafebuilder.com.