multi-model-bolt.new: open source modification based on Bolt.new, AI-driven full-stack development tools

General Introduction

multi-model-bolt.new is an application based on the BoltA modified version of .new that allows the use of TogetherAI models and supports features such as deployment, mobile response and voice input. Users can prompt, run, edit, and deploy full-stack applications directly in the browser, with no local setup required. The tool integrates with the latest AI models and StackBlitz's WebContainers to provide complete control of the development environment.

Open Source Edition:Bolt Original multi-model-bolt.new: open source modification based on Bolt.new, AI-driven full-stack development tools

What is the difference between Bolt (this code base) and Bolt.new?

• Bolt.new: This is from StackBlitz.Commercial productsis a hosted, browser-based AI development tool that enables users to prompt, run, edit, and deploy full-stack web applications directly in the browser. It is based on Bolt Open Source Library built with StackBlitz's WebContainer API Provide support.
• Bolt (this code base): This is an open source library that provides the means to build the Bolt.new The core components required. The codebase contains Bolt's user interface as well as server components using the Remix Run Build. By utilizing this code base and StackBlitz's WebContainer APIYou can create your own AI-driven development tools and full-stack applications that run entirely in the browser.

Function List

• Installing and running npm tools and libraries: Support for popular frameworks such as Vite, Next.js, etc.
• Running the Node.js server: Run the back-end service directly in the browser
• Interacting with third-party APIs: Easy integration of external services
• Deployment from chat to production environment: Streamline the deployment process
• Share your work via URL: Facilitate teamwork
• environmental control: AI models have full control over file systems, node servers, package managers, terminals, and browser consoles.
• Mobile Response: Responsive design to support mobile devices
• voice input: Added voice input function to enhance user experience

Using Help

Bolt combines the power of AI with a sandbox development environment to create a collaborative experience where assistants and programmers can work together to develop code.Bolt uses the WebContainer API,Claude Sonnet 3.5,Remix cap (a poem) AI SDKThe

WebContainer API

Bolt Usage WebContainers Run the generated code in the browser.WebContainers provides a full-stack sandbox environment that utilizes the WebContainer API WebContainers enable full-stack applications to run directly in the browser, avoiding the cost and security concerns of cloud-hosted AI agents.WebContainers are interactive and editable, enabling Bolt's AI to run code and understand any changes made by the user.

WebContainer API Free for personal use and open source projects. If you are building an application for commercial use, learn more about our Pricing details for commercial use of the WebContainer APIThe

Remix application

Bolt Usage Remix constructed with the CloudFlare Pages cap (a poem) CloudFlare Workers Deployment.

AI SDK Integration

Bolt Usage AI SDK Integrating AI Models. Currently, Bolt supports the use of Anthropic's Claude Sonnet 3.5. you can get the information from the Anthropic API Console Get an API key to use with Bolt. Check out the How Bolt uses the AI SDKThe

Pre-requirements

Before you begin, make sure you have installed the following:

• Node.js (v20.15.1)
• pnpm (v9.4.0)

Setup Steps

1. Clone the code repository (if not already done so):

git clone https://github.com/stackblitz/bolt.new.git

2. Install the dependencies:

pnpm install

3. Set up Supabase Auth and Providers:

• Create a new project on Supabase and generate a new anonymous key (anon key).
• Add the anonymous key to the .env.local Documentation.
• Add the Supabase URL to .env.local Documentation.
• Configure Supabase providers (Google, GitHub, etc.).

4. Creating the root directory .env.local file and add your Anthropic API key:

ANTHROPIC_API_KEY=your_api_key
TOGETHER_API_KEY=your_api_key

# SUPABASE
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_anon_key
# Client Supabase
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_anon_key

# NETLIFY
NETLIFY_AUTH_TOKEN=your_auth_token
NETLIFY_CLIENT_SECRET=your_client_secret
VITE_NETLIFY_CLIENT_ID=your_client_id

Optional: Set the debug level:

VITE_LOG_LEVEL=debug

Important Notes: Please do not place .env.local file is committed to version control. This file is included in the .gitignore Center.

Adding Custom Models for Together AI

To add Together AI's custom models, which can be added to the app/components/chat/ProviderSelector.tsx Documentation.

const togetherModels = [
'meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo',
'meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo',
'mistralai/Mixtral-8x7B-Instruct-v0.1',
'... add more models here ...'
];

Available Scripts

• pnpm run dev: Start the development server (for local testing, Chrome Canary is recommended).
• pnpm run build: Build the project.
• pnpm run start: Runs a built application locally using Wrangler Pages. This script uses the bindings.sh Set the necessary bindings to avoid duplicating the configuration of environment variables.
• pnpm run preview: Build the project and then launch it locally for testing production environment builds. Note that HTTP streaming is not available on the wrangler pages dev may not work properly.
• pnpm test: Run the test suite with Vitest.
• pnpm run typecheck: Run TypeScript type checking.
• pnpm run typegen: Use Wrangler to generate TypeScript types.
• pnpm run deploy: Build the project and deploy it to Cloudflare Pages.

exploit (a resource)

To start the development server:

pnpm run dev

This starts the Remix Vite development server.

test (machinery etc)

Run the test suite:

pnpm test

deployments

Deploy the application to Cloudflare Pages:

pnpm run deploy

Make sure you have the necessary permissions and that Wrangler has properly configured your Cloudflare account.

Detailed function operation flow

1. Installing and running npm tools and libraries
   • At project creation time, select the desired npm tools and libraries, such as Vite, Next.js, and so on.
   • Use the built-in package manager to install dependencies and ensure that the project environment is configured correctly.
2. Running the Node.js server
   • Write back-end code in a code editor that uses the features provided by Node.js.
   • Start the server and see how the back-end service is working in real time.
3. Interacting with third-party APIs
   • Integrate third-party APIs such as payment interfaces, map services, etc. in your projects.
   • Simplify the process of interacting with external services using the built-in API management tools.
4. Deployment from chat to production environment
   • Enter the deploy command in the chat interface and the system will automatically deploy the application to the specified production environment.
   • After the deployment is complete, the access URL for the application is generated for easy access and testing.
5. Share your work via URL
   • Generates the access URL for the project after the project is completed.
   • Share URLs with team members for project collaboration and feedback.
6. environmental control
   • The AI model has full control over the development environment, including the file system, node server, package manager, terminal and browser console.
   • Users can accomplish complex environment configuration and management with simple commands.
7. Mobile Response
   • The project supports responsive design for mobile devices by default, ensuring consistent display across devices.
   • Users can customize the layout and style of the mobile response as needed.
8. voice input
   • Integrate the voice input function in the project to enhance the user interaction experience.
   • Use the built-in speech recognition tool to convert speech to text for subsequent processing.

The layman's guide to getting started with AI

Help you learn how to utilize AI tools at a low cost and from a zero base.AI, like office software, is an essential skill for everyone. Mastering AI will give you an edge in your job search and half the effort in your future work and studies.

View Details>