800+ IT
News
als RSS Feed abonnieren📚 How we built a GPT Web App Generator for React & Node.js - from idea to 25,000 apps in 4 months
💡 Newskategorie: Programmierung
🔗 Quelle: dev.to
We’re working on Wasp - a full-stack web framework built on React, Node.js, and Prisma. Since GPT came out, we wondered if we could use it to make building web apps even faster. That led us to MAGE - a GPT-powered web app generator that can create a full-stack codebase based on a short description.
We already wrote about what MAGE can (and can’t) do and how it works under the hood. This is the story about its origin and adoption - why we decided to build it, how developers discovered it, and what they’re actually doing with it.
Why build another AI coding agent?
We got into the whole GPT coding agent game quite late. Tools such as Smol AI, GPT Engineer, and MetaGPT had already received lots of attention before we even started thinking about creating our own, and we were well aware of it.
So why bother? Well, the thing was, none of these agents were explicitly made for building web apps, and that’s where we saw an opportunity.
Although using GPT agents for coding can feel super empowering, they can often be slow and miss the point, requiring many iterations and ultimately making the process fairly cumbersome and expensive.
With this experience, we wondered, “What if we made a coding agent highly specialized for web applications in a specific stack and nothing else? How much easier, faster, and cheaper could it be?”
Although we were intrigued by this, being a small team juggling multiple priorities, we were still quite skeptical and almost dropped the whole project. Turns out, it worked even better than we expected.
Step 1: Build it 🛠️
When deciding what v0 of MAGE (Magic App GEnerator) would look like, we considered multiple options. The first, most straightforward one was integrating it with the Wasp CLI, since we already had all the tooling around it. Then developers, instead of running wasp new myProject, would run, e.g., wasp new myProject -ai, and CLI would ask them for app description and other required inputs, and then do all the work in the terminal.
On the other hand, we knew that downloading and installing Wasp before even starting to describe your app was a big ask. On top of that, user interface capabilities in the CLI are pretty limited. That’s why we landed on a web interface — zero friction to get started, and we could make the app creation flow dead simple and good-looking.
It took several weeks to build it, and the final result was a fully open-source web application made with Wasp that could be used for free at https://usemage.ai/, or hosted locally for more control and flexibility (e.g., using your own OpenAI API keys).
Going super-specific (web apps only) paid off!
As mentioned above, our main bet was creating a specialized coding agent for building full-stack web apps and nothing else, which paid off. It allowed us to provide the agent with much context and structure upfront and introduce specialized heuristics for fixing errors. Also, due to Wasp’s high-level abstractions (e.g., auth, project structure, queries & actions system, …), we significantly reduced the surface area for errors.
Another consequence was significantly reduced execution time, and, maybe even more importantly, cost. A typical MAGE-created web app costs between $0.10 - $0.20, while general coding agents could spend up to $10 for the same app (all prices are before the Nov 7, ‘23 pricing update announcement by OpenAI).
You can read more about how Wasp works internally here, and how it compares to other coding agents here.
Step 2: Launch it 🚀
Building a product is one thing, but spreading the word about it and getting people to use it is entirely another. After we built MAGE and tested it within the team, the question was what to do next? How do we actually reach developers and start receiving feedback?
Community launch - proof of life
Since we already had a community for Wasp with around 1,000 members at the time, we released MAGE as a part of our Launch Week #3. It was a good test bed, and we could see the first apps being built. Still, many more developers out there could have benefited from an easier way to start their React & Node.js projects, and they had no way of finding out about MAGE.
Launching on Product Hunt — first “real” usage
That’s why we decided, following our internal community launch, to put MAGE up on Product Hunt. Although Product Hunt isn’t a dev tool-specific platform and attracts a crowd from very diverse backgrounds, there are still a lot of developers on it, and we previously had good experience with it. Product Hunt was integral in getting the first users for Wasp and reaching 1,000 stars on GitHub, so we wanted to give it a go one more time.
Some people put a lot of effort into launch preparations and take months in advance to get ready, but we didn’t have that time and just wanted to get it out as soon as possible. We asked our friends and community to check out MAGE on Product Hunt and support us on the day of the launch, and we ended up in the top ten products of the day, and later #2 developer tool of the week!
That was our goal, as the top ten products end up in a newsletter the following day, read by more than 1M subscribers. Very soon, we saw a significant rise in the number of apps being created, and new people started joining our Discord community!
The organic growth (aka “doing nothing”) phase
Following the Product Hunt launch, we relaxed our marketing efforts, as other Wasp-related tasks caught up with the team. We had to prepare for the upcoming Launch Week #4, so MAGE ended up on a back burner. We also wanted to see how the community would accept it before we decided to invest more resources into it.
We put out a few more follow-up articles, “How it works under the hood”, and “MAGE vs. general coding agents” which received an average amount of traction, but nothing exploded. We also had very little success on Reddit and Hackernews, and it felt like the community was fed up with all the AI content.
Still, the number of apps created with MAGE grew consistently (~200 apps/day), with an occasional mini explosion. We couldn’t really track where the users were coming from - it seemed MAGE was being spread via word of mouth in the closed communities and newsletters.
YouTube and TikTok videos - virality (1,300 apps/day!)
After our Launch Week #4 was over, we realized that for almost 2 months, with minimal effort from our side, MAGE kept growing without stopping. That signaled us that it had some real value, and we decided to invest more in it.
We decided to try our luck with the influencers in the space. We didn’t want to simply pay for an ad, but wanted to partner with somebody genuinely interested in what we’re building and who wants to review MAGE objectively. We found that in Matthew Berman, who covers everything from the latest models to tools in the LLM space, and he saw MAGE as an excellent fit for his audience.
The video was ready in a few weeks, and when it got out, it quickly reached around 25,000 views. Many viewers got excited by the possibility of getting a full-stack codebase from a single prompt via the web interface, and we saw another spike in usage and developers trying it out.
About a week later, we saw another massive spike in the number of created apps, but couldn’t figure out where it came from. We did some searching and found a developer on TikTok, @techfren, who had done a short video about it (MAGE even ended up not working in that one!), which skyrocketed to 200,000 views in a day and quickly went viral. Today, it has almost 1M views.
The reality - what happens with all these apps?
Although 25,000 created apps may sound impressive, it’s good to take a step back and break this further down.
As with most AI-powered coding tools, there is a huge amount of interest and curiosity in the space, both from developers and non-developers who want to build their products. Many even don’t have a specific project they want to build, but they are keen to try it out and see how it works. Also, since LLMs are not deterministic, no tool works perfectly yet, and minor errors that require manual intervention and coding knowledge are often introduced.
Although we’re very explicit about this and other challenges GPT-powered tools face, MAGE still attracts a portion of users who are excited about building their product, but are not proficient with coding and require help downloading, running, and fixing their apps. On the other hand, it is a very friendly and accessible way to get involved with web development and coding in general. We don’t discourage non-coders from trying it out but try to manage expectations as transparently as possible.
Consequently, about 40% of all created apps are downloaded to be run locally.
Conclusion
Our experiment with MAGE proved to be a success, even more than we initially expected. Besides many existing general coding agents, a highly specialized and structured approach can produce better and more consistent results, for a fraction of the price.
Also, developers are excited about an easy way to start their full-stack apps, with best practices included, and are actively searching for such a solution and sharing it among themselves.
I expect AI-assisted SaaS starters to be the future of web development. Why would anybody use a generic boilerplate starter if they can get their app scaffolded with the data models and CRUD logic already customized for their app? Another question is who and how exactly will implement this, but I expect every mainstream framework to have one in the future.
Good luck!
I hope you find this overview helpful and that it sheds some light on what things look like behind the scenes when creating and marketing a new (AI-powered) developer tool. Keep in mind this was our singular experience and that every story is different, so take everything with a grain of salt and pick only what makes sense for you and your product.
We wish you the best of luck, and feel free to join us on Discord if you have any questions or want to stay up to date with the development of MAGE and Wasp!
...