Bolt.new Complete Guide: From Prompt to Live App

Why this matters

Bolt.new is the fastest path from idea to running app available in 2026. You open a browser tab, describe what you want, and Bolt writes the code, installs npm packages, runs a dev server, and gives you a live preview — all inside a StackBlitz WebContainer running client-side. No Docker, no local Node, no config files.

Because the runtime lives in the browser, Bolt executes real Node.js, installs actual dependencies, and gives you a full-stack environment with an editable file tree. This isn't a code preview — it's a real dev environment.

The tradeoff: tokens go fast, large codebases get unwieldy, and niche stacks (Laravel, Rails, mobile) aren't natural fits. On the right problems it's one of the fastest tools in the vibecoder arsenal.

This guide walks one complete project — a SaaS-style task tracker — from first prompt to Netlify deploy.

The setup

Sign up at bolt.new ↗ with GitHub or Google. The free tier gives you a daily token budget adequate for learning; Pro unlocks larger budgets for real projects. You'll see a single prompt box. That's the whole setup.

Step 1: Write a prompt that ships, not stalls

The biggest mistake vibecoders make in Bolt is writing vague openers. "Build me a task manager" wastes your first chunk of tokens on a generic scaffold you'll spend the next ten prompts trying to reshape.

Write your opening prompt like a product spec, not a search query. Cover: what the app does, who uses it, the key screens, the tech stack you want, and the visual tone. Be specific. Bolt handles the how — you own the what.

Here's a prompt that works:

Build a task tracker SaaS app with the following specs:

- Stack: React, TypeScript, Tailwind CSS, Vite
- Three views: Today (due today), All Tasks, and Completed
- Each task has: title, due date, priority (low/medium/high), and done toggle
- Tasks stored in localStorage for now (no backend yet)
- Clean, minimal UI — dark sidebar, white main area, Inter font
- Responsive: works on mobile and desktop
- No auth needed in this first version

Start with the full app structure and routing in place before
adding styling details. Use shadcn/ui components where appropriate.

This prompt gives Bolt a complete mental model before it writes a single line. You get a real scaffold in the first generation — not a "hello world" you have to build out from scratch.

Step 2: Iterate without burning tokens

Once Bolt generates your initial scaffold, resist the urge to prompt immediately. Read the preview. Find the most important gap — not every gap — and write one focused correction.

Bad: "the UI looks off, fix the spacing, change the font size, make the sidebar narrower, and the priority colors are wrong"

Better: "The sidebar is too wide on mobile — cap it at 240px and collapse it behind a hamburger menu. Don't change anything else."

Scope-limited prompts cost fewer tokens and produce cleaner diffs. Two more moves: use the file lock feature (right-click any file, select "Lock file") to prevent Bolt from touching files you're happy with. And for visual tweaks — font sizes, colors, spacing — edit directly in Bolt's Monaco code editor. Direct edits cost zero tokens.

Step 3: Wire up data and auth

Bolt's built-in Supabase integration is the fastest path to a real backend. Open the integrations panel, connect your Supabase project, then describe what you need:

Replace localStorage with Supabase. Create a tasks table with these
columns: id (uuid), title (text), due_date (date), priority (text),
completed (boolean), user_id (uuid references auth.users).

Add Supabase Auth with Google login. On sign-in, redirect to /today.
Scope all task queries to the logged-in user. Don't change the UI.

Bolt installs the Supabase JS client, generates the migration SQL, wires up the auth flow, and updates the data layer — from that one prompt. Verify RLS is enabled on your tasks table in the Supabase dashboard before you ship; Bolt doesn't always set policies automatically.

Need a package Bolt missed? Just describe it: "install date-fns and format due dates as 'Mon Apr 28'" triggers an automatic npm install inside the WebContainer.

For more on Supabase in AI-built apps, see Supabase for Vibecoders.

Step 4: Deploy live

Bolt's native target is bolt.host — one click, instant URL, no config. For your own domain or CI/CD, connect Netlify from the integrations panel: Bolt pushes the project to a new Netlify site and wires up auto-deploy. Vercel isn't a native integration, but exporting to GitHub and connecting that repo to Vercel works fine. Either way, from finished project to live URL is under two minutes.

Common mistakes

Starting over instead of iterating. When a project feels messy, one focused prompt that resets the problem component is almost always enough. Starting over burns tokens and context you already paid for.

Trying to build large apps in one session. Apps beyond ~20 files get harder to steer reliably. Break big projects into vertical slices — ship one feature end-to-end, then continue.

Ignoring the file editor. Bolt isn't just a chat interface. The file tree, code editor, and terminal are real. Use them directly for small changes and save prompts for reasoning-heavy moves.

Not testing auth edge cases. Bolt's Supabase scaffolding is solid but not exhaustive. Always test: logged-out state, expired sessions, and private routes manually before shipping.

Picking Bolt for the wrong job. Bolt is exceptional for greenfield web apps, full-stack JavaScript prototypes, and demos you need live in an hour. It struggles with existing large codebases, mobile apps, and non-JS stacks. For Lovable vs Bolt trade-offs, or how v0 compares for pure UI work, those comparisons go deeper.

What's next

The core loop is: specific opening prompt, one-change-at-a-time iteration, direct file edits for small tweaks, Supabase for data, Netlify for deploy. That covers 80% of what you'll do in Bolt.

To go deeper: prompting patterns for code sharpens your prompts across every AI tool. Lovable's 2026 workflow covers a Bolt alternative that takes a different angle on the full-stack problem — worth knowing both.