The Bolt.new Interface

Bolt.new combines an AI assistant with a full development environment. Understanding each component and how they work together will make you significantly more productive.

Interface Overview

The Bolt.new interface has four main areas:

┌─────────────────────────────────────────────────────────────┐
│                      AI Chat / Prompt                        │
├──────────────┬─────────────────────────┬────────────────────┤
│              │                         │                     │
│    File      │       Code Editor       │      Preview        │
│   Explorer   │                         │                     │
│              │                         │                     │
├──────────────┴─────────────────────────┴────────────────────┤
│                        Terminal                              │
└─────────────────────────────────────────────────────────────┘

Let's explore each section in detail.

The AI Chat Panel

Starting a Conversation

The chat panel is your primary way of working with Bolt's AI:

Initial Prompt: Describe what you want to build Follow-up Messages: Refine, add features, fix issues Context Awareness: The AI sees your entire codebase

Effective Chat Patterns

Feature Requests

Add user authentication with email/password.
Include:
- Sign up page
- Login page
- Protected routes
- Logout functionality
Store user data in localStorage for now.

Bug Fixes

The todo items aren't saving properly. When I refresh,
they disappear. Can you check the localStorage logic?

Explanations

Can you explain how the useEffect hook works in App.jsx?
I want to understand when it runs.

Refactoring

The App.jsx file is getting too long. Can you split it
into smaller components while keeping the same functionality?

Chat History

Your conversation persists throughout the session:

• Scroll up to see previous messages
• Reference earlier context: "Like we did with the header..."
• The AI remembers what it built

The File Explorer

Navigation

The left panel shows your complete project structure:

my-project/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── Header.jsx
│   │   └── TodoList.jsx
│   ├── hooks/
│   │   └── useLocalStorage.js
│   ├── styles/
│   │   └── globals.css
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

File Operations

Create New Files

1. Right-click a folder
2. Select "New File" or "New Folder"
3. Enter the name

Or ask the AI:

Create a new component called UserProfile.jsx in the components folder.

Rename Files

• Right-click → Rename
• Or F2 when selected

Delete Files

• Right-click → Delete
• Bolt won't delete files without confirmation

Understanding the Structure

Common patterns Bolt generates:

React/Vite Project

src/
├── components/     # Reusable UI components
├── hooks/          # Custom React hooks
├── pages/          # Route-level components
├── utils/          # Helper functions
├── styles/         # CSS files
├── App.jsx         # Root component
└── main.jsx        # Entry point

Next.js Project

app/
├── layout.jsx      # Root layout
├── page.jsx        # Home page
├── globals.css     # Global styles
└── [route]/        # Dynamic routes
    └── page.jsx

The Code Editor

Editor Features

Bolt includes a full-featured code editor:

Syntax Highlighting

• JavaScript/TypeScript
• JSX/TSX
• CSS/Tailwind
• JSON, HTML, Markdown

Multiple Tabs

• Click files to open in tabs
• Ctrl/Cmd + Click to open in new tab
• Close with X or middle-click

Find and Replace

• Ctrl/Cmd + F: Find in file
• Ctrl/Cmd + H: Replace

Editing Code Directly

You don't always need the AI—edit code yourself:

// Change this button's text manually
<button className="bg-blue-500 text-white px-4 py-2 rounded">
  Save Task  {/* Edit this text directly */}
</button>

When to edit manually:

• Small text changes
• Adjusting CSS values
• Quick fixes you understand

When to use AI:

• Adding new functionality
• Refactoring complex code
• Working with unfamiliar patterns

Keyboard Shortcuts

The Preview Panel

Live Preview

The right panel shows your running application:

• Auto-refresh: Changes appear instantly
• Full interactivity: Click, type, navigate
• Real browser environment: Cookies, localStorage work

Preview Controls

Refresh Button: Force reload the preview URL Bar: Shows current route, can navigate manually Device Mode: Test different viewport sizes

Testing Responsive Design

Change the preview width to test mobile:

1. Drag the panel edge to resize
2. Or use viewport buttons (if available)

Ask Bolt about responsive issues:

