GPT Web App Generator: 10,000 Apps Created in a Month

Matija Sosic, Wasp09:23 · Jan 2024 · 2,196 views
Thumbnail for GPT Web App Generator: 10,000 Apps Created in a Month Watch on YouTube
TL;DR
  1. 1

    GPT Web App Generator creates React, Node.js, Prisma, and Wasp applications from a short plain-English description.

  2. 2

    The generator works because it targets one stack, uses Wasp's high-level framework, and fixes common errors before returning the app.

  3. 3

    A typical app takes 2 to 3 minutes and costs about 10 to 20 cents by using GPT-4 for planning and GPT-3.5 for implementation.

Summary

Matija Sosic demonstrates a web app generator that turns a short description into a full-stack application. The generated app uses React, Node.js, Prisma, and Wasp, and can be downloaded, run locally, inspected in a database, and deployed with a CLI command. He explains that the system performs well because it targets one stack, starts with Wasp boilerplate and configuration, then runs an agent through planning, code generation, and error fixing. Known mistakes can be corrected with simple heuristics. Cost is controlled by using GPT-4 for planning and GPT-3.5 for implementation. Sosic describes the result as a customized starter rather than a system that can build any product from a vague prompt. The main limitation is that users cannot interact with the agent after the initial request. The team planned to add live debugging and explore fine-tuning a model for Wasp and web development.

Key ideas
00:01

The generator turns a short app description into a runnable full-stack project

Sosic starts with a simple to-do app request: list tasks, create and edit them, and toggle completion. The generator returns an application built with React, Node.js, Prisma, and Wasp. He downloads it, runs it locally with Wasp, logs in, creates tasks, and checks the database inspector. The inspector shows one row per task and changes the done field from false to true when a task is completed. The result is a regular React and Node.js application that can be deployed almost anywhere. Wasp also provides a CLI helper for deployment to Fly.io, with more providers planned.

03:07

Wasp gives the model a narrow, high-level environment to work in

Sosic gives three reasons for the generator's performance. It only targets full-stack web apps built with React, Node.js, and Wasp, so the system can assume many details. Wasp removes a large amount of boilerplate and makes the generated project easier for GPT to handle. The framework uses a single configuration file with high-level declarations for routes, pages, and data models, while the project still contains normal React client code and Node.js backend functions. This reduces the amount of code the agent has to generate and leaves fewer places for errors.

04:10

The system generates predictable project pieces before asking GPT to write application code

The generator begins with a phase called Step Zero. Because it knows the target stack, it can create configuration files, authentication logic, global CSS, and similar pieces without calling the OpenAI API. The code agent then has three phases: planning, generating, and fixing. From the application description, it plans the required queries, actions, entities, data models, and page. It implements that plan and then checks for common errors. The final output is produced when the system cannot detect further errors.

05:16

Simple fixes handle many recurring code errors

While developing the generator, the team recorded mistakes that appeared repeatedly. One example was confusing default imports with named imports. Some of these errors could be fixed with a straightforward heuristic instead of another GPT request. Sosic says this handled 90% of all errors. Wasp helped because its high-level configuration removed much of the code that could go wrong. In one generation log, the agent failed to fix an error on its first attempt and tried again. A typical run used about 27,000 tokens in the example he shows.

05:55

Mixing GPT-4 and GPT-3.5 keeps generation costs low

A typical application took 2 to 3 minutes and used 25,000 to 60,000 tokens, costing about 10 to 20 cents. The team used GPT-4 for planning because that phase was the most complex and required the most creativity. GPT-3.5 handled the implementation because it was faster and cheaper. Using GPT-4 for every stage would have raised the cost by about ten times, to roughly $1 to $2 per app. Sosic compares this with another agent using a freer approach, where a similar application cost between 80 cents and $10.

07:06

The product is a customized full-stack starter rather than an arbitrary app builder

Sosic describes the current product as a highly customized starter for full-stack web apps. It can produce mainstream stack pieces such as React, Node.js, and Tailwind with little or no error that a user can easily detect and fix. The generator becomes less reliable as the request gets more ambitious. Giving too little detail can also hurt the result, as with a vague request to make Facebook. He sees tailored starters as a possible future direction for SaaS development, replacing generic boilerplates with a starting point shaped by the application's description.

08:03

The next version needs interaction after the initial prompt

The main limitation is the generator's simplicity and its lack of interaction after the first request. The team wanted to add a live debugging mode inside the web page, where users could ask the agent for changes and error fixes while working on the application. Sosic also mentions fine-tuning a language model for Wasp and web development. That could improve the system, but it would make generation more expensive. He is unsure how much benefit fine-tuning would provide because Wasp's syntax is already simple and readable.

"The secret of Wasp is that it relies on this single configuration file which describes your app in a high level declarative manner."01:14
Who should watch
  • You are building an AI coding tool and want to see how narrowing the supported stack can reduce generation complexity.
  • You are evaluating generated-app workflows and want concrete details about local execution, database checks, deployment, error fixing, and model costs.
  • You maintain a web framework or starter kit and want to understand how high-level abstractions can guide a code-generation agent.