multi-model-bolt.new：基于 Bolt.new 的开源修改版，AI驱动的全栈开发工具

综合介绍

multi-model-bolt.new 是一个基于 Bolt.new 的修改版本，允许使用 TogetherAI 模型，支持部署、移动响应和语音输入等功能。用户可以直接在浏览器中提示、运行、编辑和部署全栈应用程序，无需本地设置。该工具集成了最新的 AI 模型和 StackBlitz 的 WebContainers，提供了完整的开发环境控制。

开源版：Bolt原版 multi-model-bolt.new：基于 Bolt.new 的开源修改版，AI驱动的全栈开发工具

开源改版，支持接入任何模型：https://github.com/InnoBridge/bolt.new-any-llm

Bolt（此代码库）与 Bolt.new 的区别是什么？

• Bolt.new：这是来自 StackBlitz 的商业产品，一个托管的、基于浏览器的 AI 开发工具，使用户能够直接在浏览器中提示、运行、编辑和部署全栈 Web 应用程序。它基于 Bolt 开源代码库 构建，并由 StackBlitz 的 WebContainer API 提供支持。
• Bolt（此代码库）：这是一个开源代码库，提供了构建 Bolt.new 所需的核心组件。该代码库包含 Bolt 的用户界面以及服务器组件，使用 Remix Run 构建。通过利用此代码库和 StackBlitz 的 WebContainer API，您可以创建自己的 AI 驱动开发工具以及完全在浏览器中运行的全栈应用程序。

功能列表

• 安装和运行 npm 工具和库：支持 Vite、Next.js 等流行框架
• 运行 Node.js 服务器：在浏览器中直接运行后端服务
• 与第三方 API 交互：轻松集成外部服务
• 从聊天中部署到生产环境：简化部署流程
• 通过 URL 分享工作成果：方便团队协作
• 环境控制：AI 模型可以完全控制文件系统、节点服务器、包管理器、终端和浏览器控制台
• 移动响应：支持移动设备的响应式设计
• 语音输入：增加了语音输入功能，提升用户体验

使用帮助

Bolt 将 AI 的能力与沙盒开发环境相结合，创造了一个助理和程序员可以共同开发代码的协作体验。Bolt 使用 WebContainer API、Claude Sonnet 3.5、Remix 和 AI SDK。

WebContainer API

Bolt 使用 WebContainers 在浏览器中运行生成的代码。WebContainers 提供了一个全栈沙盒环境，利用 WebContainer API 实现。WebContainers 能够直接在浏览器中运行全栈应用程序，避免了云端托管 AI 代理的成本和安全问题。WebContainers 是交互式且可编辑的，使 Bolt 的 AI 能运行代码并理解用户的任何更改。

WebContainer API 可免费用于个人和开源项目。如果您正在构建用于商业用途的应用程序，可以了解我们有关 WebContainer API 商业用途的定价详情。

Remix 应用程序

Bolt 使用 Remix 构建，并通过 CloudFlare Pages 和 CloudFlare Workers 部署。

AI SDK 集成

Bolt 使用 AI SDK 集成 AI 模型。目前，Bolt 支持使用 Anthropic 的 Claude Sonnet 3.5。您可以从 Anthropic API 控制台 获取 API 密钥，以便与 Bolt 一起使用。请查看 Bolt 如何使用 AI SDK。

前置要求

在开始之前，请确保已安装以下内容：

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

设置步骤

1. 克隆代码仓库（如果尚未克隆）：

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

2. 安装依赖：

pnpm install

3. 设置 Supabase Auth 和 Providers：

• 在 Supabase 上创建一个新项目，并生成一个新的匿名密钥（anon key）。
• 将匿名密钥添加到 .env.local 文件中。
• 将 Supabase URL 添加到 .env.local 文件中。
• 配置 Supabase 提供商（Google、GitHub 等）。

4. 在根目录创建 .env.local 文件，并添加您的 Anthropic API 密钥：

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

可选：设置调试级别：

VITE_LOG_LEVEL=debug

重要提示：请勿将 .env.local 文件提交到版本控制中。此文件已包含在 .gitignore 中。

添加 Together AI 的自定义模型

要添加 Together AI 的自定义模型，可以将它们添加到 app/components/chat/ProviderSelector.tsx 文件中。

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 ...'
];

可用脚本

• pnpm run dev：启动开发服务器（在本地测试时，建议使用 Chrome Canary）。
• pnpm run build：构建项目。
• pnpm run start：使用 Wrangler Pages 在本地运行已构建的应用程序。此脚本使用 bindings.sh 设置必要的绑定，避免重复配置环境变量。
• pnpm run preview：构建项目后在本地启动，用于测试生产环境构建。请注意，HTTP 流式传输在 wrangler pages dev 中可能无法正常工作。
• pnpm test：使用 Vitest 运行测试套件。
• pnpm run typecheck：运行 TypeScript 类型检查。
• pnpm run typegen：使用 Wrangler 生成 TypeScript 类型。
• pnpm run deploy：构建项目并将其部署到 Cloudflare Pages。

开发

要启动开发服务器：

pnpm run dev

这将启动 Remix Vite 开发服务器。

测试

运行测试套件：

pnpm test

部署

将应用程序部署到 Cloudflare Pages：

pnpm run deploy

确保您拥有必要的权限，并且 Wrangler 已正确配置您的 Cloudflare 账户。

详细功能操作流程

1. 安装和运行 npm 工具和库
   • 在项目创建时，选择所需的 npm 工具和库，如 Vite、Next.js 等。
   • 使用内置的包管理器安装依赖，确保项目环境配置正确。
2. 运行 Node.js 服务器
   • 在代码编辑器中编写后端代码，使用 Node.js 提供的功能。
   • 启动服务器，实时查看后端服务的运行效果。
3. 与第三方 API 交互
   • 在项目中集成第三方 API，如支付接口、地图服务等。
   • 使用内置的 API 管理工具，简化与外部服务的交互流程。
4. 从聊天中部署到生产环境
   • 在聊天界面中输入部署命令，系统会自动将应用部署到指定的生产环境。
   • 部署完成后，生成应用的访问 URL，方便用户访问和测试。
5. 通过 URL 分享工作成果
   • 在项目完成后，生成项目的访问 URL。
   • 将 URL 分享给团队成员，进行项目的协作和反馈。
6. 环境控制
   • AI 模型可以完全控制开发环境，包括文件系统、节点服务器、包管理器、终端和浏览器控制台。
   • 用户可以通过简单的命令，完成复杂的环境配置和管理。
7. 移动响应
   • 项目默认支持移动设备的响应式设计，确保在不同设备上的显示效果一致。
   • 用户可以根据需要，自定义移动响应的布局和样式。
8. 语音输入
   • 在项目中集成语音输入功能，提升用户的交互体验。
   • 使用内置的语音识别工具，将语音转换为文本，进行后续处理。