Bolt AI Prompt Engineering Guide

Bolt (bolt.new) is an AI-powered web development platform that creates full-stack applications directly in your browser. It uses WebContainers to run Node.js entirely client-side, enabling instant previews and rapid iteration.

This guide will help you write prompts that effectively communicate your app requirements to Bolt, resulting in better applications with fewer iterations.

Bolt can build applications using various frameworks:

• React + Vite for modern SPAs
• Next.js for full-stack React apps
• Astro for content-focused sites
• Remix for full-stack web apps
• Vue, Svelte, and more

Bolt runs entirely in the browser using WebContainers, which means it can install npm packages, run build processes, and even start development servers—all without a backend.

1. Specify Your Framework

Tell Bolt which framework to use upfront:

Using Next.js 14 with App Router, build a blog platform with:
- Markdown content support
- SEO-optimized pages
- Dark mode toggle

2. Describe the Full Stack

Include both frontend and backend requirements:

Build a todo app with React and a Node.js backend.
Frontend: List view, add/edit/delete tasks, filter by status
Backend: REST API with /api/todos endpoints, SQLite database

3. Include Styling Preferences

Bolt supports various styling approaches:

Style with Tailwind CSS. Use a modern, minimal design with:
- Soft shadows and rounded corners
- A blue/purple gradient for the header
- Inter font for typography

4. Define Data Models

Explain your data structure:

Data model:
- Users: id, email, name, created_at
- Posts: id, title, content, author_id, published, created_at
- Comments: id, post_id, user_id, content, created_at

Relations:
- Users have many Posts
- Posts have many Comments

5. Specify Package Requirements

Mention specific libraries you want:

Use these packages:
- react-hook-form for form handling
- zod for validation
- tanstack-query for data fetching
- lucide-react for icons

Dashboard Application

Build an analytics dashboard using React + Vite.

Features:
- Login page with email/password
- Dashboard with:
  - Summary cards (users, revenue, orders, growth)
  - Line chart for revenue over time
  - Bar chart for top products
  - Recent activity table
- Sidebar navigation
- Dark mode toggle in header

Tech:
- Tailwind CSS for styling
- Recharts for visualizations
- Fake data that looks realistic

UI Reference: Similar to the Vercel dashboard

API + Frontend

Build a bookmark manager with Next.js.

Frontend:
- Add bookmark form (URL, title, tags)
- Grid of bookmark cards with favicons
- Search and filter by tags
- Folders for organization

Backend:
- API routes for CRUD operations
- SQLite database with Prisma
- URL metadata extraction (title, description, favicon)

Auth:
- NextAuth with credentials provider

Real-Time Application

Build a collaborative whiteboard using React.

Features:
- Canvas for drawing with mouse/touch
- Drawing tools: pen, shapes, text, eraser
- Color picker and stroke width
- Undo/redo functionality
- Export as PNG

Libraries:
- fabric.js or konva for canvas
- react-colorful for color picker

Focus on smooth performance and touch support.

Bolt's live preview makes iteration fast. Use focused follow-up prompts:

Adding Features

Add pagination to the products table. Show 10 items per page with Previous/Next buttons.

Fixing Bugs

The form submission causes a full page reload. It should submit via fetch and update the UI without reloading.

Styling Adjustments

Make the cards larger on desktop (3 columns). Keep 1 column on mobile.

Adding Validation

Add form validation:
- Email: valid email format
- Password: min 8 chars, 1 uppercase, 1 number
Show inline errors below each field

Not Specifying Framework

Bad: "Build a todo app"

Good: "Build a todo app with React and Vite, using Zustand for state management"

Vague UI Descriptions

Bad: "Make it look nice"

Good: "Use a minimal design with a white background, subtle gray borders, and a single accent color (blue-500)"

Missing Error Handling

Bad: "Add a form to submit data"

Good: "Add a form with loading states, error messages for validation failures, and a success toast on submission"

Scope Creep

Bad: Multiple unrelated features in one prompt

Good: Focus on one feature at a time, then iterate