How to Use Bolt.new: Build Full-Stack Apps with AI in Minutes (2026)

Bolt.new by StackBlitz lets you build, run, and deploy full-stack web applications entirely in your browser using AI. No local setup required — just describe what you want, and Bolt generates a working application with frontend, backend, database, and deployment configuration. It’s the fastest way to go from idea to a live, functional web app.

This guide covers everything from writing your first prompt to deploying production applications, including tips for getting the best results from Bolt’s AI.

TL;DR — Quick Start

1. Visit bolt.new — sign in with GitHub
2. Describe your app: “Build a task management app with user accounts”
3. Watch it build: Bolt creates files, installs packages, and runs the app
4. Edit in real-time: Request changes in natural language
5. Deploy: One-click deploy to Netlify or Vercel

Pricing

Plan	Price	Tokens/Mo	Features
Free	$0	Limited	Basic generation, community support
Pro	$20/mo	10M	Priority generation, faster models
Team	$40/user/mo	20M	Collaboration, shared projects

How Bolt.new Works

Bolt.new runs a full development environment in your browser powered by WebContainers (StackBlitz’s technology for running Node.js in the browser). When you describe an app:

1. AI generates the codebase: Files, folders, configurations
2. Packages install automatically: npm dependencies are resolved in-browser
3. App runs instantly: Preview appears in a side panel
4. You iterate with chat: Request changes, AI updates the code live

No terminals, no git commands, no deployment pipelines — everything happens in the browser.

Building Your First App

Step 1: Write a Good Prompt

The more specific your initial prompt, the better the result. Include:

• What the app does: Core functionality
• Tech stack preferences: React, Vue, Svelte, etc.
• Visual style: Modern, minimal, dark mode, etc.
• Key features: Authentication, database, specific pages

Example prompts:

Basic:

Build a personal blog with markdown support

Better:

Build a personal blog using Astro with:
- Markdown blog posts with frontmatter
- Dark/light mode toggle
- Tag filtering and search
- RSS feed
- Responsive design with Tailwind CSS
- SEO meta tags on all pages

Step 2: Review the Generated App

Bolt shows:

• File explorer: All generated files and folders
• Code editor: View and manually edit any file
• Preview panel: Live-running app
• Chat panel: Continue requesting changes

Step 3: Iterate with AI

After the initial generation, use the chat to refine:

• “Add a contact form with email validation”
• “Change the color scheme to blue and gray”
• “Add pagination to the blog posts page”
• “Make the navigation sticky on scroll”

Each instruction updates the code and the preview refreshes automatically.

Step 4: Deploy

When you’re satisfied:

1. Click the Deploy button
2. Choose Netlify or Vercel
3. Connect your account
4. Deploy with one click
5. Get a live URL for your app

Supported Tech Stacks

Bolt.new works with any Node.js-based stack:

Stack	Best For
React + Vite	SPAs, dashboards
Next.js	Full-stack apps, SSR
Astro	Content sites, blogs
Svelte/SvelteKit	Lightweight apps
Vue + Nuxt	Vue ecosystem apps
Express	Backend APIs
Remix	Full-stack with loaders

Database Options

• SQLite: Built-in, no setup (via better-sqlite3 or Drizzle)
• Supabase: PostgreSQL with auth and real-time
• Firebase: NoSQL with auth and hosting
• Prisma: ORM with any supported database

Prompting Strategies

Strategy 1: Start Simple, Iterate

Prompt 1: "Create a simple todo app with React and Tailwind"
Prompt 2: "Add categories and due dates to each todo"
Prompt 3: "Add drag-and-drop reordering"
Prompt 4: "Persist data to localStorage"

This approach lets you build incrementally and catch issues early.

Strategy 2: Detailed Blueprint

Build a project management dashboard with:

Tech: React, TypeScript, Tailwind CSS, Zustand for state

Pages:
- Dashboard: Overview with charts showing project status
- Projects: List with filters (status, priority, team)
- Project Detail: Kanban board with drag-and-drop
- Settings: Theme and notification preferences

Components:
- Sidebar navigation with collapsible sections
- Data tables with sorting and filtering
- Modal dialogs for creating/editing items
- Toast notifications for actions

Data: Use mock data with TypeScript interfaces. Include 10 sample projects with tasks.

Strategy 3: Reference Existing Apps

Build a Notion-like document editor with:
- Block-based editing (headings, text, lists, code, images)
- Drag-and-drop block reordering
- Slash command menu for adding blocks
- Sidebar with page tree navigation
- Dark mode support

Working with the Editor

Manual Code Edits

You can directly edit any file in the code editor:

1. Click on a file in the explorer
2. Make your changes
3. The preview updates automatically
4. Continue using chat — AI is aware of your manual changes

File Management

• Create new files through the explorer
• Drag files to reorganize
• Delete files you don’t need
• AI respects your file structure decisions

Terminal Access

The built-in terminal lets you:

