diff --git a/.github/workflows/commit.yaml b/.github/workflows/commit.yaml
deleted file mode 100644
index 9d88605c0..000000000
--- a/.github/workflows/commit.yaml
+++ /dev/null
@@ -1,39 +0,0 @@
-name: Update Commit Hash File
-
-on:
- push:
- branches:
- - main
-
-permissions:
- contents: write
-
-jobs:
- update-commit:
- if: contains(github.event.head_commit.message, '#release') != true
- runs-on: ubuntu-latest
-
- steps:
- - name: Checkout the code
- uses: actions/checkout@v3
-
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: '20'
- - name: Get the latest commit hash
- run: |
- echo "COMMIT_HASH=$(git rev-parse HEAD)" >> $GITHUB_ENV
- echo "CURRENT_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
-
- - name: Update commit file
- run: |
- echo "{ \"commit\": \"$COMMIT_HASH\", \"version\": \"$CURRENT_VERSION\" }" > app/commit.json
-
- - name: Commit and push the update
- run: |
- git config --global user.name "github-actions[bot]"
- git config --global user.email "github-actions[bot]@users.noreply.github.com"
- git add app/commit.json
- git commit -m "chore: update commit hash to $COMMIT_HASH"
- git push
\ No newline at end of file
diff --git a/.github/workflows/docs.yaml b/.github/workflows/docs.yaml
index ceff50847..0691be2fd 100644
--- a/.github/workflows/docs.yaml
+++ b/.github/workflows/docs.yaml
@@ -4,6 +4,8 @@ on:
push:
branches:
- main
+ paths:
+ - 'docs/**' # This will only trigger the workflow when files in docs directory change
permissions:
contents: write
jobs:
diff --git a/.github/workflows/update-stable.yml b/.github/workflows/update-stable.yml
index bcb0ad95a..967c4e38b 100644
--- a/.github/workflows/update-stable.yml
+++ b/.github/workflows/update-stable.yml
@@ -166,8 +166,7 @@ jobs:
- name: Commit and Tag Release
run: |
git pull
- echo "{ \"commit\": \"$COMMIT_HASH\", \"version\": \"$NEW_VERSION\" }" > app/commit.json
- git add package.json pnpm-lock.yaml changelog.md app/commit.json
+ git add package.json pnpm-lock.yaml changelog.md
git commit -m "chore: release version ${{ steps.bump_version.outputs.new_version }}"
git tag "v${{ steps.bump_version.outputs.new_version }}"
git push
diff --git a/.husky/pre-commit b/.husky/pre-commit
index b95e00d5e..5f5c2b9ed 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -29,15 +29,4 @@ if ! pnpm lint; then
exit 1
fi
-# Update commit.json with the latest commit hash
-echo "Updating commit.json with the latest commit hash..."
-COMMIT_HASH=$(git rev-parse HEAD)
-if [ $? -ne 0 ]; then
- echo "β Failed to get commit hash. Ensure you are in a git repository."
- exit 1
-fi
-
-echo "{ \"commit\": \"$COMMIT_HASH\" }" > app/commit.json
-git add app/commit.json
-
echo "π All checks passed! Committing changes..."
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index bdb02ff19..3a8d5be8f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,217 +1,219 @@
-# Contributing to bolt.diy
+# Contribution Guidelines
-First off, thank you for considering contributing to bolt.diy! This fork aims to expand the capabilities of the original project by integrating multiple LLM providers and enhancing functionality. Every contribution helps make bolt.diy a better tool for developers worldwide.
+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. π‘
+
+---
## π Table of Contents
-- [Code of Conduct](#code-of-conduct)
-- [How Can I Contribute?](#how-can-i-contribute)
-- [Pull Request Guidelines](#pull-request-guidelines)
-- [Coding Standards](#coding-standards)
-- [Development Setup](#development-setup)
-- [Deploymnt with Docker](#docker-deployment-documentation)
-- [Project Structure](#project-structure)
-
-## Code of Conduct
-
-This project and everyone participating in it is governed by our Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to the project maintainers.
-
-## How Can I Contribute?
-
-### π Reporting Bugs and Feature Requests
-- Check the issue tracker to avoid duplicates
-- Use the issue templates when available
-- Include as much relevant information as possible
-- For bugs, add steps to reproduce the issue
-
-### π§ Code Contributions
-1. Fork the repository
-2. Create a new branch for your feature/fix
-3. Write your code
-4. Submit a pull request
-
-### β¨ Becoming a Core Contributor
-We're looking for dedicated contributors to help maintain and grow this project. If you're interested in becoming a core contributor, please fill out our [Contributor Application Form](https://forms.gle/TBSteXSDCtBDwr5m7).
-
-## Pull Request Guidelines
-
-### π PR Checklist
-- [ ] Branch from the main branch
-- [ ] Update documentation if needed
-- [ ] Manually verify all new functionality works as expected
-- [ ] Keep PRs focused and atomic
-
-### π Review Process
-1. Manually test the changes
-2. At least one maintainer review required
-3. Address all review comments
-4. Maintain clean commit history
-
-## Coding Standards
-
-### π» General Guidelines
-- Follow existing code style
-- Comment complex logic
-- Keep functions focused and small
-- Use meaningful variable names
-- Lint your code. This repo contains a pre-commit-hook that will verify your code is linted properly,
-so set up your IDE to do that for you!
-
-## Development Setup
-
-### π Initial Setup
-1. Clone the repository:
-```bash
-git clone https://github.com/coleam00/bolt.new-any-llm.git
-```
-2. Install dependencies:
+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)
+
+---
+
+## π‘οΈ Code of Conduct
+
+This project is governed by our **Code of Conduct**. By participating, you agree to uphold this code. Report unacceptable behavior to the project maintainers.
+
+---
+
+## π οΈ How Can I Contribute?
+
+### 1οΈβ£ Reporting Bugs or Feature Requests
+- Check the [issue tracker](#) to avoid duplicates.
+- 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.
+4. Submit a pull request (PR).
+
+### 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.
+
+### 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.
+- Use meaningful variable names.
+
+---
+
+## π₯οΈ Development Setup
+
+### 1οΈβ£ Initial Setup
+- Clone the repository:
+ ```bash
+ git clone https://github.com/stackblitz-labs/bolt.diy.git
+ ```
+- Install dependencies:
+ ```bash
+ pnpm install
+ ```
+- Set up environment variables:
+ 1. Rename `.env.example` to `.env.local`.
+ 2. Add your API keys:
+ ```bash
+ GROQ_API_KEY=XXX
+ HuggingFace_API_KEY=XXX
+ OPENAI_API_KEY=XXX
+ ...
+ ```
+ 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
```bash
-pnpm install
+pnpm run dev
```
+**Tip**: Use **Google Chrome Canary** for local testing.
-3. Set up environment variables:
- - Rename `.env.example` to `.env.local`
- - Add your LLM API keys (only set the ones you plan to use):
-```bash
-GROQ_API_KEY=XXX
-HuggingFace_API_KEY=XXX
-OPENAI_API_KEY=XXX
-ANTHROPIC_API_KEY=XXX
-...
-```
- - Optionally set debug level:
-```bash
-VITE_LOG_LEVEL=debug
-```
+---
+
+## π§ͺ Testing
- - Optionally set context size:
+Run the test suite with:
```bash
-DEFAULT_NUM_CTX=32768
+pnpm test
```
-Some Example Context Values for the qwen2.5-coder:32b models are.
-
-* DEFAULT_NUM_CTX=32768 - Consumes 36GB of VRAM
-* DEFAULT_NUM_CTX=24576 - Consumes 32GB of VRAM
-* DEFAULT_NUM_CTX=12288 - Consumes 26GB of VRAM
-* DEFAULT_NUM_CTX=6144 - Consumes 24GB of VRAM
+---
-**Important**: Never commit your `.env.local` file to version control. It's already included in .gitignore.
+## π Deployment
-### π Running the Development Server
+### Deploy to Cloudflare Pages
```bash
-pnpm run dev
+pnpm run deploy
```
+Ensure you have required permissions and that Wrangler is configured.
-**Note**: 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.
+---
-## Testing
+## π³ Docker Deployment
-Run the test suite with:
+This section outlines the methods for deploying the application using Docker. The processes for **Development** and **Production** are provided separately for clarity.
-```bash
-pnpm test
-```
+---
-## Deployment
+### π§βπ» Development Environment
-To deploy the application to Cloudflare Pages:
+#### Build Options
+**Option 1: Helper Scripts**
```bash
-pnpm run deploy
+# Development build
+npm run dockerbuild
```
-Make sure you have the necessary permissions and Wrangler is correctly configured for your Cloudflare account.
+**Option 2: Direct Docker Build Command**
+```bash
+docker build . --target bolt-ai-development
+```
-# Docker Deployment Documentation
+**Option 3: Docker Compose Profile**
+```bash
+docker-compose --profile development up
+```
-This guide outlines various methods for building and deploying the application using Docker.
+#### Running the Development Container
+```bash
+docker run -p 5173:5173 --env-file .env.local bolt-ai:development
+```
-## Build Methods
+---
-### 1. Using Helper Scripts
+### π Production Environment
-NPM scripts are provided for convenient building:
+#### Build Options
+**Option 1: Helper Scripts**
```bash
-# Development build
-npm run dockerbuild
-
# Production build
npm run dockerbuild:prod
```
-### 2. Direct Docker Build Commands
-
-You can use Docker's target feature to specify the build environment:
-
+**Option 2: Direct Docker Build Command**
```bash
-# Development build
-docker build . --target bolt-ai-development
-
-# Production build
docker build . --target bolt-ai-production
```
-### 3. Docker Compose with Profiles
-
-Use Docker Compose profiles to manage different environments:
-
+**Option 3: Docker Compose Profile**
```bash
-# Development environment
-docker-compose --profile development up
-
-# Production environment
docker-compose --profile production up
```
-## Running the Application
-
-After building using any of the methods above, run the container with:
-
+#### Running the Production Container
```bash
-# Development
-docker run -p 5173:5173 --env-file .env.local bolt-ai:development
-
-# Production
docker run -p 5173:5173 --env-file .env.local bolt-ai:production
```
-## Deployment with Coolify
+---
-[Coolify](https://github.com/coollabsio/coolify) provides a straightforward deployment process:
+### Coolify Deployment
-1. Import your Git repository as a new project
-2. Select your target environment (development/production)
-3. Choose "Docker Compose" as the Build Pack
-4. Configure deployment domains
-5. Set the custom 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
```
-6. Configure environment variables
- - Add necessary AI API keys
- - Adjust other environment variables as needed
-7. Deploy the application
-## VS Code Integration
+---
+
+## π οΈ VS Code Dev Containers Integration
-The `docker-compose.yaml` configuration is compatible with VS Code dev containers:
+The `docker-compose.yaml` configuration is compatible with **VS Code Dev Containers**, making it easy to set up a development environment directly in Visual Studio Code.
-1. Open the command palette in VS Code
-2. Select the dev container configuration
-3. Choose the "development" profile from the context menu
+### Steps to Use Dev Containers
-## Environment Files
+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.
-Ensure you have the appropriate `.env.local` file configured before running the containers. This file should contain:
-- API keys
-- Environment-specific configurations
-- Other required environment variables
+---
-## Notes
+## π Environment Variables
-- Port 5173 is exposed and mapped for both development and production environments
-- Environment variables are loaded from `.env.local`
-- Different profiles (development/production) can be used for different deployment scenarios
-- The configuration supports both local development and production deployment
+Ensure `.env.local` is configured correctly with:
+- API keys.
+- Context-specific configurations.
+
+Example for the `DEFAULT_NUM_CTX` variable:
+```bash
+DEFAULT_NUM_CTX=24576 # Uses 32GB VRAM
+```
\ No newline at end of file
diff --git a/FAQ.md b/FAQ.md
index ecd4158fe..a09fae885 100644
--- a/FAQ.md
+++ b/FAQ.md
@@ -1,47 +1,91 @@
-[](https://bolt.diy)
+# Frequently Asked Questions (FAQ)
-# bolt.diy
+
+What are the best models for bolt.diy?
-## FAQ
+For the best experience with bolt.diy, we recommend using the following models:
-### How do I get the best results with bolt.diy?
+- **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
+- **GPT-4o**: Strong alternative to Claude 3.5 Sonnet with comparable capabilities
+- **DeepSeekCoder V2 236b**: Best open source model (available through OpenRouter, DeepSeek API, or self-hosted)
+- **Qwen 2.5 Coder 32b**: Best model for self-hosting with reasonable hardware requirements
-- **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.
+**Note**: Models with less than 7b parameters typically lack the capability to properly interact with bolt!
+
-- **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.
+
+How do I get the best results with bolt.diy?
-- **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.diy understand the foundation of your project and ensure everything is wired up right before building out more advanced functionality.
+- **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.
-- **Batch simple instructions**: Save time by combining simple instructions into one message. For example, you can ask Bolt.diy 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.
+- **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.
-### Why are there so many open issues/pull requests?
+- **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.
-bolt.diy was started simply to showcase how to edit an open source project and to do something cool with local LLMs on my (@ColeMedin) YouTube channel! However, it quickly grew into a massive community project that I am working hard to keep up with the demand of by forming a team of maintainers and getting as many people involved as I can. That effort is going well and all of our maintainers are ABSOLUTE rockstars, but it still takes time to organize everything so we can efficiently get through all the issues and PRs. But rest assured, we are working hard and even working on some partnerships behind the scenes to really help this project take off!
+- **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."*
+
-### How do local LLMs fair compared to larger models like Claude 3.5 Sonnet for bolt.diy/bolt.new?
+
+How do I contribute to bolt.diy?
-As much as the gap is quickly closing between open source and massive close source models, youβre still going to get the best results with the very large models like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b. This is one of the big tasks we have at hand - figuring out how to prompt better, use agents, and improve the platform as a whole to make it work better for even the smaller local LLMs!
+Check out our [Contribution Guide](CONTRIBUTING.md) for more details on how to get involved!
+
-### I'm getting the error: "There was an error processing this request"
+
+What are the future plans for bolt.diy?
-If you see this error within bolt.diy, that is just the application telling you there is a problem at a high level, and this could mean a number of different things. To find the actual error, please check BOTH the terminal where you started the application (with Docker or pnpm) and the developer console in the browser. For most browsers, you can access the developer console by pressing F12 or right clicking anywhere in the browser and selecting βInspectβ. Then go to the βconsoleβ tab in the top right.
+Visit our [Roadmap](https://roadmap.sh/r/ottodev-roadmap-2ovzo) for the latest updates.
+New features and improvements are on the way!
+
-### I'm getting the error: "x-api-key header missing"
+
+Why are there so many open issues/pull requests?
-We have seen this error a couple times and for some reason just restarting the Docker container has fixed it. This seems to be Ollama specific. Another thing to try is try to run bolt.diy with Docker or pnpm, whichever you didnβt run first. We are still on the hunt for why this happens once and a while!
+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!
-### I'm getting a blank preview when bolt.diy runs my app!
+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.
+
-We promise you that we are constantly testing new PRs coming into bolt.diy and the preview is core functionality, so the application is not broken! When you get a blank preview or donβt get a preview, this is generally because the LLM hallucinated bad code or incorrect commands. We are working on making this more transparent so it is obvious. Sometimes the error will appear in developer console too so check that as well.
+
+How do local LLMs compare to larger models like Claude 3.5 Sonnet for bolt.diy?
-### How to add a LLM:
+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.
+
-To make new LLMs available to use in this version of bolt.new, 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.
+
+Common Errors and Troubleshooting
-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!
+### **"There was an error processing this request"**
+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).
-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!
+### **"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.
-### Everything works but the results are bad
+### **Blank preview when running the app**
+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.
-This goes to the point above about how local LLMs are getting very powerful but you still are going to see better (sometimes much better) results with the largest LLMs like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b. If you are using smaller LLMs like Qwen-2.5-Coder, consider it more experimental and educational at this point. It can build smaller applications really well, which is super impressive for a local LLM, but for larger scale applications you want to use the larger LLMs still!
+### **"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 GPT-4o, Claude 3.5 Sonnet, or DeepSeek Coder V2 236b.
+
+### **"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)
+
+### **"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 https://github.com/stackblitz-labs/bolt.diy/issues/19.
+
+
+---
+
+Got more questions? Feel free to reach out or open an issue in our GitHub repo!
diff --git a/README.md b/README.md
index 84235f8c1..5ef41deac 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,32 @@
-[](https://bolt.diy)
-
# bolt.diy (Previously oTToDev)
+[](https://bolt.diy)
Welcome to bolt.diy, the official open source version of Bolt.new (previously known as oTToDev and bolt.new ANY LLM), which 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.
-Check the [bolt.diy Docs](https://stackblitz-labs.github.io/bolt.diy/) for more information. This documentation is still being updated after the transfer.
+Check the [bolt.diy Docs](https://stackblitz-labs.github.io/bolt.diy/) for more information.
+
+We have also launched an experimental agent called the "bolt.diy Expert" that can answer common questions about bolt.diy. Find it here on the [oTTomator Live Agent Studio](https://studio.ottomator.ai/).
bolt.diy was originally started by [Cole Medin](https://www.youtube.com/@ColeMedin) but has quickly grown into a massive community effort to build the BEST open source AI coding assistant!
-## Join the community for bolt.diy!
+## Table of Contents
-https://thinktank.ottomator.ai
+- [Join the Community](#join-the-community)
+- [Requested Additions](#requested-additions)
+- [Features](#features)
+- [Setup](#setup)
+- [Run the Application](#run-the-application)
+- [Available Scripts](#available-scripts)
+- [Contributing](#contributing)
+- [Roadmap](#roadmap)
+- [FAQ](#faq)
+## Join the community
-## Requested Additions - Feel Free to Contribute!
+[Join the bolt.diy community here, in the thinktank on ottomator.ai!](https://thinktank.ottomator.ai)
+
+
+## Requested Additions
- β OpenRouter Integration (@coleam00)
- β Gemini Integration (@jonathands)
@@ -60,7 +73,7 @@ https://thinktank.ottomator.ai
- β¬ Perplexity Integration
- β¬ Vertex AI Integration
-## bolt.diy Features
+## Features
- **AI-powered full-stack web development** directly in your browser.
- **Support for multiple LLMs** with an extensible architecture to integrate additional models.
@@ -70,141 +83,212 @@ https://thinktank.ottomator.ai
- **Download projects as ZIP** for easy portability.
- **Integration-ready Docker support** for a hassle-free setup.
-## Setup bolt.diy
+## 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.
-### Prerequisites
+Let's get you up and running with the stable version of Bolt.DIY!
-1. **Install Git**: [Download Git](https://git-scm.com/downloads)
-2. **Install Node.js**: [Download Node.js](https://nodejs.org/en/download/)
+## Quick 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.
+[](https://github.com/stackblitz-labs/bolt.diy/releases/latest) β Click here to go the the latest release version!
-### Clone the Repository
+- Next **click source.zip**
-Clone the repository using Git:
-```bash
-git clone -b stable https://github.com/stackblitz-labs/bolt.diy
-```
-### (Optional) Configure Environment Variables
-Most environment variables can be configured directly through the settings menu of the application. However, if you need to manually configure them:
+## Prerequisites
-1. Rename `.env.example` to `.env.local`.
-2. Add your LLM API keys. For example:
+Before you begin, you'll need to install two important pieces of software:
-```env
-GROQ_API_KEY=YOUR_GROQ_API_KEY
-OPENAI_API_KEY=YOUR_OPENAI_API_KEY
-ANTHROPIC_API_KEY=YOUR_ANTHROPIC_API_KEY
-```
+### Install Node.js
-**Note**: Ollama does not require an API key as it runs locally.
+Node.js is required to run the application.
-3. Optionally, set additional configurations:
+1. Visit the [Node.js Download Page](https://nodejs.org/en/download/)
+2. Download the "LTS" (Long Term Support) version for your operating system
+3. Run the installer, accepting the default settings
+4. Verify Node.js is properly installed:
+ - **For Windows Users**:
+ 1. Press `Windows + R`
+ 2. Type "sysdm.cpl" and press Enter
+ 3. Go to "Advanced" tab β "Environment Variables"
+ 4. Check if `Node.js` appears in the "Path" variable
+ - **For Mac/Linux Users**:
+ 1. Open Terminal
+ 2. Type this command:
+ ```bash
+ echo $PATH
+ ```
+ 3. Look for `/usr/local/bin` in the output
-```env
-# Debugging
-VITE_LOG_LEVEL=debug
+## Running the Application
-# Ollama settings (example: 8K context, localhost port 11434)
-OLLAMA_API_BASE_URL=http://localhost:11434
-DEFAULT_NUM_CTX=8192
-```
+You have two options for running Bolt.DIY: directly on your machine or using Docker.
-**Important**: Do not commit your `.env.local` file to version control. This file is already included in `.gitignore`.
+### Option 1: Direct Installation (Recommended for Beginners)
----
+1. **Install Package Manager (pnpm)**:
+ ```bash
+ npm install -g pnpm
+ ```
+
+2. **Install Project Dependencies**:
+ ```bash
+ pnpm install
+ ```
+
+3. **Start the Application**:
+ ```bash
+ pnpm run dev
+ ```
+
+ **Important Note**: If you're using Google Chrome, you'll need Chrome Canary for local development. [Download it here](https://www.google.com/chrome/canary/)
+
+### Option 2: Using Docker
+
+This option requires some familiarity with Docker but provides a more isolated environment.
-## Run the Application
+#### Additional Prerequisite
+- Install Docker: [Download Docker](https://www.docker.com/)
-### Option 1: Without Docker
+#### Steps:
-1. **Install Dependencies**:
- ```bash
- pnpm install
- ```
- If `pnpm` is not installed, install it using:
- ```bash
- sudo npm install -g pnpm
- ```
+1. **Build the Docker Image**:
+ ```bash
+ # Using npm script:
+ npm run dockerbuild
-2. **Start the Application**:
- ```bash
- pnpm run dev
+ # OR using direct Docker command:
+ docker build . --target bolt-ai-development
```
- 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
+2. **Run the Container**:
+ ```bash
+ docker-compose --profile development up
+ ```
-#### Prerequisites
-- 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 # Development build
- npm run dockerbuild:prod # Production build
- ```
+## Configuring API Keys and Providers
- Alternatively, use Docker commands directly:
- ```bash
- docker build . --target bolt-ai-development # Development build
- docker build . --target bolt-ai-production # Production build
- ```
+### Adding Your API Keys
-2. **Run the Container**:
- Use Docker Compose profiles to manage environments:
- ```bash
- docker-compose --profile development up # Development
- docker-compose --profile production up # Production
- ```
+Setting up your API keys in Bolt.DIY is straightforward:
- - With the development profile, changes to your code will automatically reflect in the running container (hot reloading).
+1. Open the home page (main interface)
+2. Select your desired provider from the dropdown menu
+3. Click the pencil (edit) icon
+4. Enter your API key in the secure input field
----
+
-### Update Your Local Version to the Latest
+### Configuring Custom Base URLs
-To keep your local version of bolt.diy up to date with the latest changes, follow these steps for your operating system:
+For providers that support custom base URLs (such as Ollama or LM Studio), follow these steps:
-#### 1. **Navigate to your project folder**
- Navigate to the directory where you cloned the repository and open a terminal:
+1. Click the settings icon in the sidebar to open the settings menu
+ 
-#### 2. **Fetch the Latest Changes**
- Use Git to pull the latest changes from the main repository:
+2. Navigate to the "Providers" tab
+3. Search for your provider using the search bar
+4. Enter your custom base URL in the designated field
+ 
+> **Note**: Custom base URLs are particularly useful when running local instances of AI models or using custom API endpoints.
+
+### Supported Providers
+- Ollama
+- LM Studio
+- OpenAILike
+
+## Setup Using Git (For Developers only)
+
+This method is recommended for developers who want to:
+- Contribute to the project
+- Stay updated with the latest changes
+- Switch between different versions
+- Create custom modifications
+
+#### Prerequisites
+1. Install Git: [Download Git](https://git-scm.com/downloads)
+
+#### Initial Setup
+
+1. **Clone the Repository**:
```bash
- git pull origin main
+ # Using HTTPS
+ git clone https://github.com/stackblitz-labs/bolt.diy.git
```
-#### 3. **Update Dependencies**
- After pulling the latest changes, update the project dependencies by running the following command:
+2. **Navigate to Project Directory**:
+ ```bash
+ cd bolt.diy
+ ```
+3. **Switch to the Main Branch**:
+ ```bash
+ git checkout main
+ ```
+4. **Install Dependencies**:
```bash
pnpm install
```
-#### 4. **Run the Application**
- Once the updates are complete, you can start the application again with:
-
+5. **Start the Development Server**:
```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.
+#### Staying Updated
+
+To get the latest changes from the repository:
+
+1. **Save Your Local Changes** (if any):
+ ```bash
+ git stash
+ ```
+
+2. **Pull Latest Updates**:
+ ```bash
+ git pull origin main
+ ```
+
+3. **Update Dependencies**:
+ ```bash
+ pnpm install
+ ```
+
+4. **Restore Your Local Changes** (if any):
+ ```bash
+ git stash pop
+ ```
+
+#### Troubleshooting Git Setup
+
+If you encounter issues:
+
+1. **Clean Installation**:
+ ```bash
+ # Remove node modules and lock files
+ rm -rf node_modules pnpm-lock.yaml
+
+ # Clear pnpm cache
+ pnpm store prune
+
+ # Reinstall dependencies
+ pnpm install
+ ```
+
+2. **Reset Local Changes**:
+ ```bash
+ # Discard all local changes
+ git reset --hard origin/main
+ ```
+
+Remember to always commit your local changes or stash them before pulling updates to avoid conflicts.
---
@@ -236,4 +320,4 @@ Explore upcoming features and priorities on our [Roadmap](https://roadmap.sh/r/o
## FAQ
-For answers to common questions, visit our [FAQ Page](FAQ.md).
+For answers to common questions, issues, and to see a list of recommended models, visit our [FAQ Page](FAQ.md).
diff --git a/app/commit.json b/app/commit.json
deleted file mode 100644
index 7fa447ddd..000000000
--- a/app/commit.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "commit": "b9601b26d739f935eda935c61dea4c7c6b9c7220", "version": "0.0.2" }
diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 2084cbb37..7c2a9da12 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -119,6 +119,9 @@ export const BaseChat = React.forwardRef(
useEffect(() => {
// Load API keys from cookies on component mount
+
+ let parsedApiKeys: Record | undefined = {};
+
try {
const storedApiKeys = Cookies.get('apiKeys');
@@ -127,6 +130,7 @@ export const BaseChat = React.forwardRef(
if (typeof parsedKeys === 'object' && parsedKeys !== null) {
setApiKeys(parsedKeys);
+ parsedApiKeys = parsedKeys;
}
}
} catch (error) {
@@ -155,7 +159,8 @@ export const BaseChat = React.forwardRef(
Cookies.remove('providers');
}
- initializeModelList(providerSettings).then((modelList) => {
+ initializeModelList({ apiKeys: parsedApiKeys, providerSettings }).then((modelList) => {
+ console.log('Model List: ', modelList);
setModelList(modelList);
});
@@ -355,7 +360,7 @@ export const BaseChat = React.forwardRef(
modelList={modelList}
provider={provider}
setProvider={setProvider}
- providerList={providerList || PROVIDER_LIST}
+ providerList={providerList || (PROVIDER_LIST as ProviderInfo[])}
apiKeys={apiKeys}
/>
{(providerList || []).length > 0 && provider && (
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index d9e57f233..1b830fd90 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -21,6 +21,7 @@ import { debounce } from '~/utils/debounce';
import { useSettings } from '~/lib/hooks/useSettings';
import type { ProviderInfo } from '~/types/model';
import { useSearchParams } from '@remix-run/react';
+import { createSampler } from '~/utils/sampler';
const toastAnimation = cssTransition({
enter: 'animated fadeInRight',
@@ -77,6 +78,24 @@ export function Chat() {
);
}
+const processSampledMessages = createSampler(
+ (options: {
+ messages: Message[];
+ initialMessages: Message[];
+ isLoading: boolean;
+ parseMessages: (messages: Message[], isLoading: boolean) => void;
+ storeMessageHistory: (messages: Message[]) => Promise;
+ }) => {
+ const { messages, initialMessages, isLoading, parseMessages, storeMessageHistory } = options;
+ parseMessages(messages, isLoading);
+
+ if (messages.length > initialMessages.length) {
+ storeMessageHistory(messages).catch((error) => toast.error(error.message));
+ }
+ },
+ 50,
+);
+
interface ChatProps {
initialMessages: Message[];
storeMessageHistory: (messages: Message[]) => Promise;
@@ -103,7 +122,7 @@ export const ChatImpl = memo(
});
const [provider, setProvider] = useState(() => {
const savedProvider = Cookies.get('selectedProvider');
- return PROVIDER_LIST.find((p) => p.name === savedProvider) || DEFAULT_PROVIDER;
+ return (PROVIDER_LIST.find((p) => p.name === savedProvider) || DEFAULT_PROVIDER) as ProviderInfo;
});
const { showChat } = useStore(chatStore);
@@ -169,11 +188,13 @@ export const ChatImpl = memo(
}, []);
useEffect(() => {
- parseMessages(messages, isLoading);
-
- if (messages.length > initialMessages.length) {
- storeMessageHistory(messages).catch((error) => toast.error(error.message));
- }
+ processSampledMessages({
+ messages,
+ initialMessages,
+ isLoading,
+ parseMessages,
+ storeMessageHistory,
+ });
}, [messages, isLoading, parseMessages]);
const scrollTextArea = () => {
diff --git a/app/components/chat/ModelSelector.tsx b/app/components/chat/ModelSelector.tsx
index 7571d636d..ec4da63ff 100644
--- a/app/components/chat/ModelSelector.tsx
+++ b/app/components/chat/ModelSelector.tsx
@@ -1,6 +1,6 @@
import type { ProviderInfo } from '~/types/model';
-import type { ModelInfo } from '~/utils/types';
import { useEffect } from 'react';
+import type { ModelInfo } from '~/lib/modules/llm/types';
interface ModelSelectorProps {
model?: string;
diff --git a/app/components/settings/SettingsWindow.tsx b/app/components/settings/SettingsWindow.tsx
index 541323f50..f53d547c0 100644
--- a/app/components/settings/SettingsWindow.tsx
+++ b/app/components/settings/SettingsWindow.tsx
@@ -5,27 +5,27 @@ import { classNames } from '~/utils/classNames';
import { DialogTitle, dialogVariants, dialogBackdropVariants } from '~/components/ui/Dialog';
import { IconButton } from '~/components/ui/IconButton';
import styles from './Settings.module.scss';
-import ChatHistoryTab from './chat-history/ChatHistoryTab';
import ProvidersTab from './providers/ProvidersTab';
import { useSettings } from '~/lib/hooks/useSettings';
import FeaturesTab from './features/FeaturesTab';
import DebugTab from './debug/DebugTab';
import EventLogsTab from './event-logs/EventLogsTab';
import ConnectionsTab from './connections/ConnectionsTab';
+import DataTab from './data/DataTab';
interface SettingsProps {
open: boolean;
onClose: () => void;
}
-type TabType = 'chat-history' | 'providers' | 'features' | 'debug' | 'event-logs' | 'connection';
+type TabType = 'data' | 'providers' | 'features' | 'debug' | 'event-logs' | 'connection';
export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
const { debug, eventLogs } = useSettings();
- const [activeTab, setActiveTab] = useState('chat-history');
+ const [activeTab, setActiveTab] = useState('data');
const tabs: { id: TabType; label: string; icon: string; component?: ReactElement }[] = [
- { id: 'chat-history', label: 'Chat History', icon: 'i-ph:book', component: },
+ { id: 'data', label: 'Data', icon: 'i-ph:database', component: },
{ id: 'providers', label: 'Providers', icon: 'i-ph:key', component: },
{ id: 'connection', label: 'Connection', icon: 'i-ph:link', component: },
{ id: 'features', label: 'Features', icon: 'i-ph:star', component: },
@@ -63,7 +63,7 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
variants={dialogBackdropVariants}
/>
-
+ {
- const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
- const url = URL.createObjectURL(blob);
- const link = document.createElement('a');
- link.href = url;
- link.download = filename;
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- URL.revokeObjectURL(url);
- };
-
- const handleDeleteAllChats = async () => {
- const confirmDelete = window.confirm('Are you sure you want to delete all chats? This action cannot be undone.');
-
- if (!confirmDelete) {
- return; // Exit if the user cancels
- }
-
- if (!db) {
- const error = new Error('Database is not available');
- logStore.logError('Failed to delete chats - DB unavailable', error);
- toast.error('Database is not available');
-
- return;
- }
-
- try {
- setIsDeleting(true);
-
- const allChats = await getAll(db);
- await Promise.all(allChats.map((chat) => deleteById(db!, chat.id)));
- logStore.logSystem('All chats deleted successfully', { count: allChats.length });
- toast.success('All chats deleted successfully');
- navigate('/', { replace: true });
- } catch (error) {
- logStore.logError('Failed to delete chats', error);
- toast.error('Failed to delete chats');
- console.error(error);
- } finally {
- setIsDeleting(false);
- }
- };
-
- const handleExportAllChats = async () => {
- if (!db) {
- const error = new Error('Database is not available');
- logStore.logError('Failed to export chats - DB unavailable', error);
- toast.error('Database is not available');
-
- return;
- }
-
- try {
- const allChats = await getAll(db);
- const exportData = {
- chats: allChats,
- exportDate: new Date().toISOString(),
- };
-
- downloadAsJson(exportData, `all-chats-${new Date().toISOString()}.json`);
- logStore.logSystem('Chats exported successfully', { count: allChats.length });
- toast.success('Chats exported successfully');
- } catch (error) {
- logStore.logError('Failed to export chats', error);
- toast.error('Failed to export chats');
- console.error(error);
- }
- };
-
- return (
- <>
-
-
Chat History
-
-
-
-
Danger Area
-
This action cannot be undone!
-
-
-
-
- );
-}
diff --git a/app/components/settings/data/DataTab.tsx b/app/components/settings/data/DataTab.tsx
new file mode 100644
index 000000000..756abaadb
--- /dev/null
+++ b/app/components/settings/data/DataTab.tsx
@@ -0,0 +1,304 @@
+import React, { useState } from 'react';
+import { useNavigate } from '@remix-run/react';
+import Cookies from 'js-cookie';
+import { toast } from 'react-toastify';
+import { db, deleteById, getAll } from '~/lib/persistence';
+import { logStore } from '~/lib/stores/logs';
+import { classNames } from '~/utils/classNames';
+import styles from '~/components/settings/Settings.module.scss';
+
+// List of supported providers that can have API keys
+const API_KEY_PROVIDERS = [
+ 'Anthropic',
+ 'OpenAI',
+ 'Google',
+ 'Groq',
+ 'HuggingFace',
+ 'OpenRouter',
+ 'Deepseek',
+ 'Mistral',
+ 'OpenAILike',
+ 'Together',
+ 'xAI',
+ 'Perplexity',
+ 'Cohere',
+ 'AzureOpenAI',
+] as const;
+
+type Provider = typeof API_KEY_PROVIDERS[number];
+
+interface ApiKeys {
+ [key: string]: string;
+}
+
+export default function DataTab() {
+ const navigate = useNavigate();
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ const downloadAsJson = (data: any, filename: string) => {
+ const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = filename;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+ };
+
+ const handleExportAllChats = async () => {
+ if (!db) {
+ const error = new Error('Database is not available');
+ logStore.logError('Failed to export chats - DB unavailable', error);
+ toast.error('Database is not available');
+ return;
+ }
+
+ try {
+ const allChats = await getAll(db);
+ const exportData = {
+ chats: allChats,
+ exportDate: new Date().toISOString(),
+ };
+
+ downloadAsJson(exportData, `all-chats-${new Date().toISOString()}.json`);
+ logStore.logSystem('Chats exported successfully', { count: allChats.length });
+ toast.success('Chats exported successfully');
+ } catch (error) {
+ logStore.logError('Failed to export chats', error);
+ toast.error('Failed to export chats');
+ console.error(error);
+ }
+ };
+
+ const handleDeleteAllChats = async () => {
+ const confirmDelete = window.confirm('Are you sure you want to delete all chats? This action cannot be undone.');
+
+ if (!confirmDelete) {
+ return;
+ }
+
+ if (!db) {
+ const error = new Error('Database is not available');
+ logStore.logError('Failed to delete chats - DB unavailable', error);
+ toast.error('Database is not available');
+ return;
+ }
+
+ try {
+ setIsDeleting(true);
+ const allChats = await getAll(db);
+ await Promise.all(allChats.map((chat) => deleteById(db!, chat.id)));
+ logStore.logSystem('All chats deleted successfully', { count: allChats.length });
+ toast.success('All chats deleted successfully');
+ navigate('/', { replace: true });
+ } catch (error) {
+ logStore.logError('Failed to delete chats', error);
+ toast.error('Failed to delete chats');
+ console.error(error);
+ } finally {
+ setIsDeleting(false);
+ }
+ };
+
+ const handleExportSettings = () => {
+ const settings = {
+ providers: Cookies.get('providers'),
+ isDebugEnabled: Cookies.get('isDebugEnabled'),
+ isEventLogsEnabled: Cookies.get('isEventLogsEnabled'),
+ isLocalModelsEnabled: Cookies.get('isLocalModelsEnabled'),
+ promptId: Cookies.get('promptId'),
+ isLatestBranch: Cookies.get('isLatestBranch'),
+ commitHash: Cookies.get('commitHash'),
+ eventLogs: Cookies.get('eventLogs'),
+ selectedModel: Cookies.get('selectedModel'),
+ selectedProvider: Cookies.get('selectedProvider'),
+ githubUsername: Cookies.get('githubUsername'),
+ githubToken: Cookies.get('githubToken'),
+ bolt_theme: localStorage.getItem('bolt_theme'),
+ };
+
+ downloadAsJson(settings, 'bolt-settings.json');
+ toast.success('Settings exported successfully');
+ };
+
+ const handleImportSettings = (event: React.ChangeEvent) => {
+ const file = event.target.files?.[0];
+ if (!file) return;
+
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ try {
+ const settings = JSON.parse(e.target?.result as string);
+
+ Object.entries(settings).forEach(([key, value]) => {
+ if (key === 'bolt_theme') {
+ if (value) localStorage.setItem(key, value as string);
+ } else if (value) {
+ Cookies.set(key, value as string);
+ }
+ });
+
+ toast.success('Settings imported successfully. Please refresh the page for changes to take effect.');
+ } catch (error) {
+ toast.error('Failed to import settings. Make sure the file is a valid JSON file.');
+ console.error('Failed to import settings:', error);
+ }
+ };
+ reader.readAsText(file);
+ event.target.value = '';
+ };
+
+ const handleExportApiKeyTemplate = () => {
+ const template: ApiKeys = {};
+ API_KEY_PROVIDERS.forEach(provider => {
+ template[`${provider}_API_KEY`] = '';
+ });
+
+ template['OPENAI_LIKE_API_BASE_URL'] = '';
+ template['LMSTUDIO_API_BASE_URL'] = '';
+ template['OLLAMA_API_BASE_URL'] = '';
+ template['TOGETHER_API_BASE_URL'] = '';
+
+ downloadAsJson(template, 'api-keys-template.json');
+ toast.success('API keys template exported successfully');
+ };
+
+ const handleImportApiKeys = (event: React.ChangeEvent) => {
+ const file = event.target.files?.[0];
+ if (!file) return;
+
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ try {
+ const apiKeys = JSON.parse(e.target?.result as string);
+ let importedCount = 0;
+ const consolidatedKeys: Record = {};
+
+ API_KEY_PROVIDERS.forEach(provider => {
+ const keyName = `${provider}_API_KEY`;
+ if (apiKeys[keyName]) {
+ consolidatedKeys[provider] = apiKeys[keyName];
+ importedCount++;
+ }
+ });
+
+ if (importedCount > 0) {
+ // Store all API keys in a single cookie as JSON
+ Cookies.set('apiKeys', JSON.stringify(consolidatedKeys));
+
+ // Also set individual cookies for backward compatibility
+ Object.entries(consolidatedKeys).forEach(([provider, key]) => {
+ Cookies.set(`${provider}_API_KEY`, key);
+ });
+
+ toast.success(`Successfully imported ${importedCount} API keys/URLs. Refreshing page to apply changes...`);
+ // Reload the page after a short delay to allow the toast to be seen
+ setTimeout(() => {
+ window.location.reload();
+ }, 1500);
+ } else {
+ toast.warn('No valid API keys found in the file');
+ }
+
+ // Set base URLs if they exist
+ ['OPENAI_LIKE_API_BASE_URL', 'LMSTUDIO_API_BASE_URL', 'OLLAMA_API_BASE_URL', 'TOGETHER_API_BASE_URL'].forEach(baseUrl => {
+ if (apiKeys[baseUrl]) {
+ Cookies.set(baseUrl, apiKeys[baseUrl]);
+ }
+ });
+
+ } catch (error) {
+ toast.error('Failed to import API keys. Make sure the file is a valid JSON file.');
+ console.error('Failed to import API keys:', error);
+ }
+ };
+ reader.readAsText(file);
+ event.target.value = '';
+ };
+
+ return (
+
+
+
Data Management
+
+
+
+
Chat History
+
+ Export or delete all your chat history.
+
+
+
+
+
+
+
+
+
Settings Backup
+
+ Export your settings to a JSON file or import settings from a previously exported file.
+
+
+
+
+
+
+
+
+
API Keys Management
+
+ Import API keys from a JSON file or download a template to fill in your keys.
+
+ These providers are experimental and allow you to run AI models locally or connect to your own
+ infrastructure. They require additional setup but offer more flexibility.
+
{
+ e.currentTarget.src = DefaultIcon;
+ }}
+ alt={`${provider.name} icon`}
+ className="w-6 h-6 dark:invert"
+ />
+ {provider.name}
+