Bolt - Introduction

Overview

Estimated time: 25–35 minutes

Bolt is StackBlitz's AI-powered development platform that enables rapid prototyping and full-stack application development directly in the browser. With intelligent code generation and instant deployment, it's perfect for experimenting with ideas and building complete applications.

Learning Objectives

• Create and configure projects in Bolt with AI assistance
• Use AI-powered code generation for full-stack development
• Deploy applications instantly with integrated hosting
• Apply best practices for rapid prototyping workflows

Prerequisites

• AI Agents - Introduction
• Basic web development knowledge (HTML, CSS, JavaScript)
• Understanding of modern web frameworks

What is Bolt?

Bolt is an AI-powered development environment that runs entirely in the browser. Built on StackBlitz's WebContainer technology, it provides a complete Node.js runtime with AI assistance for rapid application development and deployment.

Getting Started

Access and Setup

1. Visit bolt.new
2. Sign in with GitHub (recommended for saving projects)
3. Choose project type or start with AI prompt
4. Begin building immediately - no installation required

Subscription Options:
- Free: Public projects, limited compute
- Pro: Private projects, more resources
- Teams: Collaboration features, admin controls

Creating Your First Project

AI Prompt Examples:
"Build a todo app with React and localStorage"
"Create a weather dashboard using OpenWeatherMap API"
"Build a chat application with WebSocket support"
"Create an e-commerce site with Stripe integration"

Bolt will:
1. Analyze your requirements
2. Generate complete project structure
3. Install necessary dependencies
4. Provide working application
5. Create deployment-ready code

AI-Powered Development

Natural Language Project Creation

Example Request:
"Create a recipe sharing app with the following features:
- User authentication
- Recipe CRUD operations
- Image upload for recipes
- Search and filtering
- Responsive design with Tailwind CSS
- Node.js backend with Express
- SQLite database"

Bolt Response:
✅ Frontend: React with Tailwind CSS
✅ Backend: Express.js with authentication
✅ Database: SQLite with recipe schema
✅ File Upload: Multer for images
✅ API: RESTful endpoints
✅ Deployment: Ready to deploy

Iterative Development

// Start with basic structure
// Prompt: "Add user authentication to this app"

// Bolt adds:
// - Login/register components
// - JWT token handling
// - Protected routes
// - User context provider

// Next: "Add real-time notifications"
// Bolt integrates:
// - WebSocket connection
// - Notification component
// - Event broadcasting
// - Connection management

Code Modification and Enhancement

Modification Examples:

"Make this mobile-responsive"
→ Adds responsive breakpoints and mobile navigation

"Add dark mode support"
→ Implements theme switching with CSS variables

"Optimize for performance"
→ Adds lazy loading, code splitting, caching

"Add TypeScript"
→ Converts to TypeScript with proper types

"Integrate with Stripe"
→ Adds payment processing with security

Full-Stack Development Features

Frontend Frameworks

Backend Integration

// Express.js API example generated by Bolt
const express = require('express');
const cors = require('cors');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');

const app = express();
app.use(cors());
app.use(express.json());

// Database setup (SQLite with better-sqlite3)
const Database = require('better-sqlite3');
const db = new Database('app.db');

// User authentication endpoints
app.post('/api/register', async (req, res) => {
  const { email, password } = req.body;
  
  try {
    const hashedPassword = await bcrypt.hash(password, 10);
    const stmt = db.prepare('INSERT INTO users (email, password) VALUES (?, ?)');
    const result = stmt.run(email, hashedPassword);
    
    const token = jwt.sign({ userId: result.lastInsertRowid }, process.env.JWT_SECRET);
    res.json({ token, message: 'User created successfully' });
  } catch (error) {
    res.status(400).json({ error: 'User registration failed' });
  }
});

// Additional endpoints generated automatically...

Database Operations

-- Bolt can generate complete database schemas
CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  email TEXT UNIQUE NOT NULL,
  password TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE recipes (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER NOT NULL,
  title TEXT NOT NULL,
  description TEXT,
  ingredients TEXT NOT NULL,
  instructions TEXT NOT NULL,
  image_url TEXT,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users (id)
);

-- Indexes for performance
CREATE INDEX idx_recipes_user_id ON recipes(user_id);
CREATE INDEX idx_recipes_created_at ON recipes(created_at);

Instant Deployment

Deployment Process

Automatic Deployment:
1. Every Bolt project gets a live URL instantly
2. Changes are deployed in real-time
3. No build configuration required
4. HTTPS enabled by default
5. CDN distribution included

