大模型应用

bolt.new-any-llm

作者头像
项目作者

Prompt, run, edit, and deploy full-stack web applications using any LLM you want!

bolt.new-any-llm 预览图

bolt.new-any-llm 介绍

了解项目的详细信息和使用方法

Bolt.new 分支:oTToDev 由 Cole Medin 开发

这个 Bolt.new 的分支(oTToDev)允许你为每个提示选择使用的大语言模型(LLM)!目前,你可以使用 OpenAI、Anthropic、Ollama、OpenRouter、Gemini、LMStudio、Mistral、xAI、HuggingFace、DeepSeek 或 Groq 模型,并且可以轻松扩展到使用 Vercel AI SDK 支持的任何其他模型!下方是本地运行和扩展以包含更多模型的说明。

加入 oTToDev 社区!

https://thinktank.ottomator.ai

请求添加到此分支的功能 - 欢迎贡献!!

  • ✅ OpenRouter 集成 (@coleam00)
  • ✅ Gemini 集成 (@jonathands)
  • ✅ 从下载内容自动生成 Ollama 模型 (@yunatamos)
  • ✅ 通过供应商过滤模型 (@jasonm23)
  • ✅ 将项目下载为 ZIP (@fabwaseem)
  • ✅ 改进主要的 Bolt.new 提示 app\lib\.server\llm\prompts.ts (@kofi-bhr)
  • ✅ DeepSeek API 集成 (@zenith110)
  • ✅ Mistral API 集成 (@ArulGandhi)
  • ✅ 像 Open AI 一样的 API 集成 (@ZerxZ)
  • ✅ 能将文件同步(单向)到本地文件夹 (@muzafferkadir)
  • ✅ 使用 Docker 容器化应用程序以便于安装 (@aaronbolton)
  • ✅ 直接将项目发布到 GitHub (@goncaloalves)
  • ✅ 能在 UI 中输入 API 密钥 (@ali00209)
  • ✅ xAI Grok Beta 集成 (@milutinke)
  • ✅ LM Studio 集成 (@karrot0)
  • ✅ HuggingFace 集成 (@ahsan3219)
  • ✅ Bolt 终端查看 LLM 执行命令的输出 (@thecodacus)
  • ✅ 代码输出流 (@thecodacus)
  • ✅ 能恢复代码到早期版本 (@wonderwhy-er)
  • ✅ Cohere 集成 (@hasanraiyan)
  • ✅ 动态模型最大 Token 长度 (@hasanraiyan)
  • 高优先级 - 防止 Bolt 频繁重写文件(文件锁定和差异)
  • 高优先级 - 更好地提示较小的大语言模型(代码窗口有时不会启动)
  • 高优先级 - 将本地项目加载到应用程序中
  • 高优先级 - 将图像附加到提示中
  • 高优先级 - 在后端运行代理而不是单个模型调用
  • ⬜ 移动设备友好
  • ⬜ Together 集成
  • ⬜ Azure Open AI API 集成
  • ⬜ Perplexity 集成
  • ⬜ Vertex AI 集成
  • ⬜ 直接部署到 Vercel/Netlify 等平台
  • ⬜ 提示缓存
  • ⬜ 更好的提示增强
  • ⬜ 在 MD 文件中规划大语言模型项目以获得更好的结果/透明度
  • ⬜ 与 git 类似的确认进行 VSCode 集成
  • ⬜ 上传文档以扩展知识 - UI 设计模板,引用编码风格的代码库等。
  • ⬜ 语音提示

Bolt.new: 浏览器中的 AI 驱动全栈 Web 开发

Bolt.new 是一款 AI 驱动的 Web 开发智能助手,允许你直接在浏览器中提示、运行、编辑和部署全栈应用程序,无需本地设置。如果你想利用 Bolt 的开源代码库构建自己的 AI 驱动 Web 开发智能助手,点击这里开始!

Bolt.new 的独特之处

Claude、v0 等应用很了不起,但它们无法安装软件包、运行后端或编辑代码。这正是 Bolt.new 的突出之处:

  • 全栈浏览器开发:Bolt.new 将最先进的 AI 模型与由 StackBlitz 的 WebContainers 驱动的浏览器开发环境创新结合,使你能够:

    • 安装和运行 npm 工具及库(如 Vite、Next.js 等)
    • 运行 Node.js 服务器
    • 与第三方 API 交互
    • 从聊天中直接部署到生产环境
    • 通过 URL 分享你的作品
  • AI 与环境控制:与传统的开发环境不同,在那里 AI 只能辅助生成代码,Bolt.new 给予 AI 模型对整个环境的完全控制,包括文件系统、节点服务器、包管理器、终端和浏览器控制台。这让 AI 智能助手可以处理从创建到部署的整个应用程序生命周期。

无论你是经验丰富的开发人员、项目经理还是设计师,Bolt.new 都能让你轻松构建生产级别的全栈应用程序。

对于希望使用 WebContainers 构建自己的 AI 驱动开发工具的开发者,请查看本代码库中的开源 Bolt 代码!

