我们如何构建一个基于 React 和 Node.js 的 GPT Web 应用生成器——从构思到 4 个月内生成 25,000 个应用

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

我们正在开发Wasp——一个基于 React、Node.js 和 Prisma 的全栈 Web 框架。自从 GPT 问世以来，我们就一直在思考能否利用它来进一步加快 Web 应用的构建速度。这促使我们开发了MAGE——一个基于 GPT 的 Web 应用生成器，它可以根据简短的描述生成完整的代码库。

我们之前已经介绍过MAGE 的功能（以及局限性）和底层工作原理。本文将讲述它的起源和应用——我们为什么决定开发它，开发者如何发现它，以及他们实际如何使用它。

为什么要开发另一个人工智能编码代理？

我们进入GPT编码代理领域的时间比较晚。在我们开始考虑开发自己的工具之前，Smol AI、GPT Engineer和MetaGPT等工具就已经备受关注，我们对此也心知肚明。

那么为什么要费这个劲呢？原因在于，这些代理程序都不是专门为构建 Web 应用程序而设计的，而这正是我们看到的机会所在。

虽然使用 GPT 代理进行编码会让人感觉非常有成就感，但它们通常速度很慢，而且容易出错，需要多次迭代，最终使整个过程变得相当繁琐和昂贵。

有了这次经验，我们开始思考：“如果我们开发一个专门针对特定技术栈的 Web 应用程序的编码代理，而只负责这方面的工作，那会怎么样？这能有多容易、多快、多便宜呢？”

虽然我们对此很感兴趣，但由于我们团队规模小，需要兼顾多项任务，所以我们仍然持怀疑态度，几乎放弃了整个项目。结果证明，它的效果甚至比我们预期的还要好。

第一步：建造它🛠️

在决定 MAGE（Magic App Generator）v0 版本的设计时，我们考虑了多种方案。最直接的方案是将其与 Wasp CLI 集成，因为我们已经拥有所有相关的工具。这样，开发者无需运行 `mage-v0` wasp new myProject，只需运行类似 `mage-v0` 的命令，wasp new myProject -ai,CLI 就会提示他们输入应用描述和其他必要信息，然后在终端中完成所有工作。

另一方面，我们也知道，在开始描述应用之前就下载并安装 Wasp 确实有点强人所难。此外，命令行界面 (CLI) 的用户界面功能也相当有限。因此，我们最终选择了 Web 界面——这样用户就能轻松上手，而且我们可以让应用创建流程变得极其简单美观。

构建它花了数周时间，最终成果是一个完全开源的 Web 应用程序，使用 Wasp 制作，可以在https://usemage.ai/免费使用，或者在本地托管以获得更大的控制和灵活性（例如，使用您自己的 OpenAI API 密钥）。

采取非常具体的策略（仅限 Web 应用程序）取得了成功！

如上所述，我们的主要策略是创建一个专门用于构建全栈 Web 应用的编码代理，而事实证明这一策略非常成功。这使我们能够预先为代理提供丰富的上下文信息和结构，并引入专门的启发式方法来修复错误。此外，由于 Wasp 的高级抽象（例如，身份验证、项目结构、查询和操作系统等），我们显著减少了出错的可能性。

另一个结果是执行时间显著缩短，而且，或许更重要的是，成本也降低了。一个典型的由 MAGE 创建的 Web 应用程序的成本在 0.10 美元到 0.20 美元之间，而一般的编码代理创建同样的应用程序可能需要花费高达 10 美元（所有价格均指 OpenAI 于 2023 年 11 月 7 日宣布价格更新之前的价格）。

您可以点击此处阅读更多关于 Wasp 内部工作原理的信息，以及点击此处了解它与其他编码代理的比较。

第二步：启动它🚀

开发产品是一回事，但推广产品并让人们使用它则是另一回事。在我们开发出 MAGE 并在团队内部进行测试之后，问题就变成了：下一步该怎么做？我们如何才能真正接触到开发者并开始获得反馈？

社区启动——生命力证明

由于当时Wasp 社区已经拥有约 1000 名成员，我们在第三周发布会上推出了 MAGE。它是一个很好的测试平台，我们可以看到第一批应用程序正在构建中。然而，还有更多开发者可以从更便捷的方式启动他们的 React 和 Node.js 项目中受益，但他们却无从得知 MAGE 的存在。

在 Product Hunt 上发布——首次“真正”的使用

因此，在内部社区上线后，我们决定将 MAGE 上架到 Product Hunt。虽然 Product Hunt 并非专门针对开发者工具的平台，而且用户背景也十分多元化，但上面仍然聚集了众多开发者，我们之前也曾有过不错的体验。Product Hunt 在Wasp 获得首批用户以及在 GitHub 上达到 1000 颗星的过程中发挥了至关重要的作用，所以我们想再次尝试一下。

