bolt.diy

https://stackblitz-labs.github.io/bolt.diy
Admin
bolt.diy is an AI-powered full-stack web development platform that enables users to choose from...
Tokens:7,879
Snippets:135
Trust Score:8.3
Update:5 months ago
Show doc for...
Tokens:
Raw
### Environment Variables Setup

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Configure environment variables by copying the example file and adding API keys.

```bash
GROQ_API_KEY=XXX
HuggingFace_API_KEY=XXX
OPENAI_API_KEY=XXX
...

```

--------------------------------

### Start Development Server

Source: https://stackblitz-labs.github.io/bolt.diy

Starts the development server with hot reloading. Ensure you have Google Chrome Canary installed if you are using Chrome for development.

```bash
pnpm run dev
```

--------------------------------

### Run Development Server

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Start the development server using pnpm.

```bash
pnpm run dev

```

--------------------------------

### Coolify Deployment Start Command

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Configure the start command for deployment using Coolify with Docker Compose.

```bash
docker compose --profile production up

```

--------------------------------

### Docker Environment Setup

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Set up environment variables for Docker deployments using a setup script or manual copy.

```bash
# Option 1: Use the setup script
./scripts/setup-env.sh

# Option 2: Manual copy
cp .env.local .env

```

--------------------------------

### Using Bolt.DIY Project Templates

Source: https://stackblitz-labs.github.io/bolt.diy/FAQ

Instructions on how to start a new project using Bolt.DIY's starter templates for various frameworks and technologies.

```markdown
**Getting Started:**
1. Start a new project in bolt.diy
2. Browse available templates in the starter selection
3. Choose your preferred technology stack
4. The AI will scaffold your project with 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

Templates include pre-configured tooling, linting, and build processes.
```

--------------------------------

### Install Dependencies

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Install project dependencies using pnpm.

```bash
pnpm install

```

--------------------------------

### Test Production Build Locally

Source: https://stackblitz-labs.github.io/bolt.diy

Builds and starts the application locally for production testing.

```bash
pnpm run preview
```

--------------------------------

### Run with Docker Compose (Development)

Source: https://stackblitz-labs.github.io/bolt.diy

Starts the application and its services using Docker Compose in development mode.

```bash
docker compose --profile development up
```

--------------------------------

### Install Dependencies with pnpm

Source: https://stackblitz-labs.github.io/bolt.diy

Install project dependencies using the pnpm package manager. If pnpm is not installed, it can be installed globally via npm.

```bash
pnpm install

```

```bash
sudo npm install -g pnpm

```

--------------------------------

### Setup Husky for Git Hooks

Source: https://stackblitz-labs.github.io/bolt.diy

Initializes Husky, a tool for managing Git hooks, to automate tasks during the Git workflow.

```bash
pnpm run prepare
```

--------------------------------

### Run Docker Container with Development Profile

Source: https://stackblitz-labs.github.io/bolt.diy

Start the Docker container using the development profile. This enables hot reloading for code changes.

```bash
docker compose --profile development up

```

--------------------------------

### Set up xAI Grok Provider

Source: https://stackblitz-labs.github.io/bolt.diy/FAQ

Integrate xAI Grok models by obtaining an API key from the xAI Platform and adding it to your `.env.local` file.

```text
**Setup:**
1. Get your API key from [xAI Platform](https://docs.x.ai/docs/quickstart#creating-an-api-key)
2. Add `XAI_API_KEY=your_key_here` to your `.env.local` file
3. Models will be available in the provider selection
```

--------------------------------

### Build Project for Production

Source: https://stackblitz-labs.github.io/bolt.diy

Builds the project for production deployment.

```bash
pnpm run build
```

--------------------------------

### Run Test Suite

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Execute the project's test suite.

```bash
pnpm test

```

--------------------------------

### Deploy to Cloudflare Pages

Source: https://stackblitz-labs.github.io/bolt.diy

