8.0
热点
AI SCORE
编程提效2023-07-11 22:11
AI 全栈生成器：一句话自动生成 React + Node.js 应用
DEV Community · Matija Sosic#AI编程#代码生成#开源
Editor brief · 编辑速览
项目展示 GPT 驱动的端到端代码生成能力，从需求描述快速生成生产级的全栈应用代码。
这个项目最初只是一次实验——我们想知道，给 GPT 一段简短描述，它能否生成一个基于 React 和 Node.js 的全栈 Web 应用。结果远远超出了我们的预期！
要使用 GPT Web App Generator，你只需要用简单的英语简短描述自己的应用创意。你还可以选择应用的品牌色和首选身份验证方式（更多方式即将推出）。
仅此而已——几分钟之内，一套使用 React、Node.js、Prisma 和 Wasp 编写的全栈 Web 应用代码库就会呈现在你眼前。你可以下载代码、在本地运行，并通过一条 CLI 命令完成部署！
在这里观看完整的一分钟演示：
如果你对 Generator 的实现技术细节感兴趣，可以看看这篇博客文章！
除了 React 和 Node.js，GPT Web App Generator 还使用了 Prisma 和 Wasp。
Prisma 是一个构建于 PostgreSQL 之上的类型安全数据库 ORM，可以让数据模型和数据库迁移的处理变得更加简单。
Wasp 是一个开箱即用的 React 和 Node.js 全栈框架。它覆盖了从前端、后端到数据库的方方面面，同时还提供身份验证、邮件发送、异步任务、部署等功能。
此外，GPT Web App Generator 背后的所有代码都是完全开源的，包括 Web 应用和 GPT code agent。
由于这是一个由 GPT 驱动的项目，它的输出并非 100% 确定，生成的代码偶尔会出现一些小错误。对于下面展示的典型 Web 应用示例，这些错误通常都很轻微，修复起来也很直接。如果你遇到困难，可以在我们的 Discord 上联系我们。
生成的应用都是全栈应用，由前端、后端和数据库组成。下面是我们成功创建的一些示例：
在这里查看生成的代码并亲自运行
这个应用的功能和它的名字完全一致——确保你按时给植物浇水！它包含功能完整的前端、后端和数据库，数据库中有 User 和 Plant 实体。它还提供了完整的全栈身份验证（用户名和密码），以及基于 Tailwind 的设计。
下一步可以加入更多高级功能，例如到了给植物浇水的时间时，通过 Wasp 的邮件发送支持发出邮件提醒。
你可以查看并下载完整的源代码，添加更多功能，然后自行部署应用！
在这里查看生成的代码并亲自运行
如果连 ToDo 应用都没有，这还能算什么演示？GPT Web App Generator 成功搭建了它的基础框架，并实现了所有基本功能，包括创建任务和将任务标记为已完成。
有了这些基础能力，包括全栈代码、身份验证和 Tailwind CSS 设计，你可以在这里查看并下载代码，亲自试一试！
为了降低复杂度，从而减少 GPT 犯错的概率，在 Generator 的第一个版本中，我们对生成的应用设置了以下限制：
不允许添加额外的 npm 依赖。
除 Wasp Pages（React）和 Operations（Node）之外，不允许添加其他文件。也就是说，不能添加包含 React 组件、CSS、工具类 JavaScript、图片或类似内容的文件。
不使用 TypeScript，只使用 Javascript。
不使用 Wasp 的高级功能，例如 Jobs、Auto CRUD、Websockets、Social Auth、邮件发送等。
如前文所述，我们的目标是验证 GPT 能否被有效用于生成基于 React 和 Node.js 的全栈 Web 应用。现在答案显然是肯定的，同时我们也有许多关于新功能和改进的想法。
我们原本以为，主要问题会是 GPT 的上下文容量，但事实证明，更大的问题在于它的“聪明程度”。这会影响它的规划能力、遵循给定指令的能力——看到它有时完全无视我们的指令，我们着实笑了不少次——以及避免犯低级错误的能力。我们发现 GPT4 的结果优于 GPT3.5，但两者仍然都会犯错，而且 GPT4 的速度也相当慢、成本相当高。因此，我们对 AI 和 LLM 领域未来的发展非常期待，因为这些进展会直接影响像 Generator 这类工具的输出质量。
收集大家对这次初步实验的反馈，包括对 Generator 的反馈，以及对 Wasp 框架本身的反馈。向我们提供反馈的最佳场所是 Discord。
进一步改进 code agent 和 Web 应用。
发布新版 wasp CLI，让用户可以通过 CLI 提供一段简短描述来生成新的 Wasp 项目。随后，我们的 code agent 会使用 GPT 在磁盘上生成项目。这项功能已经准备就绪，应该很快就会发布。
让 Wasp 用户也可以使用 code agent 搭建 Wasp 应用的特定部分。想添加一个新的 Wasp Page（React）？通过 Wasp CLI 或 Wasp vscode extension 运行我们的 code agent，它就能帮你生成页面，并且连初始逻辑也会一并实现。
随着 LLM 的发展，尝试一些替代方案。例如，使用 Wasp 相关知识对 LLM 进行 fine-tuning，或者在生成文件和代码库各个部分时给予 LLM 更大的自由度。
撰写一篇详细的博客文章，介绍我们如何实现 Generator、使用了哪些技术、如何设计 prompt、哪些方法有效、哪些方法无效等。
如果你愿意支持我们正在做的事情，可以考虑在 Github 上给我们一个 star！我们在 Wasp 所做的一切都是开源的，你的支持不仅能激励我们，也能帮助我们继续简化 Web 应用开发，减少样板代码。