DEV Community

Cover image for GPT Web App Generator - Let AI create a full-stack React & Node.js codebase based on your description 🤖🤯
Matija Sosic for Wasp

Posted on • Originally published at wasp-lang.dev

GPT Web App Generator - Let AI create a full-stack React & Node.js codebase based on your description 🤖🤯

This project started out as an experiment - we were interested if, given a short description, GPT can generate a full-stack web app in React & Node.js. The results went beyond our expectations!

How it works

All you have to do in order to use GPT Web App Generator is provide a short description of your app idea in plain English. You can optionally select your app's brand color and the preferred authentication method (more methods coming soon).

How it works

That's it - in a matter of minutes, a full-stack web app codebase, written in React, Node.js, Prisma, and Wasp, will be generated right in front of you, and available for you to download, run it locally and deploy with a single CLI command!

See a full one-minute demo that generates a blog about turtles here:

Support us! 🙏⭐️

star_us

If you wish to express your support for what we are doing, consider giving us a star on Github! Everything we do at Wasp is open source, and your support motivates us and helps us to keep making web app development easier and with less boilerplate.

Toss a star

The stack 📚

Besides React & Node.js, GPT Web App Generator uses Prisma and Wasp.

Prisma is a type-safe database ORM built on top of PostgreSQL. It makes it easy to deal with data models and database migrations.

Wasp is a batteries-included, full-stack framework for React & Node.js. It takes care of everything from front-end to back-end and database along with authentication, sending emails, async jobs, deployment, and more.

Additionally, all the code behind GPT Web App Generator is completely open-source: web app, GPT code agent.

What kind of apps can I build with it?

⚠️ CAUTION
Since this is a GPT-powered project, it's output is not 100% deterministic and small mistakes will sometimes occur in the generated code. For the typical examples of web apps (as seen below) they are usually very minor and straightforward to fix. If you get stuck, ping us on our Discord.

The generated apps are full-stack and consist of front-end, back-end and database. Here are few of the examples we successfully created:

My Plants - track your plants' watering schedule 🌱🚰

My Plants

  • See the generated code and run it yourself here

This app does exactly what it says - makes sure that you water your plants on time! It comes with a fully functioning front-end, back-end and the database with User and Plant entities. It also features a full-stack authentication (username & password) and a Tailwind-based design.

The next step would be to add more advanced features, such as email reminders (via Wasp email sending support) when it is time to water your plant.

You can see and download the entire source code and add more features and deploy the app yourself!

ToDo app - a classic ✅

ToDo App

  • See the generated code and run it yourself here

What kind of a demo would this be if it didn't include a ToDo app? GPT Web App Generator successfully scaffolded it, along with all the basic functionality - creating and marking a task as done.

With the foundations in place (full-stack code, authentication, Tailwind CSS design) you can see & download the code here and try it yourself!

Limitations

In order to reduce the complexity and therefore mistakes GPT makes, for this first version of Generator we went with the following limitations regarding generated apps:

  1. No additional npm dependencies.
  2. No additional files beyond Wasp Pages (React) and Operations (Node). So no additional files with React components, CSS, utility JS, images or similar.
  3. No TypeScript, just Javascript.
  4. No advanced Wasp features (e.g. Jobs, Auto CRUD, Websockets, Social Auth, email sending, …).

Summary & next steps

As mentioned above, our goal was to test whether GPT can be effectively used to generate full-stack web applications with React & Node.js. While it's now obvious it can, we have lot of ideas for new features and improvements.

Challenges

While we were expecting the main issue to be the size of context that GPT has, it turned out to be that the bigger issue is its “smarts”, which determine things like its planning capabilities, capacity to follow provided instructions (we had quite some laughs observing how it sometimes ignores our instructions), and capacity to not do silly mistakes. We saw GPT4 give better results than GPT3.5, but both still make mistakes, and GPT4 is also quite slow/expensive. Therefore we are quite excited about the further developments in the field of AI / LLMs, as they will directly affect the quality of the output for the tools like our Generator.

Next features wishlist

  1. Get feedback on this initial experiment - both on the Generator and the Wasp as a framework itself: best place to leave us feedback is on our Discord.
  2. Further improve code agent & web app.
  3. Release new version of wasp CLI that allows generating new Wasp project by providing short description via CLI. Our code agent will then use GPT to generate project on the disk. This is already ready and should be coming out soon.
  4. Also allow Wasp users to use code agent for scaffolding specific parts of their Wasp app → you want to add a new Wasp Page (React)? Run our code agent via Wasp CLI or via Wasp vscode extension and have it generated for you, with initial logic already implemented.
  5. As LLMs progress, try some alternative approaches, e.g. try fine-tuning an LLM with knowledge about Wasp, or give LLM more freedom while generating files and parts of the codebase.
  6. Write a detailed blog post about how we implemented the Generator, which techniques we used, how we designed our prompts, what worked and what didn’t work, … .