Builds the project and deploys it to Cloudflare Pages.

```bash
pnpm run deploy
```

--------------------------------

### Build Docker Image for Development

Source: https://stackblitz-labs.github.io/bolt.diy

Builds a Docker image suitable for development environments.

```bash
pnpm run dockerbuild
```

--------------------------------

### Configure API Keys with Environment Variables

Source: https://stackblitz-labs.github.io/bolt.diy/FAQ

Use environment variables for secure API key management, especially in production. Add these to a `.env.local` file in your project root.

```bash
ANTHROPIC_API_KEY=your_anthropic_key_here
OPENAI_API_KEY=your_openai_key_here
GOOGLE_GENERATIVE_AI_API_KEY=your_google_key_here
MOONSHOT_API_KEY=your_moonshot_key_here
XAI_API_KEY=your_xai_key_here
```

--------------------------------

### Build Electron App for All Platforms

Source: https://stackblitz-labs.github.io/bolt.diy

Builds the Electron application for all supported platforms (macOS, Windows, Linux).

```bash
pnpm electron:build:dist
```

--------------------------------

### Docker Production Build Options

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Build the Docker image for the production environment using helper scripts, direct Docker command, or Docker Compose profiles.

```bash
# Production build
npm run dockerbuild:prod

```

```bash
docker build . --target bolt-ai-production

```

```bash
docker compose --profile production up

```

--------------------------------

### Connecting External Databases with Supabase in Bolt.DIY

Source: https://stackblitz-labs.github.io/bolt.diy/FAQ

Steps to set up and configure Supabase for backend database functionality within a Bolt.DIY project.

```markdown
**Setup Process:**
1. Create a Supabase project at supabase.com
2. Get your project URL and API keys
3. Configure the connection in your bolt.diy project
4. Use Supabase tools to interact with your database

**Available Features:**
- Real-time subscriptions
- Built-in authentication
- Row Level Security (RLS)
- Automatic API generation
- Database migrations
```

--------------------------------

### Build Docker Image for Production

Source: https://stackblitz-labs.github.io/bolt.diy

Builds a Docker image optimized for production deployment.

```bash
pnpm run dockerbuild:prod
```

--------------------------------

### Docker Development Build Options

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Build the Docker image for the development environment using helper scripts, direct Docker command, or Docker Compose profiles.

```bash
# Development build
npm run dockerbuild

```

```bash
docker build . --target bolt-ai-development

```

```bash
docker compose --profile development up

```

--------------------------------

### LLM Model Comparison for Bolt.DIY

Source: https://stackblitz-labs.github.io/bolt.diy/FAQ

A comparison of various Large Language Models (LLMs), categorizing them by recommended use cases for production, speed, advanced reasoning, and open-source/self-hosting options.

```markdown
**Recommended for Production:**
- **Claude 4 Opus**: Latest flagship model with enhanced reasoning (200K context)
- **Claude 3.5 Sonnet**: Proven excellent performance across all tasks
- **GPT-4o**: Strong general-purpose coding with great reliability
- **xAI Grok 4**: Latest Grok with 256K context window

**Fast & Efficient:**
- **Gemini 2.0 Flash**: Exceptional speed for rapid development
- **Claude 3 Haiku**: Cost-effective for simpler tasks
- **xAI Grok 3 Mini Fast**: Optimized for speed and efficiency

**Advanced Reasoning:**
- **Moonshot AI Kimi K2**: Advanced reasoning with 128K context
- **Moonshot AI Kimi Thinking**: Specialized for complex reasoning tasks

**Open Source & Self-Hosting:**
- **DeepSeekCoder V3**: Best open-source model available
- **DeepSeekCoder V2 236b**: Powerful self-hosted option
- **Qwen 2.5 Coder 32b**: Good balance of performance and resource usage

**Local Models (Ollama):**
- Best for privacy and offline development
- Use 7B+ parameter models for reasonable performance
- Still experimental for complex, large-scale applications

!!! tip "Model Selection Guide"
    - Use Claude/GPT-4o for complex applications
    - Use Gemini for fast prototyping
    - Use local models for privacy/offline development
    - Always test with your specific use case
```

