bolt.diy

For optimal coding performance and project scaffolding, use models with high reasoning capabilities. Models with fewer than 7b parameters generally lack the ability to interact with bolt.diy correctly.

Recommended Models:

• Claude 3.5 Sonnet (old): Best overall coder for all use cases.
• Gemini 2.0 Flash: High speed with good performance.
• GPT-4o: Strong alternative to Claude 3.5 Sonnet.
• DeepSeekCoder V2 236b: Best open source option (via OpenRouter, DeepSeek API, or self-hosted).
• Qwen 2.5 Coder 32b: Best for self-hosting on reasonable hardware.

bolt.diy uses WebContainer technology to provide a secure, isolated Node.js environment in the browser. This allows for:

• Live Preview: Instant updates as you edit code.
• Terminal: Execute npm/pnpm/yarn commands directly.
• Full Node.js Support: Run build tools, dev servers, and manage files within the sandbox.
• Framework Support: Works with React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, Remix, and more.

Choosing the correct model depends on your requirements for reasoning, speed, or privacy:

Tips:

• Use Claude or GPT-4o for complex logic.
• Use Gemini for rapid prototyping.
• Use local models for privacy-sensitive development.

To get the best results when using bolt.diy, follow these prompting strategies:

• Specify your stack: Explicitly mention frameworks or libraries (e.g., Astro, Tailwind, ShadCN) in your initial prompt to ensure correct scaffolding.
• Use the 'enhance' icon: Click the 'enhance' icon before sending a prompt to let the AI model help refine your instructions.
• Scaffold basics first: Establish the basic structure of your application before requesting advanced features to ensure a solid foundation.
• Batch simple instructions: Combine multiple simple requests (e.g., changing colors, adding responsiveness, and restarting the server) into a single message to save time and reduce API credit consumption.

To set up a local development environment for bolt.diy, clone the repository, install dependencies using pnpm, and configure your environment variables.

1. Clone and Install

git clone https://github.com/stackblitz-labs/bolt.diy.git
cd bolt.diy
pnpm install

2. Configure Environment Variables

1. Rename .env.example to .env.local.
2. Add your required API keys (e.g., GROQ_API_KEY, HuggingFace_API_KEY, OPENAI_API_KEY) to .env.local.
3. For Docker users: You must also have a .env file for variable substitution. You can use the setup script or copy the file manually:
   • Use script: ./scripts/setup-env.sh
   • Manual copy: cp .env.local .env

Warning: Never commit .env.local or .env to version control.

3. Run the Development Server

pnpm run dev

Tip: Use Google Chrome Canary for local testing.

To run bolt.diy locally, you need to clone the repository and configure your environment.

Prerequisites

• Git: Required for cloning and updates.
• Node.js: Required for running the application without Docker.

Installation Steps

1. Clone the repository:

   git clone https://github.com/stackblitz-labs/bolt.diy
   cd bolt.diy

2. Configure API Keys (see Configuring API Keys)
3. Run the application (see Running the Application)

To ensure bolt.diy scaffolds and builds your application correctly, follow these prompting strategies:

• Specify your stack: Explicitly mention frameworks and libraries (e.g., Astro, Tailwind, ShadCN) in your initial prompt.
• Use the enhance prompt icon: Click the enhance icon before submitting to let the AI refine your prompt. You can edit these suggestions before sending.
• Scaffold basics first: Build the foundational structure of your application before requesting advanced features.
• Batch simple instructions: Combine multiple small tasks into one prompt to save time and API credits (e.g., "Change the color scheme, add mobile responsiveness, and restart the dev server.").

For a native desktop experience, you can either download a binary or build it from source.

Download Pre-built Binaries

Download the appropriate file for your OS from the latest releases.

Build from Source

If you want to build the Electron app yourself, ensure you have installed dependencies via pnpm install first.

Build commands:

• All platforms: pnpm electron:build:dist
• macOS: pnpm electron:build:mac
• Windows: pnpm electron:build:win
• Linux: pnpm electron:build:linux

For a fast setup, download the pre-compiled binary for your platform (Windows, macOS, or Linux) from the latest releases page.

macOS Users: If you encounter a "This app is damaged" error when trying to run the application, you must clear the extended attributes by running:

xattr -cr /path/to/Bolt.app

bolt.diy provides over 15 starter templates for various technology stacks. To use them:

1. Start a new project in bolt.diy.
2. Browse the available templates in the starter selection.
3. Choose your preferred technology stack.
4. The AI will scaffold the project following best practices.

Available Templates:

• Frontend: React, Vue, Angular, Svelte, SolidJS
• Full-Stack: Next.js, Astro, Qwik, Remix, Nuxt
• Mobile: Expo, React Native
• Content: Slidev presentations, Astro blogs
• Vanilla: Vite with TypeScript/JavaScript

You can provide LLM API keys using two methods:

Method 1: Using .env.local

1. Rename .env.example to .env.local.
2. Add your provider keys directly to the file:

   GROQ_API_KEY=XXX
   OPENAI_API_KEY=XXX
   ANTHROPIC_API_KEY=XXX

3. For Docker users: You must sync .env.local to .env for Docker Compose to work. Run:

   ./scripts/setup-env.sh

   Or manually: cp .env.local .env.

Method 2: Using the Application UI

1. Open Settings (⚙️ icon) in the sidebar.
2. Go to the Providers tab.
3. Choose between Cloud Providers or Local Providers.
4. Click a provider card, enter the key in the API Key field, and press Enter.
5. A green checkmark indicates successful configuration.

bolt.diy supports one-click deployment to several platforms:

• Vercel: Connect via Settings → Connections → Vercel and click the deploy button.
• Netlify: Connect via Settings → Connections → Netlify and deploy with one click.
• GitHub Pages: Push your project to a GitHub repository and enable GitHub Pages in the repository settings.