Support us! ⭐️

If you wish to express your support for what we are doing, consider giving us a star on Github! Everything we do at Wasp is open source, and your support motivates us and helps us to keep making web app development easier and with less boilerplate.

thank you

Top comments (38)

Collapse
 
pavanbelagatti profile image
Pavan Belagatti

Amazing:) Looks interesting. I tried by describing my own app but I am getting the following error.

[plugin:vite:import-analysis] Failed to resolve import "./ext-src/Store.jsx" from "src/router.jsx". Does the file exist?

Collapse
 
matijasos profile image
Matija Sosic

Hey Pavan, can't say for sure but seems like a simple import error, probably needs to be just re-worded a bit. If you join our Discord (discord.gg/rzdnErX) I'd be happy to take a look and help debug it!

Collapse
 
ayushguptaa22 profile image
Ayushguptaa22 • Edited

I also face similar errors while creating my applications with vite, most of the time I rewrite the code and format the imports correctly, and after reloading it works just fine.

Checkout the project I created once I fixed the bug : (imagenaibytethatt.netlify.app/)

Collapse
 
vincanger profile image
vincanger

It’s like a junior developer agent. Noice!

Collapse
 
matijasos profile image
Matija Sosic

Thanks Vince, glad you like it!

Collapse
 
ben profile image
Ben Halpern

Definitely interesting

Collapse
 
matijasos profile image
Matija Sosic

Thanks Ben! Let me know if any qs :)

Collapse
 
stepanic profile image
Matija Stepanic

Amazing, I'm impressed :))

Collapse
 
zvone187 profile image
zvone187

That's what I was waiting for!! Congrats guys on the progress!

Collapse
 
matijasos profile image
Matija Sosic

Let us know what you build! 😎

Collapse
 
zvone187 profile image
zvone187

Will do

Collapse
 
brendan8c profile image
Artem

This only works with wasp on Linux...
I have Windows 10 and don't want to use wsl

Collapse
 
matijasos profile image
Matija Sosic

I see - we're close to supporting wasp natively on Windows, but until then we suggest to use wsl. It's actually quite a good experience - let us know in our Discord if we can help with setup in any way!

Collapse
 
just-another-girl-w3 profile image
just-another-girl-WEB3

Will surely share this with my friends at metana.io

Collapse
 
anni profile image
Anietie Brownson

Cool stuff
Would definitely try it

Collapse
 
axljones profile image
axljones

❌ Failed to parse ChatGPT response as JSON, trying again.

Used the gardening exemple and keep gettin errors in an infinite loop.

How do you monitor such errors on your side?

Collapse
 
matijasos profile image
Matija Sosic

hey axljones, it might happen from time to time but usually it doesn't persist. Can you join our Discord (discord.gg/rzdnErX) and DM me url of your app? We can check it out then and see if we can debug.

Collapse
 
gosucode profile image
Gosu Code

Interesting

Collapse
 
toolkituse profile image
toolkituse

cool

Collapse
 
elliot_brenya profile image
Elliot Brenya sarfo

Open source?

Collapse
 
matijasos profile image
Matija Sosic

yep, 100%! I linked to the source code in the article.

Collapse
 
schbenedikt profile image
Benedikt Schächner • Edited

GitHub logo wasp-lang / wasp

The fastest way to develop full-stack web apps with React & Node.js.

The fastest way to develop full-stack web apps with React & Node.js

license latest release discord


Web page | Docs

Wasp (Web Application Specification) is a Rails-like framework for React, Node.js and Prisma.
Build your app in a day and deploy it with a single CLI command!

Why is Wasp awesome

  • 🚀 Quick start: Due to its expressiveness, you can create and deploy a production-ready web app from scratch with very few lines of concise, consistent, declarative code.
  • 😌 No boilerplate: By abstracting away complex full-stack features, there is less boilerplate code. That means less code to maintain and understand! It also means easier upgrades.
  • 🔓 No lock-in: You can deploy Wasp app anywhere you like. There is no lock-in into specific providers, you have full control over the code (and can actually check it out in .wasp/ dir if you are interested ).

Features

🔒 Full-stack…

Collapse
 
blackhorse0101 profile image
blackhorse0101

Wow~~~

Collapse
 
stretch0 profile image
Andrew McCallum

Very cool! Would be very useful for prototyping new apps and products. Look forward to seeing where this goes as you extend it to support new features

Collapse
 
matijasos profile image
Matija Sosic

Thanks so much Andrew! Have you already tried it out, how did it work for you?

Collapse
 
afeiszli profile image
Alex

Really cool!!

Collapse
 
matijasos profile image
Matija Sosic

Appreciate it Alex 🙏