🛠️6 tools to kickstart your full-stack app with AI 🤖

#webdev #ai #react #javascript

“It’s 2021, where is my flying car?” - that’s a sentence that Joel Spolsky (creator of Stack Overflow and Trello) used to express his disillusionment with how web development still feels pretty much the same as 20 years ago.

But today, with GPT in the equation, we can rightfully ask this question again. We see all these fancy tweets and demos, but what does that mean for me as a developer today, right now, when I need to start a new full-stack web app? Do I really have to go through npm create vite my-new-app, and start with a blank page once again?

The answer is, finally, “no” - there is a lot of cool stuff you can use that will make your life easier. It might not be a supersonic DeLorean yet, but it’s definitely at least hovering above the ground.

Let’s explore what the AI scene has to offer us today to make it easier to start and build a full-stack web app:

🐝 🤖 MAGE - from a single prompt to a full-stack, React & Node.js app in a minute (Free to use!)

MAGE (Magic App GEnerator) is probably the easiest-to-use AI coding agent there is - everything happens through the web interface, and all you have to do is type in the short description of the app you want to build. With that, MAGE will generate a complete, full-stack codebase in React, Tailwind, Node.js, and Prisma powered by Wasp, that you can freely download.

The best part about MAGE is that it is fully open-source and completely free to use - all you need to do is log in with your GitHub, and you can start creating apps!

MAGE was launched in July on Product Hunt and has since then been used to create almost 30,000 applications. You can read more about it and what types of apps you can build with it here.

📟 Aider - an AI pair programmer in your terminal

After you’ve created the v1 of your app with e.g., MAGE, and got the basic functionality in place, you will probably want to add more features. And why not use AI for that, too? That’s where Aider comes in!

Aider’s superpower is that you can plug it into any existing project and get going! It feels like chatting with a fellow developer sitting right next to you - simply describe your next feature, and Aider will do its best to implement it while providing all the details of the process and automatically adding a new commit to your repo! How cool is that?

You can learn more about Aider and try it out here: https://github.com/paul-gauthier/aider

🦀 🚀 Shuttle AI - build backends in Rust with GPT!

When you hear the term “web app”, most of us immediately think of JavaScript. While that is in a big part true for the front-end, we can build our back-end in any technology we like!

Other than the regular suspects such as Python, Java, and PHP, what about Rust? It is one of the most loved languages among developers, and it shouldn’t be reserved only for low-level algorithms.

Shuttle AI made that possible - their powerful Rust-based framework already makes it easy to build and deploy backends, while AI on top makes it a total breeze!

Learn more about it here: https://www.shuttle.rs/ai

⚡️📦 Supabase AI - goodbye, complex SQL queries

Supabase is one of the best ways to get the database for your full-stack app up and running, and you get a ton of features on top of that! Since it is specialized for Postgresql, that means you’ll occasionally have to write some SQL. And why not get some help from AI with that, too?

Supabase is already renowned for its beautiful and user-friendly dashboard with an integrated SQL editor, and now they made it even better by adding their own AI agent to it. Ask it to create new tables and indexes and even write database functions!

Learn more about it here: https://supabase.com/blog/supabase-studio-3-0

👁️ 🧑‍✈️Visual Copilot - Your Figma design to code

If you ever got a Figma design handout from a designer, and then it was your task to implement the UI with it, have you ever wondered if there was a way to automate this? This is what Visual Copilot is after!

With a single click, and given a Figma design, Visual Copilot will generate the front-end code for it! It will do its best to make it responsive and keep the code clean and reusable.

It is currently available as a Figma community plugin.

✈️ 🤖 GPT Pilot - Start a new app with a collaborative AI

GPT Pilot is a coding agent specialized for creating new apps from scratch. Its unique approach is that it collaborates with the developer - whenever it gets stuck, it will ask for your help!

Internally, it consists of multiple agents collaborating together and going through different stages of app development - from Product Owner and Architect to DevOps and Developer! It is a perfect example of PRD (Product Requirement Document)-led development.

It is another completely open-source solution that has lately gotten a lot of love from developers and has been featured on GitHub Trending leaderboard multiple times.

Learn more about it and give it a try here: https://github.com/Pythagora-io/gpt-pilot

Summary

And that’s a wrap! There are many more AI tools out there, and every day new ones are coming, but in this overview, we tried to focus on the ones you can use today to kick start a new web app.

Hopefully, you found this helpful and learned something new that might come in handy! I’d also love to hear from you in the comments - what are your favorite AI tools for web development, either ones you use daily or are simply excited about and what should we cover next?