Getting Started with Bolt.new

Bolt.new is StackBlitz's AI-powered development environment that lets you prompt, run, edit, and deploy full-stack web applications—all within your browser. Unlike traditional AI builders, Bolt.new gives you a complete development environment with a terminal, file explorer, and live preview.

What Makes Bolt.new Different?

Full Development Environment

Bolt.new isn't just an AI that generates code—it's a complete IDE:

• In-Browser Node.js: Run server-side code without local setup
• Real Terminal: Execute npm commands, install packages
• File System: Full project structure with real files
• Live Preview: See changes instantly as you develop
• Package Management: Install any npm package on demand

Powered by WebContainers

StackBlitz's WebContainer technology runs Node.js entirely in the browser:

• No cloud VMs or remote servers
• Near-instant startup times
• Works offline after initial load
• Secure sandboxed environment

AI + Real Development

The key difference from other AI builders:

Creating Your Account

Step 1: Visit Bolt.new

Go to bolt.new in your browser.

Step 2: Sign In

Click "Sign In" and choose:

• GitHub: Recommended for developers
• Google: Quick sign-in option

Step 3: Choose Your Plan

Free Tier:

• Limited AI prompts per day
• Basic project exports
• Community support

Pro Plan ($20/month):

• Unlimited AI prompts
• Priority support
• Advanced features

Start with the free tier to learn the platform.

Understanding the Interface

When you open Bolt.new, you'll see several key areas:

The Prompt Input

At the top, a large text area where you describe what you want to build. This is your primary way of communicating with Bolt's AI.

The Workspace

Once you start a project:

File Explorer (Left)

• Full project directory tree
• Create, rename, delete files
• Navigate your codebase

Code Editor (Center)

• Syntax highlighting
• Multiple file tabs
• Standard editor features

Preview Panel (Right)

• Live application preview
• Refreshes automatically
• Mobile viewport testing

Terminal (Bottom)

• Real Node.js terminal
• Run npm commands
• View build output and errors

The Chat Panel

An ongoing conversation with the AI:

• Ask questions about your code
• Request changes and features
• Debug issues together

Your First Project

Let's build a simple application to understand how Bolt.new works.

Step 1: Describe Your App

In the prompt input, type:

Create a simple todo list app with React.
Include:
- Add new tasks
- Mark tasks complete with a checkbox
- Delete tasks
- Tasks should persist in localStorage
Use a clean, minimal design with Tailwind CSS.

Step 2: Watch Bolt Work

Click "Generate" or press Enter. Bolt will:

1. Analyze your requirements
2. Create the project structure
3. Write all necessary code
4. Install dependencies
5. Start the development server

Watch the terminal—you'll see real npm commands running.

Step 3: Explore the Generated Code

Once complete, explore what was created:

my-todo-app/
├── src/
│   ├── App.jsx           # Main component
│   ├── components/
│   │   └── TodoItem.jsx  # Individual todo
│   ├── hooks/
│   │   └── useLocalStorage.js
│   └── main.jsx          # Entry point
├── index.html
├── package.json
├── tailwind.config.js
└── vite.config.js

Step 4: Test the Preview

In the preview panel:

1. Add a few tasks
2. Check one as complete
3. Delete a task
4. Refresh the page—tasks should persist

Step 5: Make a Change

Ask Bolt to modify the app:

Add a "Clear Completed" button that removes all checked tasks at once.
Position it at the bottom of the list.

Watch as Bolt:

• Identifies the relevant files
• Makes the necessary changes
• Updates the preview automatically

Working with the Terminal

One of Bolt.new's most powerful features is the real terminal.

Installing Packages

Need a new library? Use the terminal:

npm install date-fns

Or ask Bolt:

Add date-fns and show relative timestamps for when tasks were created.
For example: "Added 5 minutes ago"

Running Commands

Common commands work as expected:

# Check installed packages
npm list

# Run tests (if configured)
npm test

# Build for production
npm run build

Viewing Logs

Server output and errors appear in the terminal—essential for debugging.

When Things Go Wrong

Build Errors

If you see errors in the terminal:

1. Read the error message carefully
2. Ask Bolt for help: "I'm getting an error: [paste error]. Can you fix it?"
3. Check recent changes: What did you modify last?

Preview Not Loading

If the preview shows a blank page:

1. Check the terminal for errors
2. Try asking: "The preview isn't loading. What's wrong?"
3. Refresh the preview panel

AI Misunderstanding

If Bolt creates something different than expected:

That's not quite right. I wanted [clarify your intent].
Please undo the last changes and instead [specific instructions].

Saving and Sharing Your Work

Export to GitHub

1. Click the Export button
2. Choose GitHub
3. Authenticate if needed
4. Select or create a repository
5. Your code is pushed

Download Locally

1. Click Export → Download
2. Get a ZIP file of your project
3. Extract and run locally:

cd my-project
npm install
npm run dev

Share a Link

Bolt projects can be shared:

1. Click Share
2. Copy the link
3. Others can view (and fork) your project

Bolt.new vs Other Tools

When to Choose Bolt.new

✅ You want full control over the code ✅ You need to install specific npm packages ✅ You prefer a real development environment ✅ You want to learn while building ✅ You need to run terminal commands

When to Choose Alternatives

• Lovable: Better for non-developers wanting guided app building
• v0: Focused on UI component generation
• Replit: Better for learning programming fundamentals

Tips for Success

Be Specific in Prompts

❌ "Make it look better"

✅ "Improve the styling:
- Add more padding to the cards
- Use a softer background color
- Add subtle shadows
- Increase the font size of task titles"

Use the File Explorer

Don't rely only on AI—browse your files:

• Understand the project structure
• Read the code Bolt generates
• Make small manual edits when easier

Leverage the Terminal

The terminal gives you power:

• Install any package you need
• Run custom scripts
• Debug with console output

Iterate Incrementally

Build in small steps:

1. Get basic functionality working
2. Add one feature at a time
3. Style and polish last

Summary

• Bolt.new provides a full development environment in the browser
• WebContainers enable real Node.js without local setup
• The terminal lets you run real npm commands
• Start simple and iterate with AI assistance
• Export to GitHub or download when ready

Next Steps

Now that you understand the basics, let's dive deeper into Bolt's interface and learn how to work efficiently with all its features.