Hey, I'm Attia and I will show you how we created a GPT-powered full-stack web app generator and how it was used to create over 10,000 applications in one month. So first we'll see what it is and then secondly we'll check out how it works under the hood. So let's get started.

So everything happens on this web page and it's super simple. First we have to enter the name of our application, let's say we are building a simple to-do app. Second part is describe how it works in a couple of sentences. So we have a simple to-do app with one page listing all the tasks, user can create tasks, change them, toggle them, edit them.

Creativity level corresponds to GPT temperature. So we can go on the save side and get less features or we can go a little bit crazy but also have more mistakes. So I will stick with this balanced one. And the last thing left to do is just to hit this generate button.

Bam. Here we can see the result of the generation. So we got a full-stack app in React, Node.js, Prisma and it's all glued together with a full-stack framework Wasp. So the secret of Wasp is that it relies on this single configuration file which describes your app in a high-level declarative manner.

So here, for example, we can see our auth in just a couple of lines, our routes, pages, our data model, so everything is here. And still here we can see our client code. For example, here is our React. And here we have our Node.js functions which are being executed on the backend.

So the last thing to do is just to download this app locally and run it with Wasp. So let's do that. So I downloaded the app locally and now we just have to run it via Wasp.start. And there we have it. We can log in with username and password.

Now let's create a couple of tasks. Use mage. Become an AI engineer. Mark it as done. And now let's check it out in the database. So we have a database inspector that also comes with Wasp. And here we can see two rows. One for each task. And both are completed.

Is done is true. So let's try adding another task. Have fun. And let's check it out in the database again. We see it's not completed. Is done is false. But if we complete it, we can see now it's true. So there it is. We got a fully working full stack web app in React, Node.js and Wasp.

You can also now deploy this app with a single CLI command. It's a regular React, Node.js app, so you can deploy it virtually anywhere. But we have a CLI helper in Wasp that makes it super easy to deploy to fly.io. And more providers are coming soon. This is one of my favorite features.

When we got Mage out, it was hardly the first AI coding agent. But it was among the first ones that could generate a full stack web app with almost no errors. When we released this and people started using it, we were getting two main questions. How come this works so well?

And secondly, how can you offer it for free? Is it that cheap? So let's answer them one by one. There are three main reasons for Mage's performance. First, it is specialized only for full stack web apps and nothing else. Only React, Node.js and Wasp. That allows us to assume a lot up front and makes everything easier and faster.

Second, it makes use of a high-level web framework, Wasp. That takes away a ton of boilerplate and makes it much easier for GPT to do its job. And lastly, Mage fixes the errors before it gives you the final result. Again, because of the two points I mentioned previously, this is also a simpler problem than for the general AI coding agents.

Let's dive a bit deeper. Let's go back to our generated app. Since Mage knows we are building a full stack web app and it's using Wasp for it, we can produce a lot of code up front without even touching the OpenAI's API and asking GPT any questions. For example, some of the config files, then also some of the authentication logic, which we can see right here, and global CSS and similar.

So we call this step zero. Only then the code agent takes over. The code agent's work consists of three main phases: planning, generating the code, and fixing the errors. So let's expand the generation log and explore each of the cases. Here, following the step zero, we can see the planning phase.

Given our app description, Mage device needs to generate the following queries and actions: entities for data models and one page. After that, the generation step happens. Mage is actually implementing everything it planned for above. And finally, here comes the error fixing phase. Mage can detect some of the common errors and fix it for itself.

Here, it failed to fix, so it had to try again. And finally, when it cannot detect any more errors, we are done. We can also see that all this took about 27,000 tokens. The cool thing is that, while developing Mage, we identified the most common errors it consistently kept making, like mixing up the default and named imports.

Some of them, we even ended up fixing with a simple heuristic, without involving GPT. That took care of 90% of all errors. Again, VOS framework with its high level configuration was of great help here, since it removed the tone of code and reduced the space for errors significantly. Now, let's take a look at another question we had: How much does it all cost?

A typical app we created with Mage took about 2 to 3 minutes and 25 to 60,000 tokens, which comes to about 10 to 20 cents. But there is one trick we used: We used GPT 3.5 and GPT 4 interchangeably for different stages. And that reduced the bill a lot.

If we used only GPT 4 for everything, the cost would have been 10x more. So, 1 to 2 dollars per app. What we did, is we used GPT 4 only for the planning stage, which is the most complex step and one that requires the most creativity. For the actual implementation, we could comfortably use GPT 3.5, which is both faster and cheaper.

And that worked great. Again, the key here is that we provided a highly guided environment for the coding agent, given WASP's web app abstractions, and that's why this approach worked. This is also the main difference between Mage and the other coding agents. We tried another popular agent that uses the more free approach, and relies more on the GPT itself.

And the cost to make a similar app as we did with Mage was between 80 cents and 10 dollars. So, what should you use Mage for? And what should you expect? Is it going to magically produce any app you imagine, or do you still have to put some work in?

At current stage, Mage serves as a really good and highly customized cross-starter for full-stack web apps. At that level, it can operate with almost no or very little errors that you can easily detect and fix. Most of the people that tried it, found it as a super easy way to get their app kickstarted with the mainstream pieces of stack, such as React, Node, and Tailwind.

And that's how Mage got its popularity. I personally believe this is what the future of SaaS starters looks like. Tailor to your app instead of starting out with a generic boilerplate. As you would expect, the more you push it, the more errors it starts making. On the other hand, not giving enough information and just saying something like "Make Facebook but yellow" can also be counter-effective.

So, what comes next? We created Mage as an experiment to see how well it can produce full-stack web apps with FOSP. And it worked surprisingly well. The current main limitation of Mage comes from its implicit and the fact there is no interaction with the user beyond the initial prompt.

So, that's something we are looking to add next. A live debugging mode, where you can, while still on the web page, interact with the agent and request changes and error fixes. Another thing that would be interesting to explore would be using an LLM that is fine-tuned for WASP and web development.

Although, that would also make it more expensive. Also, since WASP has such simple and human-readable syntax, it's hard to predict how much benefit would fine-tuning bring. Still, it would be a cool thing to try out. And that's it. We saw what Mage was, how it works, and what is the secret sauce that made it both fast and affordable to create web apps.

So, thanks so much for watching. I had a lot of fun making this video with my helper, and I hope you also found it interesting. Please give Mage a try and let us know how it went. We are the same team that created WASP, which is a fully open-source web framework that makes it super easy to develop with React and Node.js.

Also, check out our repo and join our Discord for any questions and comments. Thank you.