• Install additional npm packages
• Run scripts and builds
• Check for errors and logs
• Execute any Node.js compatible command

Advanced Use Cases

Full-Stack with Authentication

Build a SaaS dashboard with:
- Supabase for auth (email + Google OAuth)
- Protected routes requiring login
- User profile page
- Admin panel for user management
- Role-based access (admin, user)

E-Commerce Store

Build a product store with:
- Product listing page with grid/list toggle
- Product detail page with image gallery
- Shopping cart with quantity controls
- Checkout form with validation
- Order confirmation page
- Responsive design for mobile

API Integration

Build a weather dashboard that:
- Uses OpenWeatherMap API (I'll provide the key)
- Shows current weather and 5-day forecast
- Supports location search
- Displays weather maps
- Has a favorites list for saved locations

Tips for Best Results

1. Be specific about tech choices: “Use React with TypeScript and Tailwind” prevents the AI from guessing
2. Include visual references: “Similar to Linear’s UI” or “Minimal like Notion”
3. Describe data structures: “Each project has a title, description, status (todo/in-progress/done), priority (low/medium/high), and assigned team members”
4. Request one feature at a time when iterating — complex multi-feature requests can cause issues
5. Check the preview after each change before requesting the next one
6. Use the terminal for debugging when the preview shows errors
7. Save your project regularly — use the export option to download the code

Exporting Your Code

You’re not locked into Bolt.new. Export your project anytime:

1. Click Download to get a ZIP of all files
2. Open in your local editor (VS Code, Cursor, etc.)
3. Run npm install && npm run dev to continue locally
4. Push to GitHub for version control
5. Deploy anywhere you want

Troubleshooting

App Not Loading in Preview

• Check the terminal for error messages
• Ask Bolt: “The preview shows an error, can you fix it?”
• Try refreshing the preview panel
• Clear the terminal and run npm run dev again

AI Making Wrong Changes

• Be more specific in your instructions
• Reference specific files: “In App.tsx, change the header color”
• Undo changes and try a different approach
• Manually edit the specific lines, then let AI continue

Package Installation Failures

• Some packages don’t work in WebContainers
• Native dependencies (like sharp, canvas) are not supported
• Ask Bolt for browser-compatible alternatives
• Check if a different package provides the same functionality

Performance Issues

• Large projects may slow down the browser
• Close unused browser tabs
• Reduce the number of open files in the editor
• Consider exporting and continuing development locally

Bolt.new vs Alternatives

Feature	Bolt.new	v0 (Vercel)	Replit	Lovable
Full-stack	Yes	Frontend only	Yes	Frontend-focused
In-browser runtime	Yes	Preview only	Cloud VM	Preview only
Database	SQLite, Supabase	None	Multiple	Supabase
Deployment	Netlify, Vercel	Vercel	Replit hosting	Custom
Code export	Yes	Yes	Yes	Yes
Price (Pro)	$20/mo	$20/mo	$25/mo	$20/mo
Offline capability	Partial	No	No	No

FAQ

Is Bolt.new free?

Yes, the free tier lets you build and test apps with limited generation tokens. For regular use, the Pro plan at $20/month provides significantly more tokens and faster generation.

Can I use Bolt.new for production apps?

Yes. The generated code is standard React/Next.js/etc. that you can export and deploy anywhere. For serious production apps, export the code, add proper testing, and deploy through your preferred pipeline. Many developers use Bolt for rapid prototyping then continue development locally.

What programming languages does Bolt.new support?

Bolt.new runs Node.js in the browser, so it supports JavaScript, TypeScript, and any framework that runs on Node.js. It doesn’t support Python, Ruby, or other server-side languages directly, though you can build apps that call external APIs written in any language.

How does Bolt.new compare to v0?

v0 by Vercel focuses on generating individual UI components and pages with excellent design quality. Bolt.new generates complete full-stack applications with backend logic, databases, and routing. Use v0 for beautiful UI components, Bolt for complete applications.

Can multiple people collaborate?

The Team plan supports collaboration with shared projects and tokens. Multiple team members can work on the same project, though real-time co-editing is limited. For complex team projects, exporting to GitHub and using standard git workflows is recommended. For more insights, check out our guide on How to Use Google Gemini AI. For more insights, check out our guide on How to Use DALL. For more insights, check out our guide on How to Use ChatGPT Effectively. For more insights, check out our guide on How to Use Midjourney.

Conclusion

Bolt.new dramatically reduces the time between having an idea and having a working app. The ability to generate, run, and deploy full-stack applications entirely in the browser eliminates setup friction and lets you focus on what you’re building rather than how to configure it.

Start with a specific, detailed prompt for your first project. Iterate in small steps, checking the preview after each change. When you’re happy with the result, either deploy directly or export the code for further local development. Bolt.new is particularly powerful for rapid prototyping, MVPs, and personal projects where speed matters more than fine-grained control.