设置

对于许多从 Github 安装软件的新用户来说,如果你遇到安装问题,请通过上方链接提交一个问题,或者通过分支、编辑说明并进行 Pull Request 来增强此文档。

  1. https://git-scm.com/downloads 安装 Git

  2. https://nodejs.org/en/download/ 安装 Node.js

注意安装完成后的提示信息。

在所有操作系统上,Node.js 的路径应自动添加到系统路径中。但如果你想确认,可以检查路径。在 Windows 上,可以在系统中搜索“编辑系统环境变量”,进入系统属性后选择“环境变量...”,然后在“Path”系统变量中查看 Node 的路径。在 Mac 或 Linux 机器上,它会告诉你是否 /usr/local/bin 在你的 $PATH 中。要确定是否包含在 $PATH 中,请打开终端并运行:

echo $PATH

如果在输出中看到 usr/local/bin,那么一切正常。

  1. 克隆代码库(如果尚未克隆)通过打开终端窗口(或具有管理员权限的 CMD),然后输入:
git clone https://github.com/coleam00/bolt.new-any-llm.git
  1. 将 .env.example 重命名为 .env.local 并添加你的 LLM API 密钥。在 Mac 上,你会在 "[您的名称]/bold.new-any-llm/.env.example" 找到这个文件。对于 Windows 和 Linux,路径类似。

如果看不到上方提到的文件,可能是因为你无法查看隐藏文件。在 Mac 上,打开终端窗口并输入以下命令。在 Windows 上,你将在文件资源管理器设置中看到隐藏文件选项。如果在这里卡住了,快速 Google 搜索将为你提供帮助。

defaults write com.apple.finder AppleShowAllFiles YES

注意:你只需设置想要使用的那些,而 Ollama 不需要 API 密钥,因为它在本地计算机上运行:

获取你的 GROQ API 密钥:https://console.groq.com/keys

按照这些说明获取你的 Open AI API 密钥:https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key

在账户设置中获取你的 Anthropic API 密钥:https://console.anthropic.com/settings/keys

GROQ_API_KEY=XXX
OPENAI_API_KEY=XXX
ANTHROPIC_API_KEY=XXX

可以选择设置调试级别:

VITE_LOG_LEVEL=debug

重要提示:绝不要将 .env.local 文件提交到版本控制中。它已包含在 .gitignore 中。

使用 Docker 运行

前提条件:

如上所述的 Git 和 Node.js,以及 Docker: https://www.docker.com/

1a. 使用助手脚本

提供了 NPM 脚本以便于构建:

bash
1# 开发构建 2npm run dockerbuild 3 4# 生产构建 5npm run dockerbuild:prod

1b. 直接 Docker 构建命令(使用 NPM 脚本的替代方法)

如果你愿意,可以使用 Docker 的目标功能来指定构建环境,而不是使用 NPM 脚本:

bash
1# 开发构建 2docker build . --target bolt-ai-development 3 4# 生产构建 5docker build . --target bolt-ai-production

2. 使用配置文件通过 Docker Compose 运行容器

使用 Docker Compose 配置文件来管理不同的环境:

bash
1# 开发环境 2docker-compose --profile development up 3 4# 生产环境 5docker-compose --profile production up

当你在开发配置文件中运行 Docker Compose 命令时,机器上对代码所做的任何更改将自动反映在运行在容器上的站点中(即热重载仍然适用)。

不使用 Docker 直接运行

  1. 使用终端(或具有管理员权限的 Windows CMD)安装依赖项:
pnpm install

如果你收到一个错误提示 "command not found: pnpm" 或类似情况,那意味着 pnpm 没有安装。你可以通过以下命令安装它:

sudo npm install -g pnpm
  1. 使用以下命令启动应用程序:
bash
1pnpm run dev

关于运行 Ollama 模型的重要说明

Ollama 模型的上下文窗口默认只有 2048 个 Token。即使是可以轻松处理更多的模型,这个窗口的长度也不够大来处理 Bolt.new/oTToDev 的提示!你需要创建一个你要使用的任何模型的版本,在其中指定更大的上下文窗口。幸运的是,这非常容易实现。

你需要做的只是:

  • 在计算机上的任意位置创建一个名为 "Modelfile" 的文件(没有文件扩展名)
  • 放入这两行:
FROM [Ollama 模型 ID 例如 qwen2.5-coder:7b]
PARAMETER num_ctx 32768
  • 运行命令:
ollama create -f Modelfile [你的新模型 ID,可以是任何东西(例如:qwen2.5-coder-extra-ctx:7b)]

现在你有了一个新的 Ollama 模型,它在上下文长度上不像默认情况下的 Ollama 模型那样受限。 你将在所有下载的 Ollama 模型列表中看到这个新模型!

添加新的大语言模型:

要使这个版本的 Bolt.new 可以使用新的大语言模型,请访问 app/utils/constants.ts,找到常量 MODEL_LIST。数组中的每个元素都是一个对象,具有用于名称的模型 ID(从供应商的 API 文档中获取),前端模型下拉菜单的标签,以及供应商。