--------------------------------

### Create Unpacked Electron Build

Source: https://stackblitz-labs.github.io/bolt.diy

Creates an unpacked build of the Electron application, useful for testing.

```bash
pnpm electron:build:unpack
```

--------------------------------

### Set up Moonshot AI (Kimi) Provider

Source: https://stackblitz-labs.github.io/bolt.diy/FAQ

Configure the Moonshot AI provider by obtaining an API key and adding it to your `.env.local` file or through the in-app settings.

```text
**Setup Steps:**
1. Visit [Moonshot AI Platform](https://platform.moonshot.ai/console/api-keys)
2. Create an account and generate an API key
3. Add `MOONSHOT_API_KEY=your_key_here` to your `.env.local` file
4. Or configure it directly in Settings → Providers → Cloud Providers → Moonshot
```

--------------------------------

### Build Electron App for Windows

Source: https://stackblitz-labs.github.io/bolt.diy

Builds the Electron application specifically for Windows.

```bash
pnpm electron:build:win
```

--------------------------------

### Bolt.DIY New Features Overview

Source: https://stackblitz-labs.github.io/bolt.diy/FAQ

This section outlines the recent major additions to Bolt.DIY, including advanced AI capabilities, development tools, version control, backend integration, and deployment options.

```markdown
**Advanced AI Capabilities:**
- **19 LLM Providers**: Support for Anthropic, OpenAI, Google, DeepSeek, Cohere, and more
- **MCP Integration**: Model Context Protocol for enhanced AI tool calling
- **Dynamic Model Loading**: Automatic model discovery from provider APIs

**Development Tools:**
- **WebContainer**: Secure sandboxed development environment
- **Live Preview**: Real-time application previews without leaving the editor
- **Project Templates**: 15+ starter templates for popular frameworks

**Version Control & Collaboration:**
- **Git Integration**: Import/export projects with GitHub
- **Automatic Commits**: Smart version control for project changes
- **Diff Visualization**: See code changes clearly

**Backend & Database:**
- **Supabase Integration**: Built-in database and authentication
- **API Integration**: Connect to external services and databases

**Deployment & Production:**
- **One-Click Deployment**: Vercel, Netlify, and GitHub Pages support
- **Environment Management**: Production-ready configuration
- **Build Optimization**: Automatic configuration for popular frameworks
```

--------------------------------

### Run Test Suite

Source: https://stackblitz-labs.github.io/bolt.diy

Runs the test suite using Vitest.

```bash
pnpm test
```

--------------------------------

### Configure API Keys in .env.local

Source: https://stackblitz-labs.github.io/bolt.diy

Add your API keys for LLM providers to the .env.local file. Ensure this file is not committed to version control.

```dotenv
GROQ_API_KEY=XXX
OPENAI_API_KEY=XXX
ANTHROPIC_API_KEY=XXX

```

--------------------------------

### Alternative Docker Build Command

Source: https://stackblitz-labs.github.io/bolt.diy

An alternative command to build Docker images using npm.

```bash
npm run dockerbuild
```

--------------------------------

### Build Electron App for Linux

Source: https://stackblitz-labs.github.io/bolt.diy

Builds the Electron application specifically for Linux.

```bash
pnpm electron:build:linux
```

--------------------------------

### Clone Repository

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Clone the bolt.diy repository to your local machine.

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

```

--------------------------------

### Deploy to Cloudflare Pages

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Deploy the project to Cloudflare Pages using the provided script. Ensure Wrangler is configured.

```bash
pnpm run deploy

