Skip to content

Commit ed5bad3

Browse files
dustinwloring1988dustinwloring1988
committed
docs: added info on both ways to set api keys
1 parent 0c07bc9 commit ed5bad3

File tree

1 file changed

+121
-98
lines changed

1 file changed

+121
-98
lines changed

‎docs/docs/index.md‎

Lines changed: 121 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@ bolt.diy allows you to choose the LLM that you use for each prompt! Currently, y
33

44
## Table of Contents
55
- [Join the community!](#join-the-community)
6-
- [What's bolt.diy](#whats-boltdiy)
7-
- [What Makes bolt.diy Different](#what-makes-boltdiy-different)
6+
- [Features](#features)
87
- [Setup](#setup)
9-
- [Run with Docker](#run-with-docker)
10-
- [Using Helper Scripts](#1a-using-helper-scripts)
11-
- [Direct Docker Build Commands](#1b-direct-docker-build-commands-alternative-to-using-npm-scripts)
12-
- [Docker Compose with Profiles](#2-docker-compose-with-profiles-to-run-the-container)
13-
- [Run Without Docker](#run-without-docker)
8+
- [Prerequisites](#prerequisites)
9+
- [Clone the Repository](#clone-the-repository)
10+
- [Entering API Keys](#entering-api-keys)
11+
- [1. Set API Keys in the `.env.local` File](#1-set-api-keys-in-the-envlocal-file)
12+
- [2. Configure API Keys Directly in the Application](#2-configure-api-keys-directly-in-the-application)
13+
- [Run the Application](#run-the-application)
14+
- [Option 1: Without Docker](#option-1-without-docker)
15+
- [Option 2: With Docker](#option-2-with-docker)
16+
- [Update Your Local Version to the Latest](#update-your-local-version-to-the-latest)
1417
- [Adding New LLMs](#adding-new-llms)
1518
- [Available Scripts](#available-scripts)
1619
- [Development](#development)
@@ -24,154 +27,174 @@ bolt.diy allows you to choose the LLM that you use for each prompt! Currently, y
2427

2528
---
2629

27-
## Whats bolt.diy
30+
## Features
2831

29-
bolt.diy is an AI-powered web development agent that allows you to prompt, run, edit, and deploy full-stack applications directly from your browser—no local setup required. If you're here to build your own AI-powered web dev agent using the Bolt open source codebase, [click here to get started!](./CONTRIBUTING.md)
32+
- **AI-powered full-stack web development** directly in your browser.
33+
- **Support for multiple LLMs** with an extensible architecture to integrate additional models.
34+
- **Attach images to prompts** for better contextual understanding.
35+
- **Integrated terminal** to view output of LLM-run commands.
36+
- **Revert code to earlier versions** for easier debugging and quicker changes.
37+
- **Download projects as ZIP** for easy portability.
38+
- **Integration-ready Docker support** for a hassle-free setup.
3039

3140
---
3241

33-
## What Makes bolt.diy Different
42+
## Setup
3443

35-
Claude, v0, etc are incredible- but you can't install packages, run backends, or edit code. That’s where bolt.diy stands out:
44+
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.
3645

37-
- **Full-Stack in the Browser**: bolt.diy integrates cutting-edge AI models with an in-browser development environment powered by **StackBlitz’s WebContainers**. This allows you to:
38-
- Install and run npm tools and libraries (like Vite, Next.js, and more)
39-
- Run Node.js servers
40-
- Interact with third-party APIs
41-
- Deploy to production from chat
42-
- Share your work via a URL
46+
### Prerequisites
4347

44-
- **AI with Environment Control**: Unlike traditional dev environments where the AI can only assist in code generation, bolt.diy gives AI models **complete control** over the entire environment including the filesystem, node server, package manager, terminal, and browser console. This empowers AI agents to handle the whole app lifecycle—from creation to deployment.
48+
1. **Install Git**: [Download Git](https://git-scm.com/downloads)
49+
2. **Install Node.js**: [Download Node.js](https://nodejs.org/en/download/)
4550

46-
Whether you’re an experienced developer, a PM, or a designer, bolt.diy allows you to easily build production-grade full-stack applications.
51+
- After installation, the Node.js path is usually added to your system automatically. To verify:
52+
- **Windows**: Search for "Edit the system environment variables," click "Environment Variables," and check if `Node.js` is in the `Path` variable.
53+
- **Mac/Linux**: Open a terminal and run:
54+
```bash
55+
echo $PATH
56+
```
57+
Look for `/usr/local/bin` in the output.
4758

48-
For developers interested in building their own AI-powered development tools with WebContainers, check out the open-source Bolt codebase in this repo!
59+
### Clone the Repository
4960

50-
---
51-
52-
## Setup
53-
54-
Many of you are new users to installing software from Github. If you have any installation troubles reach out and submit an "issue" using the links above, or feel free to enhance this documentation by forking, editing the instructions, and doing a pull request.
55-
56-
1. [Install Git from](https://git-scm.com/downloads)
57-
58-
2. [Install Node.js from](https://nodejs.org/en/download/)
61+
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.
5962

60-
Pay attention to the installer notes after completion.
63+
Clone the repository using Git:
6164

62-
On all operating systems, the path to Node.js should automatically be added to your system path. But you can check your path if you want to be sure. On Windows, you can search for "edit the system environment variables" in your system, select "Environment Variables..." once you are in the system properties, and then check for a path to Node in your "Path" system variable. On a Mac or Linux machine, it will tell you to check if /usr/local/bin is in your $PATH. To determine if usr/local/bin is included in $PATH open your Terminal and run:
63-
64-
```
65-
echo $PATH .
65+
```bash
66+
git clone -b stable https://github.com/stackblitz-labs/bolt.diy
6667
```
6768

68-
If you see usr/local/bin in the output then you're good to go.
69+
---
6970

70-
3. Clone the repository (if you haven't already) by opening a Terminal window (or CMD with admin permissions) and then typing in this:
71+
### Entering API Keys
7172

72-
```
73-
git clone https://github.com/stackblitz-labs/bolt.diy.git
74-
```
73+
There are two ways to configure your API keys in bolt.diy:
7574

76-
3. Rename .env.example to .env.local and add your LLM API keys. You will find this file on a Mac at "[your name]/bolt.diy/.env.example". For Windows and Linux the path will be similar.
75+
#### 1. Set API Keys in the `.env.local` File
7776

78-
![image](https://github.com/user-attachments/assets/7e6a532c-2268-401f-8310-e8d20c731328)
77+
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.
7978

80-
If you can't see the file indicated above, its likely you can't view hidden files. On Mac, open a Terminal window and enter this command below. On Windows, you will see the hidden files option in File Explorer Settings. A quick Google search will help you if you are stuck here.
79+
- On **Mac**, you can find the file at `[your name]/bolt.diy/.env.example`.
80+
- On **Windows/Linux**, the path will be similar.
8181

82-
```
82+
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:
83+
84+
```bash
8385
defaults write com.apple.finder AppleShowAllFiles YES
8486
```
8587

86-
**NOTE**: you only have to set the ones you want to use and Ollama doesn't need an API key because it runs locally on your computer:
87-
88-
[Get your GROQ API Key here](https://console.groq.com/keys)
89-
90-
[Get your Open AI API Key by following these instructions](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key)
91-
92-
Get your Anthropic API Key in your [account settings](https://console.anthropic.com/settings/keys)
88+
Make sure to add your API keys for each provider you want to use, for example:
9389

9490
```
9591
GROQ_API_KEY=XXX
9692
OPENAI_API_KEY=XXX
9793
ANTHROPIC_API_KEY=XXX
9894
```
9995

100-
Optionally, you can set the debug level:
96+
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.
10197
102-
```
103-
VITE_LOG_LEVEL=debug
104-
```
98+
**Note**: Never commit your `.env.local` file to version control. It’s already included in the `.gitignore`.
10599
106-
**Important**: Never commit your `.env.local` file to version control. It's already included in .gitignore.
100+
#### 2. Configure API Keys Directly in the Application
107101
108-
## Run with Docker
102+
Alternatively, you can configure your API keys directly in the application once it's running. To do this:
109103

110-
Prerequisites:
104+
1. Launch the application and navigate to the provider selection dropdown.
105+
2. Select the provider you wish to configure.
106+
3. Click the pencil icon next to the selected provider.
107+
4. Enter your API key in the provided field.
111108

112-
Git and Node.js as mentioned above, as well as Docker: https://www.docker.com/
109+
This method allows you to easily add or update your keys without needing to modify files directly.
113110

114-
### 1a. Using Helper Scripts
111+
Once you've configured your keys, the application will be ready to use the selected LLMs.
115112
116-
NPM scripts are provided for convenient building:
117113
118-
```bash
119-
# Development build
120-
npm run dockerbuild
114+
---
121115
122-
# Production build
123-
npm run dockerbuild:prod
124-
```
116+
## Run the Application
125117
126-
### 1b. Direct Docker Build Commands (alternative to using NPM scripts)
118+
### Option 1: Without Docker
127119
128-
You can use Docker's target feature to specify the build environment instead of using NPM scripts if you wish:
120+
1. **Install Dependencies**:
121+
```bash
122+
pnpm install
123+
```
124+
If `pnpm` is not installed, install it using:
125+
```bash
126+
sudo npm install -g pnpm
127+
```
129128
130-
```bash
131-
# Development build
132-
docker build . --target bolt-ai-development
129+
2. **Start the Application**:
130+
```bash
131+
pnpm run dev
132+
```
133+
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.
133134

134-
# Production build
135-
docker build . --target bolt-ai-production
136-
```
135+
### Option 2: With Docker
137136

138-
### 2. Docker Compose with Profiles to Run the Container
137+
#### Prerequisites
138+
- Ensure Git, Node.js, and Docker are installed: [Download Docker](https://www.docker.com/)
139139

140-
Use Docker Compose profiles to manage different environments:
140+
#### Steps
141141

142-
```bash
143-
# Development environment
144-
docker-compose --profile development up
142+
1. **Build the Docker Image**:
145143

146-
# Production environment
147-
docker-compose --profile production up
148-
```
144+
Use the provided NPM scripts:
145+
```bash
146+
npm run dockerbuild
147+
```
148+
149+
Alternatively, use Docker commands directly:
150+
```bash
151+
docker build . --target bolt-ai-development
152+
```
153+
154+
2. **Run the Container**:
155+
Use Docker Compose profiles to manage environments:
156+
```bash
157+
docker-compose --profile development up
158+
```
149159

150-
When you run the Docker Compose command with the development profile, any changes you
151-
make on your machine to the code will automatically be reflected in the site running
152-
on the container (i.e. hot reloading still applies!).
160+
- With the development profile, changes to your code will automatically reflect in the running container (hot reloading).
153161

154162
---
155163

156-
## Run Without Docker
164+
### Update Your Local Version to the Latest
157165

158-
1. Install dependencies using Terminal (or CMD in Windows with admin permissions):
166+
To keep your local version of bolt.diy up to date with the latest changes, follow these steps for your operating system:
159167

160-
```
161-
pnpm install
162-
```
168+
#### 1. **Navigate to your project folder**
169+
Navigate to the directory where you cloned the repository and open a terminal:
163170

164-
If you get an error saying "command not found: pnpm" or similar, then that means pnpm isn't installed. You can install it via this:
171+
#### 2. **Fetch the Latest Changes**
172+
Use Git to pull the latest changes from the main repository:
165173

166-
```
167-
sudo npm install -g pnpm
168-
```
174+
```bash
175+
git pull origin main
176+
```
169177

170-
2. Start the application with the command:
178+
#### 3. **Update Dependencies**
179+
After pulling the latest changes, update the project dependencies by running the following command:
171180

172-
```bash
173-
pnpm run dev
174-
```
181+
```bash
182+
pnpm install
183+
```
184+
185+
#### 4. **Rebuild and Start the Application**
186+
187+
- **If using Docker**, ensure you rebuild the Docker image to avoid using a cached version:
188+
```bash
189+
docker-compose --profile development up --build
190+
```
191+
192+
- **If not using Docker**, you can start the application as usual with:
193+
```bash
194+
pnpm run dev
195+
```
196+
197+
This ensures that you're running the latest version of bolt.diy and can take advantage of all the newest features and bug fixes.
175198
176199
---
177200

0 commit comments

Comments
 (0)