The layout breaks on mobile. The sidebar overlaps the content.
Can you make it responsive with a hamburger menu on small screens?

Opening in New Tab

For fuller testing:

1. Click "Open in new tab" icon
2. Get the full browser with dev tools
3. Test more thoroughly

The Terminal

Real Node.js Environment

This is a genuine terminal running in WebContainers:

# Check Node version
node --version

# Check npm version
npm --version

# List files
ls -la

Common Terminal Tasks

Installing Packages

# Install a dependency
npm install axios

# Install as dev dependency
npm install -D vitest

# Install multiple packages
npm install date-fns lodash uuid

Running Scripts

# Start dev server (usually auto-started)
npm run dev

# Build for production
npm run build

# Run tests
npm test

# Run linting
npm run lint

File Operations

# Create directory
mkdir src/utils

# Move file
mv src/helpers.js src/utils/

# Remove file
rm src/unused.js

Reading Terminal Output

Success Messages

VITE v5.0.0 ready in 250 ms
➜ Local: http://localhost:5173/

Error Messages

ERROR in src/App.jsx
Line 15: 'useState' is not defined

When you see errors:

1. Read the full message
2. Note the file and line number
3. Ask Bolt: "I'm seeing this error: [paste it]. Can you fix it?"

Terminal + AI Workflow

Combine terminal commands with AI help:

I ran `npm install @tanstack/react-query` in the terminal.
Can you now add data fetching to the UserList component using React Query?

Panel Management

Resizing Panels

• Drag borders between panels
• Double-click to reset to default
• Collapse panels you don't need

Focus Mode

When you need more space:

• Collapse the file explorer (click toggle)
• Minimize the terminal (drag to bottom)
• Maximize the editor for focused coding

Recommended Layouts

For AI-Assisted Building

• Large chat panel
• Medium preview
• Small editor (let AI write code)

For Manual Coding

• Large editor
• Medium preview
• Collapsed chat

For Debugging

• Large terminal
• Medium editor
• Medium preview

Working with Multiple Files

Following AI Changes

When Bolt modifies files:

1. Watch the file explorer for highlighted changes
2. Click to view the modified file
3. Review what was changed

Understanding Dependencies

Files often connect:

// App.jsx imports from:
import Header from './components/Header'
import TodoList from './components/TodoList'
import { useLocalStorage } from './hooks/useLocalStorage'

// If you modify TodoList, App.jsx may need updates

Ask about dependencies:

What other files would I need to update if I change
the props that TodoItem accepts?

Session Management

Saving Progress

Bolt auto-saves your work, but for safety:

Export to GitHub: Permanent backup Download ZIP: Local backup Copy Important Code: Manual safety net

Resuming Work

If you return to Bolt:

• Recent projects appear on dashboard
• Code persists within the session
• Chat history is maintained

Starting Fresh

To reset completely:

Let's start over with a clean React + Vite project.
Clear everything and create a fresh setup.

Optimizing Your Workflow

Efficient Prompting

Be specific about locations:

In the Header component, add a user avatar on the right side.

Reference existing code:

Use the same card styling we have in TodoItem for the UserCard.

Request explanations:

After you make the change, explain what you modified and why.

Using AI + Manual Editing

The best workflow combines both:

1. AI for scaffolding: "Create a settings page"
2. Manual tweaks: Adjust specific text
3. AI for features: "Add form validation"
4. Manual polish: Fine-tune spacing

Common Patterns

Starting a feature:

Add [feature]. Show me the plan first before making changes.

Reviewing changes:

What files did you just modify? Summarize the changes.

Rolling back:

That change broke something. Undo the last modification to App.jsx.

Summary

• Chat Panel: Your AI assistant for building and debugging
• File Explorer: Navigate and manage your project structure
• Code Editor: View and edit files directly
• Preview: Test your application in real-time
• Terminal: Run commands, install packages, debug

Understanding how these pieces work together lets you build applications efficiently—using AI when helpful and manual editing when faster.

Next Steps

Now that you understand the interface, let's build a complete full-stack application to see how all these pieces come together.