URL Format:
https://stackblitz.com/~/github-username/project-name
https://project-name--user.stackblitz.io

Environment Configuration

# Environment variables setup
# .env file (automatically configured)
JWT_SECRET=your-secret-key-here
DATABASE_URL=sqlite:./app.db
API_BASE_URL=https://your-app.stackblitz.io
UPLOAD_DIR=./uploads

# Bolt handles:
# - Environment variable injection
# - Secret management
# - CORS configuration
# - SSL certificates

Collaboration Features

Real-time Collaboration

Collaboration Features:
- Live cursor tracking
- Simultaneous editing
- Instant preview sharing
- Comment system
- Version history
- Fork and merge workflow

Sharing Options:
- Share live preview URL
- Share editor with edit access
- Embed in websites
- Download as ZIP
- Push to GitHub

Team Workflows

Team Development:
1. Create project with AI
2. Share with team members
3. Collaborative development
4. Real-time testing
5. Client feedback on live URL
6. Iterate based on feedback
7. Deploy to production

Perfect for:
- Rapid prototyping sessions
- Client demos and feedback
- Educational workshops
- Hackathons and competitions

Advanced AI Features

Code Explanation and Documentation

AI Assistance Beyond Generation:
- Explain complex code sections
- Generate comprehensive documentation
- Suggest performance optimizations
- Identify security vulnerabilities
- Recommend best practices
- Convert between frameworks

Testing and Quality Assurance

// AI can generate comprehensive tests
// Prompt: "Add unit tests for the recipe API"

const request = require('supertest');
const app = require('../app');
const Database = require('better-sqlite3');

describe('Recipe API', () => {
  let db;
  let authToken;

  beforeEach(() => {
    db = new Database(':memory:');
    // Setup test data
  });

  test('should create a new recipe', async () => {
    const recipeData = {
      title: 'Test Recipe',
      ingredients: 'Test ingredients',
      instructions: 'Test instructions'
    };

    const response = await request(app)
      .post('/api/recipes')
      .set('Authorization', `Bearer ${authToken}`)
      .send(recipeData)
      .expect(201);

    expect(response.body.title).toBe(recipeData.title);
  });

  // Additional tests generated automatically...
});

Integration Examples

E-commerce Application

Prompt: "Build a complete e-commerce store with product catalog, 
shopping cart, user accounts, and Stripe payments"

Generated Stack:
- Frontend: React with Tailwind CSS
- Backend: Express.js with authentication
- Database: SQLite with product/order schema
- Payments: Stripe integration
- Features: Cart, checkout, order management
- Admin: Product management dashboard

Time to working prototype: ~5 minutes

Social Media Dashboard

Prompt: "Create a social media analytics dashboard that displays 
engagement metrics with charts and real-time updates"

Generated Features:
- Dashboard with Chart.js visualizations
- WebSocket for real-time updates
- Responsive design
- Data filtering and date ranges
- Export functionality
- User authentication

Components:
- Analytics API endpoints
- Chart components
- Real-time data streaming
- PDF report generation

Best Practices

Effective AI Prompting

Project Organization

Limitations and Considerations

What Bolt Excels At

• ✅ Rapid prototyping and MVPs
• ✅ Full-stack web applications
• ✅ Educational projects and tutorials
• ✅ Client demos and proof of concepts
• ✅ API development and testing

Current Limitations

• ❌ Limited to web technologies
• ❌ No native mobile app development
• ❌ Resource constraints on free tier
• ❌ Not suitable for large-scale production apps
• ❌ Limited database options

Common Use Cases

Rapid Prototyping

Ideal for:
- Validating product ideas quickly
- Creating investor demos
- Building hackathon projects
- Testing UI/UX concepts
- API prototyping

Workflow:
1. Describe idea in natural language
2. Get working prototype in minutes
3. Share with stakeholders
4. Iterate based on feedback
5. Export for production development

Educational Projects

Perfect for:
- Learning new frameworks
- Teaching web development
- Code examples and tutorials
- Student project templates
- Programming workshops

Benefits:
- No setup required
- Instant results
- Shareable examples
- Interactive learning
- Real-world applications

Checks for Understanding

1. What makes Bolt different from traditional development environments?
2. How does AI assistance work in Bolt for full-stack development?
3. What are the main benefits of instant deployment in Bolt?

Exercises

1. Create a simple todo application using AI prompts in Bolt
2. Build a weather app that integrates with a weather API
3. Develop a chat application with real-time messaging
4. Share your project with others and gather feedback