iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Major UI improvements

Browse Source
This commit is contained in:
Stijnus
2025-01-28 01:33:19 +01:00
parent afb1e44187
commit 6e52114172
45 changed files with 4289 additions and 3319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
docs/docs/CONTRIBUTING.md
View File

@@ -6,15 +6,15 @@ Welcome! This guide provides all the details you need to contribute effectively
## 📋 Table of Contents
1. [Code of Conduct](#code-of-conduct)
2. [How Can I Contribute?](#how-can-i-contribute)
3. [Pull Request Guidelines](#pull-request-guidelines)
4. [Coding Standards](#coding-standards)
5. [Development Setup](#development-setup)
6. [Testing](#testing)
7. [Deployment](#deployment)
8. [Docker Deployment](#docker-deployment)
9. [VS Code Dev Containers Integration](#vs-code-dev-containers-integration)
1. [Code of Conduct](#code-of-conduct)
2. [How Can I Contribute?](#how-can-i-contribute)
3. [Pull Request Guidelines](#pull-request-guidelines)
4. [Coding Standards](#coding-standards)
5. [Development Setup](#development-setup)
6. [Testing](#testing)
7. [Deployment](#deployment)
8. [Docker Deployment](#docker-deployment)
9. [VS Code Dev Containers Integration](#vs-code-dev-containers-integration)
---
@@ -27,60 +27,67 @@ This project is governed by our **Code of Conduct**. By participating, you agree
## 🛠️ How Can I Contribute?
### 1️⃣ Reporting Bugs or Feature Requests
- Check the [issue tracker](#) to avoid duplicates.
- Use issue templates (if available).
- Use issue templates (if available).
- Provide detailed, relevant information and steps to reproduce bugs.
### 2️⃣ Code Contributions
1. Fork the repository.
2. Create a feature or fix branch.
3. Write and test your code.
1. Fork the repository.
2. Create a feature or fix branch.
3. Write and test your code.
4. Submit a pull request (PR).
### 3️⃣ Join as a Core Contributor
### 3️⃣ Join as a Core Contributor
Interested in maintaining and growing the project? Fill out our [Contributor Application Form](https://forms.gle/TBSteXSDCtBDwr5m7).
---
## ✅ Pull Request Guidelines
### PR Checklist
- Branch from the **main** branch.
- Update documentation, if needed.
- Test all functionality manually.
- Focus on one feature/bug per PR.
### PR Checklist
### Review Process
1. Manual testing by reviewers.
2. At least one maintainer review required.
3. Address review comments.
- Branch from the **main** branch.
- Update documentation, if needed.
- Test all functionality manually.
- Focus on one feature/bug per PR.
### Review Process
1. Manual testing by reviewers.
2. At least one maintainer review required.
3. Address review comments.
4. Maintain a clean commit history.
---
## 📏 Coding Standards
### General Guidelines
- Follow existing code style.
- Comment complex logic.
- Keep functions small and focused.
### General Guidelines
- Follow existing code style.
- Comment complex logic.
- Keep functions small and focused.
- Use meaningful variable names.
---
## 🖥️ Development Setup
### 1️⃣ Initial Setup
- Clone the repository:
### 1️⃣ Initial Setup
- Clone the repository:
```bash
git clone https://github.com/stackblitz-labs/bolt.diy.git
```
- Install dependencies:
- Install dependencies:
```bash
pnpm install
```
- Set up environment variables:
1. Rename `.env.example` to `.env.local`.
- Set up environment variables:
1. Rename `.env.example` to `.env.local`.
2. Add your API keys:
```bash
GROQ_API_KEY=XXX
@@ -88,23 +95,26 @@ Interested in maintaining and growing the project? Fill out our [Contributor App
OPENAI_API_KEY=XXX
...
```
3. Optionally set:
- Debug level: `VITE_LOG_LEVEL=debug`
- Context size: `DEFAULT_NUM_CTX=32768`
3. Optionally set:
- Debug level: `VITE_LOG_LEVEL=debug`
- Context size: `DEFAULT_NUM_CTX=32768`
**Note**: Never commit your `.env.local` file to version control. It’s already in `.gitignore`.
### 2️⃣ Run Development Server
### 2️⃣ Run Development Server
```bash
pnpm run dev
```
**Tip**: Use **Google Chrome Canary** for local testing.
---
## 🧪 Testing
Run the test suite with:
Run the test suite with:
```bash
pnpm test
```
@@ -113,10 +123,12 @@ pnpm test
## 🚀 Deployment
### Deploy to Cloudflare Pages
### Deploy to Cloudflare Pages
```bash
pnpm run deploy
```
Ensure you have required permissions and that Wrangler is configured.
---
@@ -127,67 +139,76 @@ This section outlines the methods for deploying the application using Docker. Th
---
### 🧑‍💻 Development Environment
### 🧑‍💻 Development Environment
#### Build Options
#### Build Options
**Option 1: Helper Scripts**
**Option 1: Helper Scripts**
```bash
# Development build
npm run dockerbuild
```
**Option 2: Direct Docker Build Command**
**Option 2: Direct Docker Build Command**
```bash
docker build . --target bolt-ai-development
```
**Option 3: Docker Compose Profile**
**Option 3: Docker Compose Profile**
```bash
docker compose --profile development up
```
#### Running the Development Container
#### Running the Development Container
```bash
docker run -p 5173:5173 --env-file .env.local bolt-ai:development
```
---
### 🏭 Production Environment
### 🏭 Production Environment
#### Build Options
#### Build Options
**Option 1: Helper Scripts**
**Option 1: Helper Scripts**
```bash
# Production build
npm run dockerbuild:prod
```
**Option 2: Direct Docker Build Command**
**Option 2: Direct Docker Build Command**
```bash
docker build . --target bolt-ai-production
```
**Option 3: Docker Compose Profile**
**Option 3: Docker Compose Profile**
```bash
docker compose --profile production up
```
#### Running the Production Container
#### Running the Production Container
```bash
docker run -p 5173:5173 --env-file .env.local bolt-ai:production
```
---
### Coolify Deployment
### Coolify Deployment
For an easy deployment process, use [Coolify](https://github.com/coollabsio/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:
For an easy deployment process, use [Coolify](https://github.com/coollabsio/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:
```bash
docker compose --profile production up
```
@@ -200,20 +221,22 @@ The `docker-compose.yaml` configuration is compatible with **VS Code Dev Contain
### Steps to Use Dev Containers
1. Open the command palette in VS Code (`Ctrl+Shift+P` or `Cmd+Shift+P` on macOS).
2. Select **Dev Containers: Reopen in Container**.
3. Choose the **development** profile when prompted.
1. Open the command palette in VS Code (`Ctrl+Shift+P` or `Cmd+Shift+P` on macOS).
2. Select **Dev Containers: Reopen in Container**.
3. Choose the **development** profile when prompted.
4. VS Code will rebuild the container and open it with the pre-configured environment.
---
## 🔑 Environment Variables
Ensure `.env.local` is configured correctly with:
- API keys.
- Context-specific configurations.
Ensure `.env.local` is configured correctly with:
- API keys.
- Context-specific configurations.
Example for the `DEFAULT_NUM_CTX` variable:
Example for the `DEFAULT_NUM_CTX` variable:
```bash
DEFAULT_NUM_CTX=24576 # Uses 32GB VRAM
```
```

47
docs/docs/FAQ.md
View File

@@ -3,7 +3,7 @@
## Models and Setup
??? question "What are the best models for bolt.diy?"
For the best experience with bolt.diy, we recommend using the following models:
For the best experience with bolt.diy, we recommend using the following models:
- **Claude 3.5 Sonnet (old)**: Best overall coder, providing excellent results across all use cases
- **Gemini 2.0 Flash**: Exceptional speed while maintaining good performance
@@ -17,79 +17,78 @@
## Best Practices
??? question "How do I get the best results with bolt.diy?"
- **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.
??? question "How do I get the best results with bolt.diy?" - **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.
- **Use the enhance prompt icon**:
- **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.
- **Scaffold the basics first, then add features**:
- **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.
- **Batch simple instructions**:
Combine simple tasks into a single prompt to save time and reduce API credit consumption. For example:
- **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."*
## Project Information
??? question "How do I contribute to bolt.diy?"
Check out our [Contribution Guide](CONTRIBUTING.md) for more details on how to get involved!
Check out our [Contribution Guide](CONTRIBUTING.md) for more details on how to get involved!
??? question "What are the future plans for bolt.diy?"
Visit our [Roadmap](https://roadmap.sh/r/ottodev-roadmap-2ovzo) for the latest updates.
New features and improvements are on the way!
Visit our [Roadmap](https://roadmap.sh/r/ottodev-roadmap-2ovzo) for the latest updates.
New features and improvements are on the way!
??? question "Why are there so many open issues/pull requests?"
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!
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!
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.
## Model Comparisons
??? question "How do local LLMs compare to larger models like Claude 3.5 Sonnet for bolt.diy?"
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.
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.
## Troubleshooting
??? error "There was an error processing this request"
This generic error message means something went wrong. Check both:
This generic error message means something went wrong. Check both:
- The terminal (if you started the app with Docker or `pnpm`).
- The developer console in your browser (press `F12` or right-click > *Inspect*, then go to the *Console* tab).
??? error "x-api-key header missing"
This error is sometimes resolved by restarting the Docker container.
If that doesn't work, try switching from Docker to `pnpm` or vice versa. We're actively investigating this issue.
This error is sometimes resolved by restarting the Docker container.
If that doesn't work, try switching from Docker to `pnpm` or vice versa. We're actively investigating this issue.
??? error "Blank preview when running the app"
A blank preview often occurs due to hallucinated bad code or incorrect commands.
To troubleshoot:
A blank preview often occurs due to hallucinated bad code or incorrect commands.
To troubleshoot:
- Check the developer console for errors.
- Remember, previews are core functionality, so the app isn't broken! We're working on making these errors more transparent.
??? error "Everything works, but the results are bad"
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
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
- GPT-4o
- GPT-4o
- Claude 3.5 Sonnet
- DeepSeek Coder V2 236b
??? error "Received structured exception #0xc0000005: access violation"
If you are getting this, you are probably on Windows. The fix is generally to update the [Visual C++ Redistributable](https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170)
If you are getting this, you are probably on Windows. The fix is generally to update the [Visual C++ Redistributable](https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170)
??? error "Miniflare or Wrangler errors in Windows"
You will need to make sure you have the latest version of Visual Studio C++ installed (14.40.33816), more information here <a href="https://github.com/stackblitz-labs/bolt.diy/issues/19">Github Issues</a>
You will need to make sure you have the latest version of Visual Studio C++ installed (14.40.33816), more information here <a href="https://github.com/stackblitz-labs/bolt.diy/issues/19">Github Issues</a>
---
## Get Help & Support
!!! tip "Community Support"
[Join the bolt.diy Community](https://thinktank.ottomator.ai/c/bolt-diy/17){target=_blank} for discussions and help
[Join the bolt.diy Community](https://thinktank.ottomator.ai/c/bolt-diy/17){target=\_blank} for discussions and help
!!! bug "Report Issues"
[Open an Issue](https://github.com/stackblitz-labs/bolt.diy/issues/19){target=_blank} in our GitHub Repository
[Open an Issue](https://github.com/stackblitz-labs/bolt.diy/issues/19){target=\_blank} in our GitHub Repository

152
docs/docs/index.md
View File

@@ -1,7 +1,9 @@
# Welcome to bolt diy
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.
## Table of Contents
- [Join the community!](#join-the-community)
- [Features](#features)
- [Setup](#setup)
@@ -41,31 +43,31 @@ Also [this pinned post in our community](https://thinktank.ottomator.ai/t/videos
---
## Setup
## Setup
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.
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.
### Prerequisites
### Prerequisites
1. **Install Git**: [Download Git](https://git-scm.com/downloads)
2. **Install Node.js**: [Download Node.js](https://nodejs.org/en/download/)
1. **Install Git**: [Download Git](https://git-scm.com/downloads)
2. **Install Node.js**: [Download Node.js](https://nodejs.org/en/download/)
- After installation, the Node.js path is usually added to your system automatically. To verify:
- **Windows**: Search for "Edit the system environment variables," click "Environment Variables," and check if `Node.js` is in the `Path` variable.
- **Mac/Linux**: Open a terminal and run:
```bash
echo $PATH
```
Look for `/usr/local/bin` in the output.
- After installation, the Node.js path is usually added to your system automatically. To verify:
- **Windows**: Search for "Edit the system environment variables," click "Environment Variables," and check if `Node.js` is in the `Path` variable.
- **Mac/Linux**: Open a terminal and run:
```bash
echo $PATH
```
Look for `/usr/local/bin` in the output.
### Clone the Repository
Alternatively, you can download the latest version of the project directly from the [Releases Page](https://github.com/stackblitz-labs/bolt.diy/releases/latest). 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.
Clone the repository using Git:
Clone the repository using Git:
```bash
git clone -b stable https://github.com/stackblitz-labs/bolt.diy
```bash
git clone -b stable https://github.com/stackblitz-labs/bolt.diy
```
---
@@ -76,7 +78,7 @@ There are two ways to configure your API keys in bolt.diy:
#### 1. Set API Keys in the `.env.local` File
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 `.env.example` file to `.env.local` and adding your API keys there.
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 `.env.example` file to `.env.local` and adding your API keys there.
- On **Mac**, you can find the file at `[your name]/bolt.diy/.env.example`.
- On **Windows/Linux**, the path will be similar.
@@ -112,54 +114,60 @@ This method allows you to easily add or update your keys without needing to modi
Once you've configured your keys, the application will be ready to use the selected LLMs.
---
## Run the Application
## Run the Application
### Option 1: Without Docker
1. **Install Dependencies**:
```bash
pnpm install
```
If `pnpm` is not installed, install it using:
```bash
sudo npm install -g pnpm
```
1. **Install Dependencies**:
2. **Start the Application**:
```bash
pnpm run dev
```bash
pnpm install
```
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.
### Option 2: With Docker
If `pnpm` is not installed, install it using:
#### Prerequisites
- Ensure Git, Node.js, and Docker are installed: [Download Docker](https://www.docker.com/)
```bash
sudo npm install -g pnpm
```
#### Steps
2. **Start the Application**:
```bash
pnpm run dev
```
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.
1. **Build the Docker Image**:
### Option 2: With Docker
Use the provided NPM scripts:
```bash
npm run dockerbuild
```
#### Prerequisites
Alternatively, use Docker commands directly:
```bash
- Ensure Git, Node.js, and Docker are installed: [Download Docker](https://www.docker.com/)
#### Steps
1. **Build the Docker Image**:
Use the provided NPM scripts:
```bash
npm run dockerbuild
```
Alternatively, use Docker commands directly:
```bash
docker build . --target bolt-ai-development
```
```
2. **Run the Container**:
Use Docker Compose profiles to manage environments:
```bash
docker compose --profile development up
```
Use Docker Compose profiles to manage environments:
- With the development profile, changes to your code will automatically reflect in the running container (hot reloading).
```bash
docker compose --profile development up
```
- With the development profile, changes to your code will automatically reflect in the running container (hot reloading).
---
@@ -167,42 +175,46 @@ Once you've configured your keys, the application will be ready to use the selec
To keep your local version of bolt.diy up to date with the latest changes, follow these steps for your operating system:
#### 1. **Navigate to your project folder**
Navigate to the directory where you cloned the repository and open a terminal:
#### 1. **Navigate to your project folder**
#### 2. **Fetch the Latest Changes**
Use Git to pull the latest changes from the main repository:
Navigate to the directory where you cloned the repository and open a terminal:
```bash
git pull origin main
```
#### 2. **Fetch the Latest Changes**
#### 3. **Update Dependencies**
After pulling the latest changes, update the project dependencies by running the following command:
Use Git to pull the latest changes from the main repository:
```bash
pnpm install
```
```bash
git pull origin main
```
#### 4. **Rebuild and Start the Application**
#### 3. **Update Dependencies**
- **If using Docker**, ensure you rebuild the Docker image to avoid using a cached version:
```bash
docker compose --profile development up --build
```
After pulling the latest changes, update the project dependencies by running the following command:
- **If not using Docker**, you can start the application as usual with:
```bash
pnpm run dev
```
```bash
pnpm install
```
This ensures that you're running the latest version of bolt.diy and can take advantage of all the newest features and bug fixes.
#### 4. **Rebuild and Start the Application**
- **If using Docker**, ensure you rebuild the Docker image to avoid using a cached version:
```bash
docker compose --profile development up --build
```
- **If not using Docker**, you can start the application as usual with:
```bash
pnpm run dev
```
This ensures that you're running the latest version of bolt.diy and can take advantage of all the newest features and bug fixes.
---
## Adding New LLMs:
To make new LLMs available to use in this version of bolt.diy, head on over to `app/utils/constants.ts` 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.
To make new LLMs available to use in this version of bolt.diy, head on over to `app/utils/constants.ts` 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.
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!

7
docs/mkdocs.yml
View File

@@ -33,7 +33,7 @@ theme:
# favicon: assets/logo.png
repo_name: bolt.diy
repo_url: https://github.com/stackblitz-labs/bolt.diy
edit_uri: ""
edit_uri: ''
extra:
generator: false
@@ -51,9 +51,6 @@ extra:
link: https://bsky.app/profile/bolt.diy
name: bolt.diy on Bluesky
markdown_extensions:
- pymdownx.highlight:
anchor_linenums: true
@@ -73,4 +70,4 @@ markdown_extensions:
- pymdownx.tasklist:
custom_checkbox: true
- toc:
permalink: true
permalink: true