使用开源 AI 应用构建器开发并自托管全栈 Next.js 应用

这个 AI 应用构建器的功能

这款开源 Web 应用可将自然语言提示转换为完整的全栈 Next.js 项目。你无需手动组装前端、后端、数据库、托管环境、身份验证流程和部署管线，只需描述想要的应用，并通过实时浏览器预览跟踪其构建过程。

生成的应用是真实的 Next.js 项目，而不是受限的无代码产物。你可以检查和修改每个文件，将项目连接到 GitHub，绑定自定义域名，并将其部署到 Vercel、Docker 或其他 Node.js 环境。

该构建器还针对多租户使用场景进行了设计。项目在隔离沙箱中运行，并可按用户、团队或客户进行分隔，因此既适合个人开发，也适合嵌入其他产品中提供应用生成能力。

主要功能

从提示生成应用

使用自然语言输入应用创意，AI 即可生成全栈 Next.js 应用。智能体工作时，实时预览会持续刷新，让你无需等待单独的构建和部署周期即可查看进度。

可视化编辑与源代码编辑

你可以在预览中选择一个元素，并修改文本或颜色等属性。构建器会将修改写回相关源代码行，并自动重新构建项目。对于更深层次的修改，集成的 Monaco 编辑器可访问每个生成的文件，提供类似 Visual Studio Code 的编辑体验。

内置项目基础设施

• 每个项目配备专用 SQL 数据库，并分别提供开发环境和线上环境。
• 支持浏览记录、运行查询、检查架构和迁移，以及创建备份。
• 提供项目分析、用量限制、环境变量、密钥、计划任务、运行时日志、移动端构建、支付和设置等控制项。
• 为生成的应用提供托管、SSL、CDN 支持和部署管线。
• 提供隔离沙箱，项目闲置后可按需唤醒。

版本管理与可移植性

每次 AI 构建都会创建一个可恢复的检查点。差异查看器可以识别版本之间的变化；如果生成的更新未达到预期，还可以恢复到之前的状态。项目也可以通过导入代码进行复制或转移。

集成与部署选项

• 支持双向 GitHub 同步，可推送和拉取更改。
• 支持 Figma 画板链接，智能体可将其用作设计来源。
• 提供自定义域名、引导式 DNS 配置和 HTTPS 支持。
• 可部署到 Vercel、Docker 或标准 Node.js 环境。
• 为面向客户的产品提供白标和多租户基础能力。

技术栈

该构建器使用 Next.js 16 和 React 19，包含 App Router、服务器组件和流式传输。TypeScript 提供端到端类型安全，Tailwind CSS 4 则提供样式系统。

Monaco 为基于浏览器的代码编辑器提供支持。界面还使用了 Radix UI、Lucide 图标、Sonner 通知和 cmdk 命令面板。依赖范围经过有意精简：项目不捆绑身份验证、支付或 AI SDK，而是通过单个 API 密钥进行通信。

安装要求

文档中的安装程序面向 Windows，要求如下：

• 操作系统：Windows 10 或 Windows 11。
• Shell：PowerShell 5.1 或 PowerShell 7 及更高版本。
• 网络：需要联网，以下载安装脚本和所需的项目文件。
• 权限：普通用户账户即可。

README 未提供手动安装软件包的命令，也未列出安装程序提示。请使用项目发布的 PowerShell 安装页面，并按照页面显示的说明操作。

设置构建器

1. 确认 PowerShell 版本。打开 PowerShell，确认环境满足最低要求。
2. 打开安装页面。访问项目提供的 PowerShell 安装链接。
3. 运行前检查脚本。与任何远程下载的 PowerShell 脚本一样，请检查其内容，并确认来源是预期的项目发布者。
4. 运行文档中的安装流程。按照安装页面上的当前说明操作，不要依赖未列出的命令。
5. 配置 API 密钥。构建应用需要 API 密钥。README 说明该密钥通过一个环境变量提供，但没有说明变量名称。请使用已安装项目配置文档中显示的名称和值格式。
6. 启动 Web 应用。按照安装程序或本地项目文档提供的启动流程操作，然后在浏览器中打开显示的本地地址。

源代码可以免费运行，但 AI 构建会消耗 API 额度。README 表示可免费获得初始额度，随着使用量增加将产生费用。

创建你的第一个应用

1. 从明确的提示开始

描述目标用户、主要页面、数据和预期操作。相比宽泛的指令，具体的请求能为智能体提供更清晰的实现目标。

构建一个客户反馈门户，包含公开提交表单、按状态列出反馈的仪表板，以及团队成员可以更新每条反馈的详情页。

