bolt.diy/search/search_index.json

{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Welcome to bolt diy","text":"<p>bolt.diy allows you to choose the LLM that you use for each prompt! Currently, you can use OpenAI, Anthropic, Ollama, OpenRouter, Gemini, LMStudio, Mistral, xAI, HuggingFace, DeepSeek, or Groq models - and it is easily extended to use any other model supported by the Vercel AI SDK! See the instructions below for running this locally and extending it to include more models.</p>"},{"location":"#table-of-contents","title":"Table of Contents","text":"<ul> <li>Join the community!</li> <li>Features</li> <li>Setup</li> <li>Prerequisites</li> <li>Clone the Repository</li> <li>Entering API Keys<ul> <li>1. Set API Keys in the <code>.env.local</code> File</li> <li>2. Configure API Keys Directly in the Application</li> </ul> </li> <li>Run the Application</li> <li>Option 1: Without Docker</li> <li>Option 2: With Docker</li> <li>Update Your Local Version to the Latest</li> <li>Adding New LLMs</li> <li>Available Scripts</li> <li>Development</li> <li>Tips and Tricks</li> </ul>"},{"location":"#join-the-community","title":"Join the community!","text":"<p>Join the community!</p> <p>Also this pinned post in our community has a bunch of incredible resources for running and deploying bolt.diy yourself!</p>"},{"location":"#features","title":"Features","text":"<ul> <li>AI-powered full-stack web development directly in your browser.</li> <li>Support for multiple LLMs with an extensible architecture to integrate additional models.</li> <li>Attach images to prompts for better contextual understanding.</li> <li>Integrated terminal to view output of LLM-run commands.</li> <li>Revert code to earlier versions for easier debugging and quicker changes.</li> <li>Download projects as ZIP for easy portability.</li> <li>Integration-ready Docker support for a hassle-free setup.</li> </ul>"},{"location":"#setup","title":"Setup","text":"<p>If you're new to installing software from GitHub, don't worry! If you encounter any issues, feel free to submit an \"issue\" using the provided links or improve this documentation by forking the repository, editing the instructions, and submitting a pull request. The following instruction will help you get the stable branch up and running on your local machine in no time.  </p>"},{"location":"#prerequisites","title":"Prerequisites","text":"<ol> <li>Install Git: Download Git </li> <li> <p>Install Node.js: Download Node.js </p> </li> <li> <p>After installation, the Node.js path is usually added to your system automatically. To verify:  </p> <ul> <li>Windows: Search for \"Edit the system environment variables,\" click \"Environment Variables,\" and check if <code>Node.js</code> is in the <code>Path</code> variable.  </li> <li>Mac/Linux: Open a terminal and run: <pre><code>echo $PATH  \n</code></pre>    Look for <code>/usr/local/bin</code> in the output.  </li> </ul> </li> </ol>"},{"location":"#clone-the-repository","title":"Clone the Repository","text":"<p>Alternatively, you can download the latest version of the project directly from the Releases Page. Simply download the .zip file, extract it, and proceed with the setup instructions below. If you are comfertiable using git then run the command below.</p> <p>Clone the repository using Git:  </p> <pre><code>git clone -b stable https://github.com/stackblitz-labs/bolt.diy  \n</code></pre>"},{"location":"#entering-api-keys","title":"Entering API Keys","text":"<p>There are two ways to configure your API keys in bolt.diy:</p>"},{"location":"#1-set-api-keys-in-the-envlocal-file","title":"1. Set API Keys in the <code>.env.local</code> File","text":"<p>When setting up the application, you will need to add your API keys for the LLMs you wish to use. You can do this by renaming the <code>.env.example</code> file to <code>.env.local</code> and adding your API keys there. </p> <ul> <li>On Mac, you can find the file at <code>[your name]/bolt.diy/.env.example</code>.</li> <li>On Windows/Linux, the path will be similar.</li> </ul> <p>If you can't see the file, it's likely because hidden files are not being shown. On Mac, open a Terminal window and enter the following command to show hidden files:</p> <pre><code>defaults write com.apple.finder AppleShowAllFiles YES\n</code></pre> <p>Make sure to add your API keys for each provider you want to use, for example:</p> <pre><code>GROQ_API_KEY=XXX\nOPENAI_API_KEY=XXX\nANTHROPIC_API_KEY=XXX\n</code></pre> <p>Once you've set your keys, you can proceed with running the app. You will set these keys up during the initial setup, and you can revisit and update them later after the app is running.</p> <p>Note: Never commit your <code>.env.local</code> file to version control. It\u2019s already included in the <code>.gitignore</code>.</p>"},{"location":"#2-configure-api-keys-directly-in-the-application","title":"2. Configure API Keys Directly in the Application","text":"<p>Alternatively, you can configure your API keys directly in the application once it's running. To do this:</p> <ol> <li>Launch the application and navigate to the provider selection dropdown.</li> <li>Select the provider you wish to configure.</li> <li>Click the pencil icon next to the selected provider.</li> <li>Enter your API key in the provided field.</li> </ol> <p>This method allows you to easily add or update your keys without needing to modify files directly.</p> <p>Once you've configured your keys, the application will be ready to use the selected LLMs.</p>"},{"location":"#run-the-application","title":"Run the Application","text":""},{"location":"#option-1-without-docker","title":"Option 1: Without Docker","text":"<ol> <li> <p>Install Dependencies: <pre><code>pnpm install  \n</code></pre>    If <code>pnpm</code> is not installed, install it using: <pre><code>sudo npm install -g pnpm  \n</code></pre></p> </li> <li> <p>Start the Application: <pre><code>pnpm run dev  \n</code></pre>    This will start the Remix Vite development server. You will need Google Chrome Canary to run this locally if you use Chrome! It's an easy install and a good browser for web development anyway.  </p> </li> </ol>"},{"location":"#option-2-with-docker","title":"Option 2: With Docker","text":""},{"location":"#prerequisites_1","title":"Prerequisites","text":"<ul> <li>Ensure Git, Node.js, and Docker are installed: Download Docker </li> </ul>"},{"location":"#steps","title":"Steps","text":"<ol> <li>Build the Docker Image:  </li> </ol> <p>Use the provided NPM scripts: <pre><code>npm run dockerbuild \n</code></pre></p> <p>Alternatively, use Docker commands directly: <pre><code>docker build . --target bolt-ai-development\n</code></pre></p> <ol> <li> <p>Run the Container:    Use Docker Compose profiles to manage environments: <pre><code>docker compose --profile development up \n</code></pre></p> </li> <li> <p>With the development profile, changes to your code will automatically reflect in the running container (hot reloading).  </p> </li> </ol>"},{"location":"#update-your-local-version-to-the-latest","title":"Update Your Local Version to the Latest","text":"<p>To keep your local version of bolt.diy up to date with the latest changes, follow these steps for your operating system:</p>"},{"location":"#1-navigate-to-your-project-folder","title":"1. Navigate to your project folder","text":"<p>Navigate to the directory where you cloned the repository and open a terminal:</p>"},{"location":"#2-fetch-the-latest-changes","title":"2. Fetch the Latest Changes","text":"<p>Use Git to pull the latest changes from the main repository:</p> <pre><code>git pull origin main\n</code></pre>"},{"location":"#3-update-dependencies","title":"3. Update Dependencies","text":"<p>After pulling the latest changes, update the project dependencies by running the following command:</p> <pre><code>pnpm install\n</code></pre>"},{"location":"#4-rebuild-and-start-the-application","title":"4. Rebuild and Start the Application","text":"<ul> <li> <p>If using Docker, ensure you rebuild the Docker image to avoid using a cached version: <pre><code>docker compose --profile development up --build  \n</code></pre></p> </li> <li> <p>If not using Docker, you can start the application as usual with: <pre><code>pnpm run dev  \n</code></pre></p> </li> </ul> <p>This ensures that you're running the latest version of bolt.diy and can take advantage of all the newest features and bug fixes. </p>"},{"location":"#adding-new-llms","title":"Adding New LLMs:","text":"<p>To make new LLMs available to use in this version of bolt.diy, head on over to <code>app/utils/constants.ts</code> and find the constant MODEL_LIST. Each element in this array is an object that has the model ID for the name (get this from the provider's API documentation), a label for the frontend model dropdown, and the provider. </p> <p>By default, Anthropic, OpenAI, Groq, and Ollama are implemented as providers, but the YouTube video for this repo covers how to extend this to work with more providers if you wish!</p> <p>When you add a new model to the MODEL_LIST array, it will immediately be available to use when you run the app locally or reload it. For Ollama models, make sure you have the model installed already before trying to use it here!</p>"},{"location":"#available-scripts","title":"Available Scripts","text":"<ul> <li><code>pnpm run dev</code>: Starts the development server.</li> <li><code>pnpm run build</code>: Builds the project.</li> <li><code>pnpm run start</code>: Runs the built application locally using Wrangler Pages. This script uses <code>bindings.sh</code> to set up necessary bindings so you don't have to duplicate environment variables.</li> <li><code>pnpm run preview</code>: Builds the project and then starts it locally, useful for testing the production build. Note, HTTP streaming currently doesn't work as expected with <code>wrangler pages dev</code>.</li> <li><code>pnpm test</code>: Runs the test suite using Vitest.</li> <li><code>pnpm run typecheck</code>: Runs TypeScript type checking.</li> <li><code>pnpm run typegen</code>: Generates TypeScript types using Wrangler.</li> <li><code>pnpm run deploy</code>: Builds the project and deploys it to Cloudflare Pages.</li> </ul>"},{"location":"#development","title":"Development","text":"<p>To start the development server:</p> <pre><code>pnpm run dev\n</code></pre> <p>This will start the Remix Vite development server. You will need Google Chrome Canary to run this locally if you use Chrome! It's an easy install and a good browser for web development anyway.</p>"},{"location":"#tips-and-tricks","title":"Tips and Tricks","text":"<p>Here are some tips to get the most out of bolt.diy:</p> <ul> <li> <p>Be specific about your stack: If you want to use specific frameworks or libraries (like Astro, Tailwind, ShadCN, or any other popular JavaScript framework), mention them in your initial prompt to ensure Bolt scaffolds the project accordingly.</p> </li> <li> <p>Use the enhance prompt icon: Before sending your prompt, try clicking the 'enhance' icon to have the AI model help you refine your prompt, then edit the results before submitting.</p> </li> <li> <p>Scaffold the basics first, then add features: Make sure the basic structure of your application is in place before diving into more advanced functionality. This helps Bolt understand the foundation of your project and ensure everything is wired up right before building out more advanced functionality.</p> </li> <li> <p>Batch simple instructions: Save time by combining simple instructions into one message. For example, you can ask Bolt to change the color scheme, add mobile responsiveness, and restart the dev server, all in one go saving you time and reducing API credit consumption significantly.</p> </li> </ul>"},{"location":"CONTRIBUTING/","title":"Contribution Guidelines","text":"<p>Welcome! This guide provides all the details you need to contribute effectively to the project. Thank you for helping us make bolt.diy a better tool for developers worldwide. \ud83d\udca1</p>"},{"location":"CONTRIBUTING/#table-of-contents","title":"\ud83d\udccb Table of Contents","text":"<ol> <li>Code of Conduct </li> <li>How Can I Contribute? </li> <li>Pull Request Guidelines </li> <li>Coding Standards </li> <li>Development Setup </li> <li>Testing </li> <li>Deployment </li> <li>Docker Deployment </li> <li>VS Code Dev Containers Integration </li> </ol>"},{"location":"CONTRIBUTING/#code-of-conduct","title":"\ud83d\udee1\ufe0f Code of Conduct","text":"<p>This project is governed by our Code of Conduct. By participating, you agree to uphold this code. Report unacceptable behavior to the project maintainers.</p>"},{"location":"CONTRIBUTING/#how-can-i-contribute","title":"\ud83d\udee0\ufe0f How Can I Contribute?","text":""},{"location":"CONTRIBUTING/#1-reporting-bugs-or-feature-requests","title":"1\ufe0f\u20e3 Reporting Bugs or Feature Requests","text":"<ul> <li>Check the issue tracker to avoid duplicates.</li> <li>Use issue templates (if available).  </li> <li>Provide detailed, relevant information and steps to reproduce bugs.</li> </ul>"},{"location":"CONTRIBUTING/#2-code-contributions","title":"2\ufe0f\u20e3 Code Contributions","text":"<ol> <li>Fork the repository.  </li> <li>Create a feature or fix branch.  </li> <li>Write and test your code.  </li> <li>Submit a pull request (PR).</li> </ol>"},{"location":"CONTRIBUTING/#3-join-as-a-core-contributor","title":"3\ufe0f\u20e3 Join as a Core Contributor","text":"<p>Interested in maintaining and growing the project? Fill out our Contributor Application Form.</p>"},{"location":"CONTRIBUTING/#pull-request-guidelines","title":"\u2705 Pull Request Guidelines","text":""},{"location":"CONTRIBUTING/#pr-checklist","title":"PR Checklist","text":"<ul> <li>Branch from the main branch.  </li> <li>Update documentation, if needed.  </li> <li>Test all functionality manually.  </li> <li>Focus on one feature/bug per PR.  </li> </ul>"},{"location":"CONTRIBUTING/#review-process","title":"Review Process","text":"<ol> <li>Manual testing by reviewers.  </li> <li>At least one maintainer review required.  </li> <li>Address review comments.  </li> <li>Maintain a clean commit history.</li> </ol>"},{"location":"CONTRIBUTING/#coding-standards","title":"\ud83d\udccf Coding Standards","text":""},{"location":"CONTRIBUTING/#general-guidelines","title":"General Guidelines","text":"<ul> <li>Follow existing code style.  </li> <li>Comment complex logic.  </li> <li>Keep functions small and focused.  </li> <li>Use meaningful variable names.</li> </ul>"},{"location":"CONTRIBUTING/#development-setup","title":"\ud83d\udda5\ufe0f Development Setup","text":""},{"location":"CONTRIBUTING/#1-initial-setup","title":"1\ufe0f\u20e3 Initial Setup","text":"<ul> <li>Clone the repository: <pre><code>git clone https://github.com/stackblitz-labs/bolt.diy.git\n</code></pre></li> <li>Install dependencies: <pre><code>pnpm install\n</code></pre></li> <li>Set up environment variables:  </li> <li>Rename <code>.env.example</code> to <code>.env.local</code>.  </li> <li>Add your API keys:      <pre><code>GROQ_API_KEY=XXX\nHuggingFace_API_KEY=XXX\nOPENAI_API_KEY=XXX\n...\n</code></pre></li> <li>Optionally set:  <ul> <li>Debug level: <code>VITE_LOG_LEVEL=debug</code> </li> <li>Context size: <code>DEFAULT_NUM_CTX=32768</code> </li> </ul> </li> </ul> <p>Note: Never commit your <code>.env.local</code> file to version control. It\u2019s already in <code>.gitignore</code>.</p>"},{"location":"CONTRIBUTING/#2-run-development-server","title":"2\ufe0f\u20e3 Run Development Server","text":"<p><pre><code>pnpm run dev\n</code></pre> Tip: Use Google Chrome Canary for local testing.</p>"},{"location":"CONTRIBUTING/#testing","title":"\ud83e\uddea Testing","text":"<p>Run the test suite with: <pre><code>pnpm test\n</code></pre></p>"},{"location":"CONTRIBUTING/#deployment","title":"\ud83d\ude80 Deployment","text":""},{"location":"CONTRIBUTING/#deploy-to-cloudflare-pages","title":"Deploy to Cloudflare Pages","text":"<p><pre><code>pnpm run deploy\n</code></pre> Ensure you have required permissions and that Wrangler is configured.</p>"},{"location":"CONTRIBUTING/#docker-deployment","title":"\ud83d\udc33 Docker Deployment","text":"<p>This section outlines the methods for deploying the application using Docker. The processes for Development and Production are provided separately for clarity.</p>"},{"location":"CONTRIBUTING/#development-environment","title":"\ud83e\uddd1\u200d\ud83d\udcbb Development Environment","text":""},{"location":"CONTRIBUTING/#build-options","title":"Build Options","text":"<p>Option 1: Helper Scripts <pre><code># Development build\nnpm run dockerbuild\n</code></pre></p> <p>Option 2: Direct Docker Build Command <pre><code>docker build . --target bolt-ai-development\n</code></pre></p> <p>Option 3: Docker Compose Profile <pre><code>docker compose --profile development up\n</code></pre></p>"},{"location":"CONTRIBUTING/#running-the-development-container","title":"Running the Development Container","text":"<pre><code>docker run -p 5173:5173 --env-file .env.local bolt-ai:development\n</code></pre>"},{"location":"CONTRIBUTING/#production-environment","title":"\ud83c\udfed Production Environment","text":""},{"location":"CONTRIBUTING/#build-options_1","title":"Build Options","text":"<p>Option 1: Helper Scripts <pre><code># Production build\nnpm run dockerbuild:prod\n</code></pre></p> <p>Option 2: Direct Docker Build Command <pre><code>docker build . --target bolt-ai-production\n</code></pre></p> <p>Option 3: Docker Compose Profile <pre><code>docker compose --profile production up\n</code></pre></p>"},{"location":"CONTRIBUTING/#running-the-production-container","title":"Running the Production Container","text":"<pre><code>docker run -p 5173:5173 --env-file .env.local bolt-ai:production\n</code></pre>"},{"location":"CONTRIBUTING/#coolify-deployment","title":"Coolify Deployment","text":"<p>For an easy deployment process, use Coolify: 1. Import your Git repository into Coolify. 2. Choose Docker Compose as the build pack. 3. Configure environment variables (e.g., API keys). 4. Set the start command: <pre><code>docker compose --profile production up\n</code></pre></p>"},{"location":"CONTRIBUTING/#vs-code-dev-containers-integration","title":"\ud83d\udee0\ufe0f VS Code Dev Containers Integration","text":"<p>The <code>docker-compose.yaml</code> configuration is compatible with VS Code Dev Containers, making it easy to set up a development environment directly in Visual Studio Code.</p>"},{"location":"CONTRIBUTING/#steps-to-use-dev-containers","title":"Steps to Use Dev Containers","text":"<ol> <li>Open the command palette in VS Code (<code>Ctrl+Shift+P</code> or <code>Cmd+Shift+P</code> on macOS).  </li> <li>Select Dev Containers: Reopen in Container.  </li> <li>Choose the development profile when prompted.  </li> <li>VS Code will rebuild the container and open it with the pre-configured environment.</li> </ol>"},{"location":"CONTRIBUTING/#environment-variables","title":"\ud83d\udd11 Environment Variables","text":"<p>Ensure <code>.env.local</code> is configured correctly with: - API keys. - Context-specific configurations.  </p> <p>Example for the <code>DEFAULT_NUM_CTX</code> variable: <pre><code>DEFAULT_NUM_CTX=24576 # Uses 32GB VRAM\n</code></pre></p>"},{"location":"FAQ/","title":"Frequently Asked Questions (FAQ)","text":""},{"location":"FAQ/#models-and-setup","title":"Models and Setup","text":"What are the best models for bolt.diy? <p>For the best experience with bolt.diy, we recommend using the following models:</p> <ul> <li>Claude 3.5 Sonnet (old): Best overall coder, providing excellent results across all use cases</li> <li>Gemini 2.0 Flash: Exceptional speed while maintaining good performance</li> <li>GPT-4o: Strong alternative to Claude 3.5 Sonnet with comparable capabilities</li> <li>DeepSeekCoder V3: Best open source model (available through OpenRouter, DeepSeek API, or self-hosted)</li> <li>DeepSeekCoder V2 236b: available through OpenRouter, DeepSeek API, or self-hosted</li> <li>Qwen 2.5 Coder 32b: Best model for self-hosting with reasonable hardware requirements</li> </ul> <p>Warning</p> <p>Models with less than 7b parameters typically lack the capability to properly interact with bolt!</p>"},{"location":"FAQ/#best-practices","title":"Best Practices","text":"How do I get the best results with bolt.diy? <ul> <li> <p>Be specific about your stack:   Mention the frameworks or libraries you want to use (e.g., Astro, Tailwind, ShadCN) in your initial prompt. This ensures that bolt.diy scaffolds the project according to your preferences.</p> </li> <li> <p>Use the enhance prompt icon:   Before sending your prompt, click the enhance icon to let the AI refine your prompt. You can edit the suggested improvements before submitting.</p> </li> <li> <p>Scaffold the basics first, then add features:   Ensure the foundational structure of your application is in place before introducing advanced functionality. This helps bolt.diy establish a solid base to build on.</p> </li> <li> <p>Batch simple instructions:   Combine simple tasks into a single prompt to save time and reduce API credit consumption. For example: \"Change the color scheme, add mobile responsiveness, and restart the dev server.\"</p> </li> </ul>"},{"location":"FAQ/#project-information","title":"Project Information","text":"How do I contribute to bolt.diy? <p>Check out our Contribution Guide for more details on how to get involved!</p> What are the future plans for bolt.diy? <p>Visit our Roadmap for the latest updates. New features and improvements are on the way!</p> Why are there so many open issues/pull requests? <p>bolt.diy began as a small showcase project on @ColeMedin's YouTube channel to explore editing open-source projects with local LLMs. However, it quickly grew into a massive community effort!</p> <p>We're forming a team of maintainers to manage demand and streamline issue resolution. The maintainers are rockstars, and we're also exploring partnerships to help the project thrive.</p>"},{"location":"FAQ/#model-comparisons","title":"Model Comparisons","text":"How do local LLMs compare to larger models like Claude 3.5 Sonnet for bolt.diy? <p>While local LLMs are improving rapidly, larger models like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b still offer the best results for complex applications. Our ongoing focus is to improve prompts, agents, and the platform to better support smaller local LLMs.</p>"},{"location":"FAQ/#troubleshooting","title":"Troubleshooting","text":"There was an error processing this request <p>This generic error message means something went wrong. Check both:</p> <ul> <li> <p>The terminal (if you started the app with Docker or <code>pnpm</code>).</p> </li> <li> <p>The developer console in your browser (press <code>F12</code> or right-click &gt; Inspect, then go to the Console tab).</p> </li> </ul> x-api-key header missing <p>This error is sometimes resolved by restarting the Docker container. If that doesn't work, try switching from Docker to <code>pnpm</code> or vice versa. We're actively investigating this issue.</p> Blank preview when running the app <p>A blank preview often occurs due to hallucinated bad code or incorrect commands. To troubleshoot:</p> <ul> <li> <p>Check the developer console for errors.</p> </li> <li> <p>Remember, previews are core functionality, so the app isn't broken! We're working on making these errors more transparent.</p> </li> </ul> Everything works, but the results are bad <p>Local LLMs like Qwen-2.5-Coder are powerful for small applications but still experimental for larger projects. For better results, consider using larger models like </p> <ul> <li>GPT-4o </li> <li>Claude 3.5 Sonnet</li> <li>DeepSeek Coder V2 236b</li> </ul> Received structured exception #0xc0000005: access violation <p>If you are getting this, you are probably on Windows. The fix is generally to update the Visual C++ Redistributable</p> Miniflare or Wrangler errors in Windows <p>You will need to make sure you have the latest version of Visual Studio C++ installed (14.40.33816), more information here Github Issues</p>"},{"location":"FAQ/#get-help-support","title":"Get Help &amp; Support","text":"<p>Community Support</p> <p>Join the bolt.diy Community for discussions and help</p> <p>Report Issues</p> <p>Open an Issue in our GitHub Repository</p>"}]}