GPT Web App Generator - 10,000 apps created in a month: Matija Sosic
00:00:00.000 | Hey, I'm Attia and I will show you how we created a GPT-powered full-stack web app generator
00:00:21.260 | and how it was used to create over 10,000 applications in one month.
00:00:26.140 | So first we'll see what it is and then secondly we'll check out how it works under the hood.
00:00:30.960 | So let's get started.
00:00:32.700 | So everything happens on this web page and it's super simple.
00:00:36.340 | First we have to enter the name of our application, let's say we are building a simple to-do app.
00:00:41.740 | Second part is describe how it works in a couple of sentences.
00:00:45.220 | 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.
00:00:53.520 | Creativity level corresponds to GPT temperature.
00:00:56.380 | 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.
00:01:02.500 | So I will stick with this balanced one.
00:01:04.880 | And the last thing left to do is just to hit this generate button.
00:01:08.580 | Bam.
00:01:09.680 | Here we can see the result of the generation.
00:01:13.420 | So we got a full-stack app in React, Node.js, Prisma and it's all glued together with a full-stack framework Wasp.
00:01:20.060 | So the secret of Wasp is that it relies on this single configuration file which describes your app in a high-level declarative manner.
00:01:29.140 | 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.
00:01:36.080 | And still here we can see our client code.
00:01:38.880 | For example, here is our React.
00:01:41.540 | And here we have our Node.js functions which are being executed on the backend.
00:01:45.460 | So the last thing to do is just to download this app locally and run it with Wasp.
00:01:52.060 | So let's do that.
00:01:54.080 | So I downloaded the app locally and now we just have to run it via Wasp.start.
00:01:58.740 | And there we have it.
00:02:00.960 | We can log in with username and password.
00:02:02.980 | Now let's create a couple of tasks.
00:02:06.420 | Use mage.
00:02:07.860 | Become an AI engineer.
00:02:10.300 | Mark it as done.
00:02:12.260 | And now let's check it out in the database.
00:02:14.680 | So we have a database inspector that also comes with Wasp.
00:02:18.620 | And here we can see two rows.
00:02:22.640 | One for each task.
00:02:24.280 | And both are completed.
00:02:25.200 | Is done is true.
00:02:26.580 | So let's try adding another task.
00:02:28.940 | Have fun.
00:02:30.340 | And let's check it out in the database again.
00:02:32.860 | We see it's not completed.
00:02:34.400 | Is done is false.
00:02:35.300 | But if we complete it, we can see now it's true.
00:02:39.200 | So there it is.
00:02:41.800 | We got a fully working full stack web app in React, Node.js and Wasp.
00:02:47.180 | You can also now deploy this app with a single CLI command.
00:02:52.440 | It's a regular React, Node.js app, so you can deploy it virtually anywhere.
00:02:56.220 | But we have a CLI helper in Wasp that makes it super easy to deploy to fly.io.
00:03:01.120 | And more providers are coming soon.
00:03:03.180 | This is one of my favorite features.
00:03:05.000 | When we got Mage out, it was hardly the first AI coding agent.
00:03:09.340 | But it was among the first ones that could generate a full stack web app with almost no errors.
00:03:14.700 | When we released this and people started using it, we were getting two main questions.
00:03:18.740 | How come this works so well?
00:03:20.560 | And secondly, how can you offer it for free?
00:03:22.600 | Is it that cheap?
00:03:23.740 | So let's answer them one by one.
00:03:26.040 | There are three main reasons for Mage's performance.
00:03:30.860 | First, it is specialized only for full stack web apps and nothing else.
00:03:35.280 | Only React, Node.js and Wasp.
00:03:38.500 | That allows us to assume a lot up front and makes everything easier and faster.
00:03:42.540 | Second, it makes use of a high-level web framework, Wasp.
00:03:46.680 | That takes away a ton of boilerplate and makes it much easier for GPT to do its job.
00:03:51.940 | And lastly, Mage fixes the errors before it gives you the final result.
00:03:57.220 | Again, because of the two points I mentioned previously, this is also a simpler problem than for the general AI coding agents.
00:04:03.800 | Let's dive a bit deeper.
00:04:05.260 | Let's go back to our generated app.
00:04:07.720 | Since Mage knows we are building a full stack web app and it's using Wasp for it,
00:04:12.400 | we can produce a lot of code up front without even touching the OpenAI's API and asking GPT any questions.
00:04:20.000 | 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.
00:04:29.300 | So we call this step zero.
00:04:31.480 | Only then the code agent takes over.
00:04:34.380 | The code agent's work consists of three main phases: planning, generating the code, and fixing the errors.
00:04:41.780 | So let's expand the generation log and explore each of the cases.
00:04:46.360 | Here, following the step zero, we can see the planning phase.
00:04:49.780 | Given our app description, Mage device needs to generate the following queries and actions:
00:04:55.060 | entities for data models and one page.
00:04:57.580 | After that, the generation step happens.
00:05:00.280 | Mage is actually implementing everything it planned for above.
00:05:03.700 | And finally, here comes the error fixing phase.
00:05:07.240 | Mage can detect some of the common errors and fix it for itself.
00:05:10.980 | Here, it failed to fix, so it had to try again.
00:05:14.680 | And finally, when it cannot detect any more errors, we are done.
00:05:18.060 | We can also see that all this took about 27,000 tokens.
00:05:22.100 | 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.
00:05:31.120 | Some of them, we even ended up fixing with a simple heuristic, without involving GPT.
00:05:35.860 | That took care of 90% of all errors.
00:05:39.460 | 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.
00:05:47.920 | Now, let's take a look at another question we had: How much does it all cost?
00:05:52.420 | 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.
00:06:02.680 | But there is one trick we used: We used GPT 3.5 and GPT 4 interchangeably for different stages.
00:06:10.100 | And that reduced the bill a lot.
00:06:12.100 | If we used only GPT 4 for everything, the cost would have been 10x more.
00:06:18.060 | So, 1 to 2 dollars per app.
00:06:20.480 | 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.
00:06:28.480 | For the actual implementation, we could comfortably use GPT 3.5, which is both faster and cheaper.
00:06:34.820 | And that worked great.
00:06:36.000 | 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.
00:06:45.400 | This is also the main difference between Mage and the other coding agents.
00:06:49.880 | We tried another popular agent that uses the more free approach, and relies more on the GPT itself.
00:06:55.400 | And the cost to make a similar app as we did with Mage was between 80 cents and 10 dollars.
00:07:01.880 | So, what should you use Mage for?
00:07:05.640 | And what should you expect?
00:07:07.160 | Is it going to magically produce any app you imagine, or do you still have to put some work in?
00:07:12.600 | At current stage, Mage serves as a really good and highly customized cross-starter for full-stack web apps.
00:07:18.600 | At that level, it can operate with almost no or very little errors that you can easily detect and fix.
00:07:23.960 | 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.
00:07:31.080 | And that's how Mage got its popularity.
00:07:33.960 | I personally believe this is what the future of SaaS starters looks like.
00:07:38.760 | Tailor to your app instead of starting out with a generic boilerplate.
00:07:42.920 | As you would expect, the more you push it, the more errors it starts making.
00:07:47.080 | On the other hand, not giving enough information and just saying something like "Make Facebook but yellow" can also be counter-effective.
00:07:54.200 | So, what comes next?
00:07:57.560 | We created Mage as an experiment to see how well it can produce full-stack web apps with FOSP.
00:08:04.440 | And it worked surprisingly well.
00:08:05.960 | The current main limitation of Mage comes from its implicit and the fact there is no interaction with the user beyond the initial prompt.
00:08:13.000 | So, that's something we are looking to add next.
00:08:15.000 | A live debugging mode, where you can, while still on the web page, interact with the agent and request changes and error fixes.
00:08:22.920 | Another thing that would be interesting to explore would be using an LLM that is fine-tuned for WASP and web development.
00:08:29.080 | Although, that would also make it more expensive.
00:08:31.640 | Also, since WASP has such simple and human-readable syntax, it's hard to predict how much benefit would fine-tuning bring.
00:08:37.880 | Still, it would be a cool thing to try out.
00:08:41.240 | And that's it.
00:08:42.280 | 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.
00:08:49.640 | So, thanks so much for watching.
00:08:51.960 | I had a lot of fun making this video with my helper, and I hope you also found it interesting.
00:08:57.160 | Please give Mage a try and let us know how it went.
00:09:00.600 | 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.
00:09:07.720 | Also, check out our repo and join our Discord for any questions and comments.
00:09:20.200 | Thank you.