此示例符合构建器文档所述的功能范围：完整的全栈 Next.js 生成、基于数据库的行为，以及基于浏览器的编辑。在将其视为可用于生产环境之前，请先检查生成的实现。

2. 查看实时预览

在代理生成文件并重新构建应用程序时，保持预览可见。沙盒界面会报告其状态，包括空闲环境正在唤醒的情况，而不是静默地显示为失败。

3. 以可视化方式优化界面

需要进行小幅设计调整时，选择预览中的元素。例如，可以直接在预览中更改标题、按钮标签或颜色。相应的源代码会自动更新并重新构建。

4. 检查生成的代码

打开 Monaco 编辑器，检查生成的路由、组件、数据库访问代码和配置。由于输出是标准的 TypeScript 和 Next.js 代码库，你可以手动优化，并完全掌控最终结果。

5. 处理项目数据

使用数据库面板检查架构和迁移，浏览或编辑记录，以及运行 SQL 查询。将开发数据与线上数据分开，并在执行重大的架构或数据更改前创建备份。

6. 发布应用程序

实时预览可以发布到公开地址。之后，你可以连接现有域名，或通过界面购买域名。域名控制支持裸域名、www. 地址或自定义子域名，同时提供 DNS 状态和 HTTPS 重定向功能。

连接 GitHub 仓库

当你希望让代码参与团队常规开发流程时，可以将生成的项目连接到 GitHub 仓库。同步支持双向操作，因此你可以将生成的更改推送到仓库，也可以将外部更改拉回构建器。

1. 创建或选择用于存放应用程序的仓库。
2. 通过构建器的 GitHub 集成功能连接仓库。
3. 推送一个经过确认可正常工作的生成检查点。
4. 通过常规审核流程进行外部更改。
5. 将这些更改拉入构建器，并在实时预览中验证。

避免同时在两个位置编辑同一区域。频繁进行小规模同步，可以更容易地理解和解决冲突。

高级使用技巧

从 Figma 设计生成

如果已经有设计，可以将 Figma 画板链接粘贴到聊天中。代理可以直接根据该画板构建，从而减少手动将设计转换为提示词的需要。请检查结果的响应式行为和应用逻辑，因为这些内容可能未体现在静态设计中。

重大修改前使用检查点

在要求进行大规模架构或视觉更改前，确保存在一个稳定的检查点。生成后，使用差异查看器准确检查修改内容。如果更新引入回归问题，请恢复之前的检查点，而不是手动撤销每个文件的更改。

分离开发数据与线上数据

先针对开发数据库测试迁移和查询。在更改线上架构前备份重要记录，并确认环境变量和密钥已分配到目标环境。

选择合适的部署目标

Vercel 是 Next.js 应用程序的自然部署目标，而 Docker 可以提供可移植性以及对运行时更严格的控制。标准 Node.js 主机同样受支持。无论选择哪种方案，都请验证其与 Next.js 16、项目环境变量、数据库连接、SSL 和域名配置的兼容性。

规划多租户所有权规则

项目隔离功能已内置，但面向客户的产品仍需要明确的授权和所有权检查。定义哪些用户或团队可以创建、查看、修改、发布、导出或删除每个项目。

生产环境安全警告

构建器在发布时刻意不包含登录功能。任何能够访问公开构建器 URL 的人，都可能使用已配置 API 密钥的额度。除非添加身份验证和项目所有权检查，否则不要将构建器本身发布给不受信任的用户。

• 在公开使用前添加你偏好的身份验证系统。
• 为每项项目级操作执行授权检查。
• 保护 API 密钥、项目密钥和环境变量。
• 设置使用量和支出限额。
• 检查运行时日志和分析数据，以发现异常活动。
• 在允许客户访问前测试租户隔离。

README 说明这些扩展已经预留了相关钩子，但并未声称默认安装适合不受限制的公开访问或已具备安全性。

许可说明

README 的许可部分称项目采用 MIT License 发布，并引导用户查看仓库中的 LICENSE 文件以了解法律条款。然而，所提供 README 顶部显示的徽章却写着 LGPL 2.1。由于两种说法存在冲突，请在修改、再分发、嵌入或销售软件之前，检查你所安装版本中的实际 LICENSE 文件。

结语

这款 AI 应用构建器将基于提示词的生成与实时预览、完整源代码访问、SQL 数据工具、GitHub 同步、检查点、域名和灵活部署相结合。首先使用 Windows PowerShell 安装程序，配置文档中说明的 API 密钥变量，生成一个范围明确的应用，然后通过可视化编辑器和代码编辑器不断完善。在向真实用户提供服务之前，请添加身份验证、所有权强制校验和支出保护措施。