超强辅助,Bolt.diy 一步搞定创意建站

简介: Bolt.new 是 stackblitz 推出的一款 AI 编辑器,结合人工智能与 WebContainers 技术,支持无需复杂配置的完整开发环境。其开源版本 Bolt.diy 基于阿里云百炼模型服务和函数计算 FC,提供灵活定制、全栈开发支持及多模型适配能力。

本方案现在支持免费试用,点击https://www.aliyun.com/solution/tech-solution-deploy/2878871方案链接即可体验

领取免费额度,一键部署Bolt.diy:https://www.aliyun.com/solution/tech-solution/fc-bolt-diy?utm_content=g_1000403257


Bolt.new是stackblitz推出的一款AI编辑器,作为一个在线开发沙盒平台,结合了人工智能(AI)和WebContainers技术,其优势在于无需复杂配置即可在完整的开发环境下完成AI驱动的开发流程。但是由于Bolt.new是一个在线平台,因此它完全依赖于网络连接。在网络不稳定或中断的情况下,可能会导致开发流程中断或数据丢失。且虽然Bolt.new支持多种主流浏览器,但在某些特定浏览器或旧版本浏览器中可能会存在兼容性问题。这可能会限制某些开发者的使用。[1]


Bolt.diy 是 Bolt.new 的一个开源版本,它提供了更高的灵活性和可定制性,通过自然语言交互简化开发流程,并提供全栈开发支持,同时允许用户二次开发。基于函数计算 FC 搭建并集成阿里云百炼模型服务,可以实现 Bolt.diy 的快速云端部署。


对于个人开发者,即便是无全栈开发经验也可快速上手,快速验证创意可行性;进一步可实现多模型对比、快速构建 AI 增强型应用;对于企业用户,还能够轻松实现内部业务系统与 AI 能力深度整合,定制 AI 解决方案!


5 分钟实现部署,打造专属 Bolt.diy

本文旨在介绍如何将 Bolt.diy 部署到云上,通过云原生应用开发平台 CAP 构建 Web 服务,通过其提供的函数计算资源,结合百炼的模型服务能力,采用deepseek-v3实现代码生成,可即时查看生成的代码及运行预览效果,体验流畅高效的开发流程。借助 CAP还可以快速便捷地部署开源项目,而无需担心底层资源管理和运维问题,从而专注于应用的创新和开发。

(云原生应用开发平台 CAP 提供免费使用,其基于函数计算构建 Web 服务 按量计费,百炼和函数计算提供了免费试用额度;如果免费试用额度已耗尽,体验本方案预计成本不超过 10 元。)


多模型灵活适配

支持多种大语言模型(如 OpenAI、DeepSeek、Gemini、Hugging Face 等),用户可根据场景需求为不同任务指定特定模型,提升任务匹配度。


可扩展性与高度定制化

采用模块化架构,支持自定义 Docker 服务和集成第三方工具,提供了高度的灵活性。支持通过插件扩展,甚至集成本地私有模型(如自训练的LLM)。


全栈开发全流程覆盖

通过自然语言交互生成前后端代码(如 React 前端、Node.js 服务端),支持实时调试、版本管理和一键部署。内置可视化工具管理 SQL/NoSQL 数据库,支持自动生成数据模型和 API 接口。


智能化辅助工具

AI 实时分析代码错误并生成修复建议,减少手动调试时间。同时,提供代码结构图谱和依赖关系可视化,帮助快速理解复杂项目。


部署流程


准备账号

开始部署前,请按以下指引完成账号申请、账号充值。如果没有阿里云账号,访问阿里云账号注册页面[2],根据页面提示完成注册。记得领取阿里云百炼提供的新人免费额度[3]以及函数计算提供的试用额度(在此领取[4])。额度消耗完后按量计费。首次访问阿里云百炼大模型服务平台[5]或首次使用函数计算服务控制台[6],均需根据页面提示完成开通及授权。


部署应用

1. 点击前往部署[7]打开云原生应用开发平台 CAP 项目模板,参数选择默认配置,然后单击部署项目,最后在弹出面板中单击确认部署,部署预计等待 1 分钟。


说明:首次使用云原生应用开放平台 CAP 会自动跳转到访问控制快速授权页面,滚动到浏览器底部单击确认授权,等待授权结束后单击返回控制台