有些人会投入大量精力进行产品发布准备，提前几个月就开始筹备，但我们没有那么多时间，只想尽快推出产品。我们邀请朋友和社区成员在 Product Hunt 上查看 MAGE，并在发布当天支持我们。最终，我们成功跻身当日十大产品之列，之后又荣获当周最佳开发者工具第二名！

这就是我们的目标，排名前十的产品会在第二天出现在我们的新闻简报中，供超过100万订阅者阅读。很快，我们就看到应用程序的创建数量显著增加，并且开始有新人加入我们的Discord社区！

有机增长（又称“无所事事”）阶段

在 Product Hunt 上线之后，我们放慢了市场推广的步伐，因为团队需要处理其他与 Wasp 相关的任务。我们必须为即将到来的第四周发布会做准备，所以 MAGE 项目就被搁置了。此外，我们也想先看看社区对它的接受度，再决定是否投入更多资源。

我们又发布了几篇后续文章，比如《底层工作原理》和《MAGE 与通用编码代理的比较》，这些文章获得了一些关注，但并没有引起轰动。我们在 Reddit 和 Hacker News 上也收效甚微，感觉社区似乎已经对人工智能相关的内容感到厌倦了。

尽管如此，使用 MAGE 创建的应用数量仍然持续增长（每天约 200 个应用），偶尔还会出现小规模爆发。我们无法真正追踪用户的来源——MAGE 似乎是通过封闭社区和新闻邮件中的口碑传播而来的。

YouTube 和 TikTok 视频——病毒式传播（每天 1300 次下载！）

第四周发布结束后，我们发现，在近两个月的时间里，MAGE 在我们几乎没有投入任何精力的情况下，持续增长。这表明它具有真正的价值，因此我们决定加大投入。

我们决定尝试与业内有影响力的人士合作。我们不想只是简单地付费投放广告，而是希望找到真正对我们产品感兴趣，并且愿意客观评价 MAGE 的人。我们最终找到了Matthew Berman，他涵盖了法学硕士领域从最新模型到工具的方方面面，并且他认为 MAGE 非常适合他的受众群体。

视频在几周内就制作完成，发布后迅速获得了约 25,000 次观看。许多观众对通过网页界面一次提示即可获取完整栈代码库的想法感到兴奋，我们看到使用量和尝试使用该功能的开发者数量再次激增。

大约一周后，我们发现应用程序创建数量再次出现大幅增长，但却找不到原因。经过一番搜索，我们找到了TikTok上的开发者@techfren，他发布了一个关于此事的短视频（视频里MAGE甚至都没能正常运行！），该视频一天之内就获得了20万的观看量，并迅速走红。如今，它的观看量已接近100万。

现实情况是——所有这些应用程序最终会发生什么？

虽然创建了 25,000 个应用程序听起来很令人印象深刻，但最好还是退后一步，进一步细分一下。

与大多数人工智能驱动的编码工具一样，该领域引起了开发者和非开发者的极大兴趣和好奇心，他们都希望利用这些工具构建自己的产品。许多人甚至还没有具体的项目目标，但他们渴望尝试并了解其运作方式。此外，由于低级逻辑模型（LLM）并非确定性工具，目前还没有任何工具能够完美运行，经常会出现一些需要人工干预和编码知识才能解决的小错误。

尽管我们非常明确地说明了基于GPT的工具所面临的挑战，但 MAGE 仍然吸引了一部分用户，他们热衷于构建自己的产品，但缺乏编程技能，需要帮助才能下载、运行和修复应用程序。另一方面，它也提供了一种非常友好且易于上手的方式，让用户能够参与到 Web 开发和编程中来。我们并不阻止非程序员尝试使用，而是尽可能透明地管理他们的预期。

因此，大约 40% 的所有创建的应用程序都会被下载到本地运行。

结论

我们使用 MAGE 进行的实验取得了成功，甚至超出了我们最初的预期。与许多现有的通用编码代理相比，这种高度专业化和结构化的方法能够以更低的成本产生更好、更稳定的结果。

此外，开发者们也对能够轻松启动全栈应用程序（包含最佳实践）感到兴奋，他们正在积极寻找这样的解决方案，并在彼此之间分享。

我预计人工智能辅助的SaaS启动器将成为Web开发的未来。如果用户能够获得预先配置好数据模型和CRUD逻辑的应用程序脚手架，为什么还要使用通用的样板启动器呢？另一个问题是，究竟由谁来实施，以及如何实施，但我预计未来每个主流框架都会提供类似的功能。

祝你好运！

我希望这篇概述对您有所帮助，并能让您了解在创建和推广一款新的（人工智能驱动的）开发者工具时，幕后究竟发生了什么。请记住，这只是我们独特的经验，每个案例都各不相同，因此请理性看待所有内容，只选择对您和您的产品真正有意义的部分。

祝您好运！如果您有任何疑问或想了解MAGE和Wasp的最新开发进展，欢迎加入我们的 Discord 服务器！