```

--------------------------------

### Run Built Application Locally

Source: https://stackblitz-labs.github.io/bolt.diy

Runs the built application locally using Wrangler Pages.

```bash
pnpm run start
```

--------------------------------

### Rebuild and Run Docker Application

Source: https://stackblitz-labs.github.io/bolt.diy

When using Docker, rebuild the image and restart the application to ensure the latest changes are incorporated.

```bash
docker compose --profile development up --build

```

--------------------------------

### Build Electron App for macOS

Source: https://stackblitz-labs.github.io/bolt.diy

Builds the Electron application specifically for macOS.

```bash
pnpm electron:build:mac
```

--------------------------------

### Run Development Docker Container

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Run the development Docker container, mapping port 5173 and using local environment variables.

```bash
docker run -p 5173:5173 --env-file .env.local bolt-ai:development

```

--------------------------------

### Run ESLint with Auto-fix

Source: https://stackblitz-labs.github.io/bolt.diy

Runs ESLint to check code quality and automatically fix linting issues.

```bash
pnpm run lint
```

--------------------------------

### Create a New LLM Provider Class

Source: https://stackblitz-labs.github.io/bolt.diy

Implement a new LLM provider by extending BaseProvider. Define static models, API key configuration, and methods for dynamic model loading and model instance creation. This class should be placed in `app/lib/modules/llm/providers/your-provider.ts`.

```typescript
import { BaseProvider } from '~/lib/modules/llm/base-provider';
import type { ModelInfo } from '~/lib/modules/llm/types';
import type { LanguageModelV1 } from 'ai';
import type { IProviderSetting } from '~/types/model';
import { createYourProvider } from '@ai-sdk/your-provider';

export default class YourProvider extends BaseProvider {
  name = 'YourProvider';
  getApiKeyLink = 'https://your-provider.com/api-keys';

  config = {
    apiTokenKey: 'YOUR_PROVIDER_API_KEY',
  };

  staticModels: ModelInfo[] = [
    {
      name: 'your-model-name',
      label: 'Your Model Label',
      provider: 'YourProvider',
      maxTokenAllowed: 100000,
      maxCompletionTokens: 4000,
    },
  ];

  async getDynamicModels(
    apiKeys?: Record<string, string>,
    settings?: IProviderSetting,
    serverEnv?: Record<string, string>,
  ): Promise<ModelInfo[]> {
    // Implement dynamic model loading if supported
    return [];
  }

  getModelInstance(options: {
    model: string;
    serverEnv: Record<string, string>;
    apiKeys?: Record<string, string>;
    providerSettings?: Record<string, IProviderSetting>;
  }): LanguageModelV1 {
    const { apiKeys, model } = options;
    const apiKey = apiKeys?.[this.config.apiTokenKey] || '';

    return createYourProvider({
      apiKey,
      // other configuration options
    })(model);
  }
}

```

--------------------------------

### Clone Bolt DIY Repository

Source: https://stackblitz-labs.github.io/bolt.diy

Clone the Bolt DIY project repository from GitHub and navigate into the project directory using Git.

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

--------------------------------

### Add a New LLM Provider

Source: https://stackblitz-labs.github.io/bolt.diy/FAQ

Extend Bolt DIY by creating a provider class, implementing the BaseProvider interface, and registering it in the LLM registry.

```typescript
1. **Create a Provider Class** in `app/lib/modules/llm/providers/your-provider.ts`
2. **Implement the BaseProvider interface** with your provider's specific logic
3. **Register the provider** in `app/lib/modules/llm/registry.ts`
4. **The system automatically detects** and registers your new provider