2. 部署完成后,类似下图所示。


访问示例应用


1. 应用部署完成之后按照下图找到访问地址。

2. 点击访问地址,在浏览器中,会自动跳转为 HTTPS 链接地址。提示安全证书警告或错误,可以选择点击高级选项,然后点击继续前往以访问该网站。


说明:Bolt.diy 底层依赖 WebAssembly,其中用到了 SharedArrayBuffer。为了满足跨源隔离的要求并确保安全地使用如 SharedArrayBuffer 这样的功能,Bolt.diy 需要保证其所有资源均通过 HTTPS 协议提供。

3. 进入示例应用。

说明:首次进入应用 3 秒后将自动刷新页面加载默认配置。


获取并配置百炼 API-KEY

1. 获取百炼 API-KEY。

  • 登录阿里云百炼大模型服务平台[5]。
  • 单击顶部应用,在左侧导航栏单击API-Key。
  • 选择全部API-KEY或我的API-KEY,然后创建或查看API-KEY。


说明


1)仅主账号拥有查看全部API-KEY的权限。主账号可以获取所有子账号的API-KEY,子账号仅能获取自己的API-KEY。


2)请不要将API-KEY以任何方式公开,避免因未经授权的使用造成安全风险或资金损失。


  • 单击操作列中的复制按钮,复制API KEY。


2. 配置百炼 API-KEY。

  • 按照下图所示,单击编辑按钮。

  • 输入百炼 API-KEY ,然后点击对号,保存配置。

  • 配置完成如下图所示。


使用提示词进行创作

  1. 按照下图所示单击提示词进行创作。

说明

本方案推荐使用deepseek-v3模型进行代码生成,如果需要尝试其它模型可以下拉更改模型。

2. 工作区域说明,如下图所示。

3. 代码自动生成中如下图所示。

4. 如果出现下图所示,说明代码生成结束。

5. 预览网页(相同提示词在 AI 生成过程中存在一定的差异)。

说明

1. 如果出现下图错误提示,不能自动预览可以尝试执行命令npm install安装依赖,然后执行命令npm run dev运行项目。

2. 如果出现 Terminal Error 错误可以单击 Ask Bolt,让 AI 自动处理问题。

3. 如果出现如下图所示,请在右侧命令行,执行命令Ctrl+C结束进程,然后执行npm run dev命令。

4. 如果在预览界面中出现错误,可以复制错误信息发送给模型进行修复。


下载代码


1. 如果 AI 编写的代码已符合需求,在Terminal中输入npm run build并敲击回车执行。

2. 待命令执行完成后,左侧的Files中会新增一个名为dist的文件夹。之后点击上方的Download Code下载代码压缩文件。

说明:当前测试域名由 Serverless Devs 社区所提供,仅供学习和测试使用,不可用于任何生产使用,域名有效期为 1 天,如果需要用于生产环境建议配置自定义域名,详细配置方式请参考:配置自定义域名[8]。


此外,还支持将生成的代码部署到自主管理的云服务器环境,实现完全可控的应用托管。适用于需要独立控制服务器资源、进行网络隔离或长期运行的生产环境场景。具体的操作步骤可以点击阅读原文查看。


清理资源

最后,记得清理资源,处理对应产品的实例,避免继续产生费用:


1. 删除云原生应用开发平台 CAP 项目:


登录云原生应用开发平台 CAP 控制台[9],在左侧导航栏,选择项目,找到部署的目标项目,在操作列单击删除,然后根据页面提示删除项目。


2. 删除百炼 API-KEY

在 API-KEY 管理[10]页面,找到目标 API-KEY ,单击右侧操作列下的删除,根据页面提示进行删除。


3. 如果体验了部署代码(可选)环节,还需释放以下资源:

  • 释放云服务器ECS实例:

登录ECS控制台[11],在实例页面,找到目标实例,然后在操作列选择 image.png 释放,根据界面提示释放实例。

  • 删除交换机:

登录专有网络控制台[12],在交换机页面,找到目标交换机,然后在操作列单击删除,按照界面提示删除实例。


  • 删除安全组:

登录ECS 控制台[11],在安全组页面,找到目标安全组,然后在操作列单击删除,按照界面提示删除安全组。


  • 释放专有网络VPC:

登录专有网络控制台[12],在专有网络页面,找到目标VPC,然后在操作列单击删除,按照界面提示释放实例。


参考链接:

[1]https://www.cnblogs.com/wintersun/p/18454619

[2]https://account.aliyun.com/register/qr_register.htm

[3]https://help.aliyun.com/document_detail/2766612.html

[4]https://help.aliyun.com/document_detail/2665971.html

[5]https://bailian.console.aliyun.com/

[6]https://fcnext.console.aliyun.com/

[7]https://cap.console.aliyun.com/create-project?template=cap-bolt-diy&from=solution

[8]https://help.aliyun.com/document_detail/2513616.html

[9]https://cap.console.aliyun.com/

[10]https://bailian.console.aliyun.com/?apiKey=1&tab=app#/api-key

[11]https://ecs.console.aliyun.com/

[12]https://vpcnext.console.aliyun.com/vpc/cn-hangzhou/switches


来源  |  阿里云开发者公众号

相关文章
|
7月前
|
人工智能 JSON 自然语言处理
除了MCP我们还有什么?
本文详细描述 agents.json ,涵盖了其背景、工作原理、与 OpenAPI 的关系等内容。
578 94
除了MCP我们还有什么?
|
7月前
|
人工智能 自然语言处理 供应链
为什么一定要做Agent智能体?
作者通过深入分析、理解、归纳,最后解答了“为什么一定要做Agent”这个问题。
1331 41
为什么一定要做Agent智能体?
|
7月前
|
人工智能 运维 JavaScript
当AI学会了自我升级,天网还会远吗?
文章通过一个模拟侦探游戏的例子展示了AI如何通过“自我升级”和动态执行代码的能力来解决复杂问题。
321 33
当AI学会了自我升级,天网还会远吗?
|
7月前
|
人工智能 自然语言处理 运维
Bolt.diy 一键部署,“一句话”实现全栈开发
Bolt.diy 是 Bolt.new 的开源版本,提供更高灵活性与可定制性。通过自然语言交互简化开发流程,支持全栈开发及二次开发,使零基础开发者也能实现从创意到云端部署的完整链路。本方案基于阿里云函数计算 FC 搭建,集成百炼模型服务,快速完成云端部署。用户可通过对话开启首个项目,两步完成部署并获300社区积分。方案优势包括多模型适配、高度定制化、全栈开发支持及智能化辅助工具,助力高效开发与创新。
778 103
|
7月前
|
人工智能 IDE API
10行代码,实现你的专属阿里云OpenAPI MCP Server
本文介绍如何用10行Python代码创建专属阿里云OpenAPI MCP Server。针对传统MCP Server工具固化、开发复杂等问题,提出借助alibaba-cloud-ops-mcp-server实现灵活拓展的方案。通过配置服务与API名称,运行简短代码即可生成支持SSE连接的MCP Server。用户无需深入了解阿里云OpenAPI细节,大幅降低开发门槛。未来将探索通用工具设计,实现固定工具调用任意API,进一步提升灵活性与效率。
|
6月前
|
存储 人工智能 安全
MCP 规范新版本特性全景解析与落地实践
MCP Specification 在 2025-03-26 发布了最新的版本,本文对主要的改动进行详细介绍和解释
1455 145
|
6月前
|
机器学习/深度学习 设计模式 人工智能
深度解析Agent实现,定制自己的Manus
文章结合了理论分析与实践案例,旨在帮助读者系统地认识AI Agent的核心要素、设计模式以及未来发展方向。
1908 103
深度解析Agent实现,定制自己的Manus
|
7月前
|
人工智能 前端开发 搜索推荐
利用通义灵码和魔搭 Notebook 环境快速搭建一个 AIGC 应用 | 视频课
当我们熟悉了通义灵码的使用以及 Notebook 的环境后,大家可以共同探索 AIGC 的应用的更多玩法。
715 124
|
6月前
|
机器学习/深度学习 存储 人工智能
浅入浅出——生成式 AI
团队做 AI 助理,而我之前除了使用一些 AI 类产品,并没有大模型相关的积累。故先补齐一些基本概念,避免和团队同学沟通起来一头雾水。这篇文章是学习李宏毅老师《生成式 AI 导论》的学习笔记。
618 27
浅入浅出——生成式 AI