Bolt.new: Your AI-Powered Sidekick for Full-Stack Web Development - Install Locally
Bolt.new is an innovative web-based development platform designed for building and deploying full-stack web applications quickly and efficiently. Developed by StackBlitz, it leverages AI capabilities, specifically utilizing the Claude 3.5 model, to assist users in creating applications without requiring extensive coding knowledge.
Prerequisites for GPU and CPU VMs
For GPU VM
- GPUs: 1xRTXA6000 (for smooth execution).
- Disk Space: 40GB free.
- RAM: 40 GB.
- CPU: 24 Cores
For CPU VM
- Disk Space: 100GB free.
- RAM: 16 GB.
- CPU: 4 CPUs
Step-by-Step process to Install Bolt.new Locally
For the purpose of this tutorial, we will use a GPU-powered Virtual Machine offered by NodeShift, as it provides the optimal configuration to achieve the fastest performance while running Bolt.new. NodeShift offers affordable Virtual Machines that meet stringent compliance standards, including GDPR, SOC2, and ISO27001, ensuring data security and privacy.
However, if you prefer to use a CPU-powered Virtual Machine, you can still follow this guide. Bolt.new works on CPU-based VMs as well, though performance may be slower compared to a GPU setup. The installation process remains largely the same, allowing you to achieve similar functionality on a CPU-powered machine. NodeShift’s infrastructure is versatile, enabling you to choose between GPU or CPU configurations based on your specific needs and budget.
Let’s dive into the setup and installation steps to get Bolt.new running efficiently on your chosen virtual machine.
Step 1: Sign Up and Set Up a NodeShift Cloud Account
Visit the NodeShift Platform and create an account. Once you've signed up, log into your account.
Follow the account setup process and provide the necessary details and information.
Step 2: Create a GPU Node (Virtual Machine)
GPU Nodes are NodeShift's GPU Virtual Machines, on-demand resources equipped with diverse GPUs ranging from H100s to A100s. These GPU-powered VMs provide enhanced environmental control, allowing configuration adjustments for GPUs, CPUs, RAM, and Storage based on specific requirements.
Navigate to the menu on the left side. Select the GPU Nodes option, create a GPU Node in the Dashboard, click the Create GPU Node button, and create your first Virtual Machine deployment.
Step 3: Select a Model, Region, and Storage
In the "GPU Nodes" tab, select a GPU Model and Storage according to your needs and the geographical region where you want to launch your model.
We will use 1x RTX A6000 GPU for this tutorial to achieve the fastest performance. However, you can choose a more affordable GPU with less VRAM if that better suits your requirements.
Step 4: Select Authentication Method
There are two authentication methods available: Password and SSH Key. SSH keys are a more secure option. To create them, please refer to our official documentation.
Step 5: Choose an Image
Next, you will need to choose an image for your Virtual Machine. We will deploy Bolt.new on an NVIDIA Cuda Virtual Machine. This proprietary, closed-source parallel computing platform will allow you to install Bolt.new on your GPU Node.
After choosing the image, click the 'Create' button, and your Virtual Machine will be deployed.
Step 6: Virtual Machine Successfully Deployed
You will get visual confirmation that your node is up and running.
Step 7: Connect to GPUs using SSH
NodeShift GPUs can be connected to and controlled through a terminal using the SSH key provided during GPU creation.
Once your GPU Node deployment is successfully created and has reached the 'RUNNING' status, you can navigate to the page of your GPU Deployment Instance. Then, click the 'Connect' button in the top right corner.
Now open your terminal and paste the proxy SSH IP or direct SSH IP.
Next, if you want to check the GPU details, run the command below:
nvidia-smi
Step 8: Clone the Repository
Run the following command to clone the repository:
git clone https://github.com/coleam00/bolt.new-any-llm.git
cd bolt.new-any-llm
Step 9: Review Files in Repository
Run the following command to manage and review files in a newly cloned repository:
ls -ltra
Step 10: Update the System and Install Vim
What is Vim?
Vim is a text editor. The last line of the text editor is used to give commands to vi and provide you with information.
Note: If an error occurs stating that Vim is not a recognized internal or external command, install Vim using the steps below.
Step 1: Update the package list
Before installing any software, we will update the package list using the following command in your terminal:
sudo apt update
Step 2: Install Vim
To install Vim, enter the following command:
sudo apt install vim -y
This command will retrieve and install Vim and its necessary components.
Step 11: Adding API Keys in Configuration File
Run the following command to enter in configuration file:
mv .env.example .env
vi .env
After opening the configuration file, you will encounter a wide range of API options, such as Hugging Face, OpenAI, and other supported platforms. These options allow you to integrate various APIs based on the requirements of your project.
To proceed, you need to add the API keys for the Large Language Models (LLMs) of your choice. This step enables seamless interaction with the respective APIs, granting your application the ability to leverage the powerful capabilities of these advanced models.
For example, in this guide, we will use the OpenAI API key to demonstrate the process. Make sure you have obtained your API key from OpenAI, which is available in the API section of their official website once you sign up or log into your account.
Save and close the file (Ctrl+X, Y, Enter).
Step 12: Update Your System
Run the following command to ensure your system is up-to-date:
sudo apt update && sudo apt upgrade -y
Step 13: Install Node.js
Run the following command to install NodeSource repository to install the latest Node.js version:
curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
Run the following command to install Node.js:
sudo apt install -y nodejs
Run the following command to verify the version of Node.js and npm:
node -v
npm -v
This will also install the latest compatible npm version with Node.js.
Then, run the following command to update npm to the latest version:
sudo npm install -g npm@latest
Sometimes the version of npm installed with Node.js may not be the latest.
Next, run the following command to verify the version:
npm -v
Step 14: Install pnpm
Run the following command to install pnpm using npm:
npm install -g pnpm
Then, run the following command to verify the installation:
pnpm -v
Step 15: Install pnpm files
Run the following command to install pnpm files:
pnpm install
Step 16: Run Bolt.New Server
Finally, execute the following command to run bolt.new server:
pnpm dev
Step 17: SSH port forwarding
To forward local port 5173 on your windows machine to port 5173 on the VM, use the following command in command prompt or powershell:
ssh -i "C:\Users\Acer\Documents\my_ssh_keys\id_rsa" -L 5173:localhost:5173 root@149.11.242.18 -p 11421
After running this command, you can access the Bolt.new in your local browser at localhost:5173.
Step 18: Choose the LLM provider
Choose the LLM provider: You’ll see options like Anthropic, Ollama, OpenAI, etc.
- For example, if you select OpenAI, Bolt.new will enable integration with OpenAI's API services.
- If you select Anthropic, it connects to models like Claude through their API.
- Ensure that you have the API key or credentials for the chosen provider.
We will use OpenAI for this demo; you can choose an LLM Provider of your choice.
Step 19: Selecting an LLM Model
After selecting the provider, a list of supported models will appear. For example:
- OpenAI: Models like GPT-4, GPT-3.5-turbo, Codex, etc.
- Anthropic: Models like Claude 1, Claude 2, etc.
- Ollama: Ollama-specific lightweight LLMs.
We will use GPT-4 as the LLM Model for this demo; you can choose an LLM Model of your choice.
Step 20: Give Prompt
Write prompt and make apps.
Check this video for complete output.
Conclusion
In this guide, we explain the Bolt.new Full-Stack Web Development AI open-source coding tool and provide a step-by-step tutorial on installing Bolt.new locally on a NodeShift virtual machine. You'll learn how to install the required software, set up essential tools like Node.js, and build your first app with Bolt.new.
For more information about NodeShift:
