AI自动化制作web和手机应用软件的利器：bolt.new

skywalk8163

已于 2025-04-11 10:38:07 修改

阅读量1.1k

点赞数 9

分类专栏：人工智能文章标签：自动化人工智能

于 2025-04-11 10:37:25 首次发布

本文链接：https://blog.csdn.net/skywalk8163/article/details/147043768

版权

人工智能专栏收录该内容

254 篇文章

订阅专栏

直接点开官网就可以体验自动化制作web和手机应用软件：bolt.new

开源代码：https://github.com/stackblitz/bolt.new

bolt.new：浏览器中的AI驱动全堆栈Web开发

Bolt.New是AI驱动的Web开发代理，可直接从浏览器中提示，运行，编辑和部署全堆栈应用程序，而无需本地设置。如果想使用bolt开源代码库来构建自己的AI驱动Web Dev代理，单击此处开始！

是什么使bolt不同

Bolt.new脱颖而出的地方：

浏览器中的全栈：Bolt.New将尖端AI模型与浏览器内开发环境Stackblitz的WebContainers相结合。这使您可以：
- 安装和运行NPM工具和库（例如Vite，Next.js等）
- 运行node.js服务器
- 与第三方API互动
- 通过聊天部署到生产
- 通过URL分享您的工作
AI具有环境控制：与传统的开发环境不同，AI只能协助代码生成，Bolt.new提供了AI模型完全控制在整个环境中，包括文件系统，节点服务器，软件包管理器，终端和浏览器控制台。这使AI代理能够处理整个应用程序生命周期，从创建到部署。

无论您是经验丰富的开发人员，PM还是设计师，Bolt.New都可以轻松构建生产级全栈应用程序。

对于有兴趣使用WebContainers构建自己的AI驱动开发工具的开发人员，请查看此存储库中的开源Bolt 代码库！

技巧和窍门

这里有一些技巧可以充分利用Bolt.New：

具体说明您的堆栈：如果您想使用特定的框架或库（例如Astro，Tailwind，ShadCN或任何其他流行的JavaScript框架），请在初始提示中提及它们，以确保螺栓脚手架相应地将项目脚手架。
使用增强提示图标：在发送提示之前，请尝试单击“增强”图标以使AI模型帮助您完善提示，然后在提交之前编辑结果。
首先脚手架，然后添加功能：确保您的应用程序的基本结构在潜入更高级功能之前就已经到位。这有助于螺栓了解您的项目的基础，并确保在构建更高级功能之前将所有内容都接线。
批处理简单说明：通过将简单的说明组合到一条消息中来节省时间。例如，您可以要求Bolt更改配色方案，添加移动响应能力并重新启动Dev Server，一方面可以节省您的时间并大大减少API信用消耗。

常见问题解答

我在哪里注册付费计划？
Bolt.new可以免费开始。如果您需要更多的AI令牌或需要私人项目，则可以在您的Bolt.New设置，在应用程序的左下角。

如果我达到免费使用限制会发生什么？
一旦达到了免费的日常代币限制，就会暂停AI互动，直到第二天或升级计划为止。

Bolt是Beta吗？
是的，Bolt.New在Beta中，我们正在根据反馈积极改进它。

如何报告Bolt 新问题？
查看问题部分报告问题或请求新功能。请使用搜索功能检查其他人是否已经提交了相同的问题/请求。

目前哪些框架/库在Bolt 上工作？
Bolt.New支持最受欢迎的JavaScript框架和库。如果它在stackblitz上运行，它也将在Bolt 上运行。

如何添加确保我的框架/项目在螺栓中运行良好？
我们很高兴与JavaScript生态系统合作以提高Bolt 中的功能。通过通过hello@stackblitz.com讨论我们如何合作！

部署在本地

依赖安装

需要使用pnpm

先安装pnpm

安装pnpm

npm install pnpm

如果不行就

npm install -g pnpm

升级pnpm

使用命令pnpm add -g pnpm升级，如果升级报错：

pnpm add -g pnpm
 ERR_PNPM_NO_GLOBAL_BIN_DIR  Unable to find the global bin directory

Run "pnpm setup" to create it automatically, or set the global-bin-dir setting, or the PNPM_HOME env variable. The global bin directory should be in the PATH.

那么升级之前，可能需要先setup一下：

pnpm setup

然后升级即可。

pnpm add -g pnpm

如果报错：

pnpm add -g pnpm
 ERR_PNPM_GLOBAL_PNPM_INSTALL  Use the "pnpm self-update" command to install or update pnpm

就按照提示用这条命令升级：

pnpm self-update

升级完成：

pnpm self-update
Nothing to stop. No server is running for the store at E:\.pnpm-store\v10
The current project has been updated to use pnpm v10.8.0

下载bolt源代码

下载源代码

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

进入目录并安装

cd bolt.new
pnpm install

安装显示

pnpm install
Lockfile is up to date, resolution step is skipped
Packages: +1082
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

   ╭──────────────────────────────────────────────────────────────────╮
   │                                                                  │
   │                Update available! 9.4.0 → 10.8.0.                 │
   │   Changelog: https://github.com/pnpm/pnpm/releases/tag/v10.8.0   │
   │                Run "pnpm add -g pnpm" to update.                 │
   │                                                                  │
   │         Follow @pnpmjs for updates: https://x.com/pnpmjs         │
   │                                                                  │
   ╰──────────────────────────────────────────────────────────────────╯