默认情况下,Anthropic、OpenAI、Groq 和 Ollama 作为供应商实现,但如果你愿意,可以浏览此代码库的 YouTube 视频,了解如何扩展此功能以与更多供应商合作!当你将一个新模型添加到 MODEL_LIST 数组时,该模型就能立即在你本地运行应用或重新加载时使用。如果你使用 Ollama 模型,请确保在此之前模型已经安装好了!

可用脚本

  • pnpm run dev: 启动开发服务器。
  • 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。

开发

要启动开发服务器,可以输入:

bash
1pnpm run dev

这将启动 Remix Vite 开发服务器。如果你使用 Chrome,需要安装谷歌 Chrome Canary 来在本地运行。这是一个安装简单且适合网页开发的浏览器。

常见问题解答

如何在 oTToDev 中获得最佳效果?

  • 明确你的技术栈:如果你想使用特定的框架或库(如 Astro、Tailwind、ShadCN 或其他流行的 JavaScript 框架),请在初始提示中提到它们,以确保 Bolt 能够相应地搭建项目。

  • 使用增强提示图标:在发送提示前,尝试点击“增强”图标,让 AI 模型帮助你优化提示,然后在提交前编辑结果。

  • 先搭建基础部分,再添加功能:确保应用程序的基本结构到位,然后再深入进行高级功能开发。这能帮助 oTToDev 理解项目基础,确保一切的连接正确,在构建更多复杂功能之前做好准备。

  • 合并简单指令:通过将简单指令合并到一条消息中来节省时间。例如,你可以让 oTToDev 一次更改配色方案、添加移动响应以及重启开发服务器,从而显著节省时间和 API 额度。

如何为 oTToDev 做贡献?

请查看我们专门的页面以了解如何为 oTToDev 做出贡献!点这里了解更多

你们计划将 oTToDev 合并回官方的 Bolt.new 仓库吗?

更多信息将在下个月初发布——敬请期待!

oTToDev 的未来计划是什么?

请查看我们的路线图!戳此查看

更详细的路线图更新即将公布!

为什么有这么多未解决的问题/待处理的请求?

oTToDev 最初只是为了展示如何编辑一个开源项目并在我的 YouTube 频道上做一些有趣的事情而发起的。然而,它迅速成长为一个庞大的社区项目。我正在努力组建一个维护团队,并让更多的人参与进来。尽管这一努力进展顺利且我们的所有维护者都是绝对的明星,但要组织好一切仍需要时间,努力通过这个项目吸引更多的合作伙伴来帮助它腾飞!

本地大语言模型与大型模型(如 Claude 3.5 Sonnet)相比较表现如何?

虽然开源模型与大规模闭源模型之间的差距在迅速缩小,但你仍然会从最大的模型(例如 GPT-4o、Claude 3.5 Sonnet 和 DeepSeek Coder V2 236b)中获得最佳效果。我们目前任务之一是找出更好的提示方法,使用代理,并整体改进平台,以便更好地支持更小的本地大语言模型!

显示了错误:“请求处理时发生错误”

如果在 oTToDev 中看到这个错误,这意味着应用在较高层次上指出了问题,可能意味着多种不同的情况。要找出具体错误,请查看启动应用程序的终端(使用 Docker 或 pnpm)和浏览器中的开发者控制台。你可以按 F12 或在浏览器中右键点击任意位置并选择“检查”来访问开发者控制台,然后转到右上角的“控制台”选项卡。

显示了错误:“x-api-key header missing”

我们看到过几次这个错误,重新启动 Docker 容器就能解决。似乎与 Ollama 特性有关。另一种方法是尝试使用 Docker 或 pnpm 运行 oTToDev,选择你第一次未使用的方式来启动。我们仍在调查为何偶尔会发生这种情况!

运行应用程序时 oTToDev 显示空白预览

我们承诺不断测试新来到 oTToDev 的 PR,预览功能是核心功能,所以应用程序并没有坏!当你获得空白预览或没有看到预览时,这通常是因为大语言模型出现了错误代码或不正确的命令。我们正在努力让这一过程更透明。有时,错误会出现在开发者控制台中,所以也请检查那里的信息。

一切正常,只是结果不好

这就像之前所述,本地大语言模型正在变得越来越强大,但你仍然会得到更好的结果(有时更好)与最大的大语言模型(例如 GPT-4o、Claude 3.5 Sonnet 和 DeepSeek Coder V2 236b)。如果你使用更小的大语言模型如 Qwen-2.5-Coder,目前来说这更多是一种实验和学习体验。它能够很好地构建较小的应用程序,这对于本地大语言模型来说已经非常出色,但对于更大规模的应用,仍然建议使用较大的大语言模型!

Stars
5.0k
Forks
2.0k
Watch
150
MIT License
更新于 2024年12月4日
免责声明:本站大资源来自网络收集整理,小部分资源来自原创,如有侵权等,请联系处理。

相关项目

探索更多类似的开源项目