From 9958496468f012c4bf941af6affb804f43b06513 Mon Sep 17 00:00:00 2001 From: lewis liu Date: Wed, 15 Jan 2025 10:30:45 +0800 Subject: [PATCH 01/11] fix: replace docker-compose with docker compose --- CONTRIBUTING.md | 4 ++-- README.md | 2 +- docs/docs/CONTRIBUTING.md | 4 ++-- docs/docs/index.md | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3a8d5be8..0310b6d1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -144,7 +144,7 @@ docker build . --target bolt-ai-development **Option 3: Docker Compose Profile** ```bash -docker-compose --profile development up +docker compose --profile development up ``` #### Running the Development Container @@ -171,7 +171,7 @@ docker build . --target bolt-ai-production **Option 3: Docker Compose Profile** ```bash -docker-compose --profile production up +docker compose --profile production up ``` #### Running the Production Container diff --git a/README.md b/README.md index d216bf0a..f3d740cc 100644 --- a/README.md +++ b/README.md @@ -182,7 +182,7 @@ This option requires some familiarity with Docker but provides a more isolated e 2. **Run the Container**: ```bash - docker-compose --profile development up + docker compose --profile development up ``` diff --git a/docs/docs/CONTRIBUTING.md b/docs/docs/CONTRIBUTING.md index 3a8d5be8..0310b6d1 100644 --- a/docs/docs/CONTRIBUTING.md +++ b/docs/docs/CONTRIBUTING.md @@ -144,7 +144,7 @@ docker build . --target bolt-ai-development **Option 3: Docker Compose Profile** ```bash -docker-compose --profile development up +docker compose --profile development up ``` #### Running the Development Container @@ -171,7 +171,7 @@ docker build . --target bolt-ai-production **Option 3: Docker Compose Profile** ```bash -docker-compose --profile production up +docker compose --profile production up ``` #### Running the Production Container diff --git a/docs/docs/index.md b/docs/docs/index.md index 7f12f5dd..6e851beb 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -156,7 +156,7 @@ Once you've configured your keys, the application will be ready to use the selec 2. **Run the Container**: Use Docker Compose profiles to manage environments: ```bash - docker-compose --profile development up + docker compose --profile development up ``` - With the development profile, changes to your code will automatically reflect in the running container (hot reloading). @@ -188,7 +188,7 @@ To keep your local version of bolt.diy up to date with the latest changes, follo - **If using Docker**, ensure you rebuild the Docker image to avoid using a cached version: ```bash - docker-compose --profile development up --build + docker compose --profile development up --build ``` - **If not using Docker**, you can start the application as usual with: From 7341b1292b5b01411fcaeb16edfafe16892b2111 Mon Sep 17 00:00:00 2001 From: Ken Jenney Date: Sat, 18 Jan 2025 12:38:34 -0500 Subject: [PATCH 02/11] Get environment variables from .env.local Environment variables are not being passed to the container in the development profile. Adding env_file to pass them so they can be used by the application. --- docker-compose.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/docker-compose.yaml b/docker-compose.yaml index 9c28c647..47938e0a 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -37,6 +37,7 @@ services: image: bolt-ai:development build: target: bolt-ai-development + env_file: ".env.local" environment: - NODE_ENV=development - VITE_HMR_PROTOCOL=ws From b732f20233cb3259a70fb5647074e88a44bf5be5 Mon Sep 17 00:00:00 2001 From: Stijnus <72551117+Stijnus@users.noreply.github.com> Date: Sat, 18 Jan 2025 19:25:01 +0100 Subject: [PATCH 03/11] bug fix for Open preview in a new tab. --- README.md | 35 +++-- app/components/workbench/Preview.tsx | 162 +++++++++++++----------- app/lib/modules/llm/providers/github.ts | 3 +- 3 files changed, 114 insertions(+), 86 deletions(-) diff --git a/README.md b/README.md index d216bf0a..666bc119 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # bolt.diy (Previously oTToDev) + [![bolt.diy: AI-Powered Full-Stack Web Development in the Browser](./public/social_preview_index.jpg)](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. @@ -65,7 +66,7 @@ project, please check the [project management guide](./PROJECT.md) to get starte - ✅ Together Integration (@mouimet-infinisoft) - ✅ Mobile friendly (@qwikode) - ✅ Better prompt enhancing (@SujalXplores) -- ✅ Attach images to prompts (@atrokhym) +- ✅ Attach images to prompts (@atrokhym)(@stijnus) - ✅ Added Git Clone button (@thecodacus) - ✅ Git Import from url (@thecodacus) - ✅ PromptLibrary to have different variations of prompts for different use cases (@thecodacus) @@ -86,8 +87,9 @@ project, please check the [project management guide](./PROJECT.md) to get starte - ⬜ Voice prompting - ⬜ Azure Open AI API Integration - ⬜ Vertex AI Integration -- ⬜ Granite Integration -- ⬜ Popout Window for Web Container +- ⬜ Granite Integration +- ✅ Popout Window for Web Container(@stijnus) +- ✅ Ability to change Popout window size (@stijnus) ## Features @@ -99,21 +101,18 @@ project, please check the [project management guide](./PROJECT.md) to get starte - **Download projects as ZIP** for easy portability. - **Integration-ready Docker support** for a hassle-free setup. -## 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. Let's get you up and running with the stable version of Bolt.DIY! ## Quick Download -[![Download Latest Release](https://img.shields.io/github/v/release/stackblitz-labs/bolt.diy?label=Download%20Bolt&sort=semver)](https://github.com/stackblitz-labs/bolt.diy/releases/latest) ← Click here to go the the latest release version! +[![Download Latest Release](https://img.shields.io/github/v/release/stackblitz-labs/bolt.diy?label=Download%20Bolt&sort=semver)](https://github.com/stackblitz-labs/bolt.diy/releases/latest) ← Click here to go the the latest release version! - Next **click source.zip** - - - ## Prerequisites Before you begin, you'll need to install two important pieces of software: @@ -146,16 +145,19 @@ You have two options for running Bolt.DIY: directly on your machine or using Doc ### 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 ``` @@ -167,11 +169,13 @@ You have two options for running Bolt.DIY: directly on your machine or using Doc This option requires some familiarity with Docker but provides a more isolated environment. #### Additional Prerequisite + - Install Docker: [Download Docker](https://www.docker.com/) #### Steps: 1. **Build the Docker Image**: + ```bash # Using npm script: npm run dockerbuild @@ -185,9 +189,6 @@ This option requires some familiarity with Docker but provides a more isolated e docker-compose --profile development up ``` - - - ## Configuring API Keys and Providers ### Adding Your API Keys @@ -216,6 +217,7 @@ For providers that support custom base URLs (such as Ollama or LM Studio), follo > **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 @@ -223,23 +225,27 @@ For providers that support custom base URLs (such as Ollama or LM Studio), follo ## 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 # Using HTTPS git clone https://github.com/stackblitz-labs/bolt.diy.git ``` 2. **Navigate to Project Directory**: + ```bash cd bolt.diy ``` @@ -249,6 +255,7 @@ This method is recommended for developers who want to: git checkout main ``` 4. **Install Dependencies**: + ```bash pnpm install ``` @@ -263,16 +270,19 @@ This method is recommended for developers who want to: 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 ``` @@ -287,6 +297,7 @@ To get the latest changes from the repository: If you encounter issues: 1. **Clean Installation**: + ```bash # Remove node modules and lock files rm -rf node_modules pnpm-lock.yaml diff --git a/app/components/workbench/Preview.tsx b/app/components/workbench/Preview.tsx index 68cc73e2..23e97e9e 100644 --- a/app/components/workbench/Preview.tsx +++ b/app/components/workbench/Preview.tsx @@ -11,13 +11,14 @@ interface WindowSize { name: string; width: number; height: number; + icon: string; } const WINDOW_SIZES: WindowSize[] = [ - { name: 'Mobile (375x667)', width: 375, height: 667 }, - { name: 'Tablet (768x1024)', width: 768, height: 1024 }, - { name: 'Laptop (1366x768)', width: 1366, height: 768 }, - { name: 'Desktop (1920x1080)', width: 1920, height: 1080 }, + { name: 'Mobile', width: 375, height: 667, icon: 'i-ph:device-mobile' }, + { name: 'Tablet', width: 768, height: 1024, icon: 'i-ph:device-tablet' }, + { name: 'Laptop', width: 1366, height: 768, icon: 'i-ph:laptop' }, + { name: 'Desktop', width: 1920, height: 1080, icon: 'i-ph:monitor' }, ]; export const Preview = memo(() => { @@ -249,14 +250,17 @@ export const Preview = memo(() => { {isPortDropdownOpen && (
setIsPortDropdownOpen(false)} /> )} -
- - setIsSelectionMode(!isSelectionMode)} - className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''} - /> -
+
+
+ + setIsSelectionMode(!isSelectionMode)} + className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''} + /> +
+ +
{ />
- {previews.length > 1 && ( - (hasSelectedPreview.current = value)} - setIsDropdownOpen={setIsPortDropdownOpen} - previews={previews} - /> - )} - - - - setIsPreviewOnly(!isPreviewOnly)} - title={isPreviewOnly ? 'Show Full Interface' : 'Show Preview Only'} - /> - - - -
- openInNewWindow(selectedWindowSize)} - title={`Open Preview in ${selectedWindowSize.name} Window`} - /> - setIsWindowSizeDropdownOpen(!isWindowSizeDropdownOpen)} - className="ml-1" - title="Select Window Size" - /> - - {isWindowSizeDropdownOpen && ( - <> -
setIsWindowSizeDropdownOpen(false)} /> -
- {WINDOW_SIZES.map((size) => ( - - ))} -
- +
+ {previews.length > 1 && ( + (hasSelectedPreview.current = value)} + setIsDropdownOpen={setIsPortDropdownOpen} + previews={previews} + /> )} + + + + setIsPreviewOnly(!isPreviewOnly)} + title={isPreviewOnly ? 'Show Full Interface' : 'Show Preview Only'} + /> + + + +
+ openInNewWindow(selectedWindowSize)} + title={`Open Preview in ${selectedWindowSize.name} Window`} + /> + setIsWindowSizeDropdownOpen(!isWindowSizeDropdownOpen)} + className="ml-1" + title="Select Window Size" + /> + + {isWindowSizeDropdownOpen && ( + <> +
setIsWindowSizeDropdownOpen(false)} /> +
+ {WINDOW_SIZES.map((size) => ( + + ))} +
+ + )} +
diff --git a/app/lib/modules/llm/providers/github.ts b/app/lib/modules/llm/providers/github.ts index f346cdd1..56745fde 100644 --- a/app/lib/modules/llm/providers/github.ts +++ b/app/lib/modules/llm/providers/github.ts @@ -11,7 +11,8 @@ export default class GithubProvider extends BaseProvider { config = { apiTokenKey: 'GITHUB_API_KEY', }; -// find more in https://github.com/marketplace?type=models + + // find more in https://github.com/marketplace?type=models staticModels: ModelInfo[] = [ { name: 'gpt-4o', label: 'GPT-4o', provider: 'Github', maxTokenAllowed: 8000 }, { name: 'o1', label: 'o1-preview', provider: 'Github', maxTokenAllowed: 100000 }, From 7f540b5d1e41781424072b0314b4b72717b2434b Mon Sep 17 00:00:00 2001 From: Leex Date: Sat, 18 Jan 2025 21:14:57 +0100 Subject: [PATCH 04/11] Update README.md - Enhanced text for bolt.diy docs section and better visibility to guide people there instead using github readme which is more for devs - added NodeJS based applications, as this is not clear and some people asked about in the community --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d216bf0a..4e8249b4 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,10 @@ 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. +----- +Check the [bolt.diy Docs](https://stackblitz-labs.github.io/bolt.diy/) for more offical installation instructions and more informations. +----- Also [this pinned post in our community](https://thinktank.ottomator.ai/t/videos-tutorial-helpful-content/3243) has a bunch of incredible resources for running and deploying bolt.diy yourself! 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/). @@ -91,7 +93,7 @@ project, please check the [project management guide](./PROJECT.md) to get starte ## Features -- **AI-powered full-stack web development** directly in your browser. +- **AI-powered full-stack web development** for **NodeJS based applications** directly in your browser. - **Support for multiple LLMs** with an extensible architecture to integrate additional models. - **Attach images to prompts** for better contextual understanding. - **Integrated terminal** to view output of LLM-run commands. From 840dd59af8a9e8968d22a5655699e5455ca91c63 Mon Sep 17 00:00:00 2001 From: Leex Date: Sat, 18 Jan 2025 21:24:02 +0100 Subject: [PATCH 05/11] docs: Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4e8249b4..5d5cbcf4 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# bolt.diy (Previously oTToDev) +# bolt.diy (Previously oTToDev) [![bolt.diy: AI-Powered Full-Stack Web Development in the Browser](./public/social_preview_index.jpg)](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. From 48f4999f32c30c519a1df1202ce94e0e8f745bc9 Mon Sep 17 00:00:00 2001 From: Stijnus <72551117+Stijnus@users.noreply.github.com> Date: Sat, 18 Jan 2025 21:45:29 +0100 Subject: [PATCH 06/11] Update Preview.tsx --- app/components/workbench/Preview.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/app/components/workbench/Preview.tsx b/app/components/workbench/Preview.tsx index 23e97e9e..93a0b85c 100644 --- a/app/components/workbench/Preview.tsx +++ b/app/components/workbench/Preview.tsx @@ -328,11 +328,11 @@ export const Preview = memo(() => { {isWindowSizeDropdownOpen && ( <>
setIsWindowSizeDropdownOpen(false)} /> -
+
{WINDOW_SIZES.map((size) => (