Progress: resolved 1082, reused 0, downloaded 191, added 186

参考前面的步骤，将pnpm升级到10.8.0版本。

安装完成显示：

╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│   Ignored build scripts: esbuild, workerd.                                                 │
│   Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.   │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯

Done in 4m 2.2s using pnpm v10.8.0

配置

写了一个文件

notepad .env.local

文件内容：ANTHROPIC_API_KEY=XXX

当然暂时还没有ANTHROPIC账号。所以试试本地服务器是否可行：

ANTHROPIC_API_KEY=XXX
ANTHROPIC_URL_BASE=http://192.168.1.5:1337/v1

不可行，它是绑定了 ANTHROPIC模型的，如果想用其它模型，可以使用这个项目：https://github.com/stackblitz-labs/bolt.diy

启动

pnpm run dev

启动后显示：

pnpm run dev

> bolt@ dev E:\work\bolt.new
> remix vite:dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

这时候使用浏览器登录http://localhost:5173/ ，即可开始自动化制作web项目啦！

测试生成打飞机游戏

可以在自己本地或官网，用这条prompt试试：

帮我建一个类似“雷电”打飞机的游戏页面，使用html5，飞机可以左右移动，用左右方向键移动。景物和障碍从上向下滚动。按空格键发射子弹，子弹击中障碍物后，障碍物消失，并得10分。点击“开始游戏”开始，得分达到100分通关，输出“恭喜通关！”

在官网，第一次就出现了飞机，能左右移动，能发射子弹。

在第二次，说了：“景物和障碍从上向下滚动。按空格键发射子弹，子弹击中障碍物后，障碍物消失，并得10分。”后出现了背景

第三次，说了：“障碍从上向下滚动” ，还是没出现障碍物

总体感觉不错，但是深入比较的话，感觉比DeepSite要稍微逊色一点。

总结

bolt.new非常棒！它的特长是全栈解决方案！

不过感觉比DeepSite要稍微逊色一点。固定使用anthropic的claude-3-5-sonnet-20240620模型，这使它的AI能力大打折扣。

url: 'https://api.anthropic.com/v1/messages',

model: 'claude-3-5-sonnet-20240620',

调试

报错[plugin:vite:css] Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install -D sass-embedded`.

按照提示安装上

报错：[vite] Internal server error: Cannot find module '@ai-sdk/openai' imported from 'E:/github/bolt.new/app/lib/.server/llm/model.ts'

安装openai

npm install openai

发现不行，需要这样

npm install @ai-sdk/openai

搞定

修改大模型后，还是用的老模型

url: 'https://api.anthropic.com/v1/messages',
requestBodyValues: {
model: 'claude-3-5-sonnet-20240620',
top_k: undefined,
max_tokens: 8192,
temperature: 0,
top_p: undefined,
stop_sequences: undefined,
system: '\n' +

修改app\lib\.server\llm\switchable-stream.ts文件，改成

export function streamText(messages: Messages, env: Env, options?: StreamingOptions) {
  return _streamText({
    model: getOpenAIModel(getAPIKey(env)),
    system: getSystemPrompt(),
    maxTokens: MAX_TOKENS,
    headers: {
      'anthropic-beta': 'max-tokens-3-5-sonnet-2024-07-15',
    },
    messages: convertToCoreMessages(messages),
    ...options,
  });
}

执行 pnpm run dev报错pnpm : 无法将“pnpm”项识别为 cmdlet、函数、脚本文件或可运
确，然后再试一次。

npm install -g pnpm

ok了

报错： getOpenAIModel is not defined

发现stream-text.ts文件中缺少对getOpenAIModel函数的导入，需要添加正确的导入语句。

报错ERROR: Unexpected "OpenAI"

[plugin:vite:esbuild] Transform failed with 1 error:
E:/github/bolt.new/app/routes/api.chat.ts:34:15: ERROR: Unexpected "OpenAI"

E:/github/bolt.new/app/routes/api.chat.ts:34:15

Unexpected "OpenAI"
32 |          messages.push({ role: 'assistant', content });
33 |          messages.push({ role: 'user', content: CONTINUE_PROMPT });
34 |          import OpenAI from 'openai';
   |                 ^
35 |          const openai = new OpenAI({
36 |    baseURL: 'http://192.168.1.5:1337/v1',

主要是自己手工加了一句import OpenAI from 'openai';

注意要放到文件头部。

报错解决了，但是一直没有输出，先放弃。

本地部署后，只加了base_url未修改任何代码，对话框输入信息无反应

等了一段时间后，可以响应了，发现并没有改变模型的调用：

  cause: undefined,
  url: 'https://api.anthropic.com/v1/messages',
  requestBodyValues: {
    model: 'claude-3-5-sonnet-20240620',
    top_k: undefined,
    max_tokens: 8192,
    temperature: 0,
    top_p: undefined,
    stop_sequences: undefined,

找到另一个项目，支持各种大模型，请转战：https://github.com/stackblitz-labs/bolt.diy