See the [Adding New LLMs](../#adding-new-llms) section for complete implementation details.
```

--------------------------------

### Register a New LLM Provider

Source: https://stackblitz-labs.github.io/bolt.diy

Register your newly created provider by importing it into the `app/lib/modules/llm/registry.ts` file and exporting it. This makes the provider available for use within the LLMManager.

```typescript
import YourProvider from './providers/your-provider';

// ... existing imports ...

export {
  // ... existing exports ...
  YourProvider,
};

```

--------------------------------

### Build Docker Image for Development

Source: https://stackblitz-labs.github.io/bolt.diy

Build the Docker image for the Bolt AI development environment. This can be done using NPM scripts or direct Docker commands.

```bash
npm run dockerbuild

```

```bash
docker build . --target bolt-ai-development

```

--------------------------------

### Configure Default Context Size

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Set the DEFAULT_NUM_CTX environment variable in your .env.local file. This value determines the context window size and is related to VRAM usage.

```env
DEFAULT_NUM_CTX=24576 # Uses 32GB VRAM
```

--------------------------------

### Verify Node.js Path on Mac/Linux

Source: https://stackblitz-labs.github.io/bolt.diy

Check if Node.js is correctly added to your system's PATH environment variable on Mac or Linux by running this command in the terminal.

```bash
echo $PATH
```

--------------------------------

### Run Production Docker Container

Source: https://stackblitz-labs.github.io/bolt.diy/CONTRIBUTING

Run the production Docker container, mapping port 5173 and using local environment variables.

```bash
docker run -p 5173:5173 --env-file .env.local bolt-ai:production

```

--------------------------------

### Bolt.DIY WebContainer Features

Source: https://stackblitz-labs.github.io/bolt.diy/FAQ

Overview of the features provided by WebContainer for a secure development environment, including isolated execution and full Node.js support.

```markdown
**Features:**
- **Isolated Environment**: Secure sandbox for running code
- **Full Node.js Support**: Run npm, build tools, and dev servers
- **Live File System**: Direct manipulation of project files
- **Terminal Integration**: Execute commands with real-time output

**Supported Technologies:**
- All major JavaScript frameworks (React, Vue, Angular, etc.)
- Build tools (Vite, Webpack, Parcel)
- Package managers (npm, pnpm, yarn)
```

--------------------------------

### Run Docker Container

Source: https://stackblitz-labs.github.io/bolt.diy

Runs the application within a Docker container.

```bash
pnpm run dockerrun
```

--------------------------------

### Show Hidden Files on Mac

Source: https://stackblitz-labs.github.io/bolt.diy

Use this command in the Terminal to display hidden files on macOS, which is necessary to view the .env.example file.

```bash
defaults write com.apple.finder AppleShowAllFiles YES

```

--------------------------------

### Run Tests in Watch Mode

Source: https://stackblitz-labs.github.io/bolt.diy

Runs tests in watch mode, automatically re-running tests when changes are detected.

```bash
pnpm run test:watch
```

--------------------------------

### Add New Models to an Existing Provider

Source: https://stackblitz-labs.github.io/bolt.diy

Extend the `staticModels` array within an existing provider file (e.g., `app/lib/modules/llm/providers/openai.ts`) to include new models with their respective configurations.

```typescript
staticModels: ModelInfo[] = [
  // ... existing models ...
  {
    name: 'gpt-4o-mini-new',
    label: 'GPT-4o Mini (New)',
    provider: 'OpenAI',
    maxTokenAllowed: 128000,
    maxCompletionTokens: 16000,
  },
];

```

--------------------------------

### Fetch Latest Git Changes

Source: https://stackblitz-labs.github.io/bolt.diy

Pull the latest changes from the main branch of the repository to update your local version.

```bash
git pull origin main

```

--------------------------------

### Generate TypeScript Types with Wrangler

Source: https://stackblitz-labs.github.io/bolt.diy

Generates TypeScript types using Wrangler.

```bash
pnpm run typegen
```

--------------------------------

### Clean Build Artifacts

Source: https://stackblitz-labs.github.io/bolt.diy

Removes generated build artifacts to ensure a clean build environment.

```bash
pnpm run clean
```

--------------------------------

### Generate TypeScript Types

Source: https://stackblitz-labs.github.io/bolt.diy

Runs TypeScript type checking to ensure type safety.

```bash
pnpm run typecheck
```
Tokens:
Raw