A 100% AI-driven web dev workflow, as good as Devin: MAGE x Aider

TL;DR

Devin, the self-proclaimed “first” fully autonomous software engineer just popped onto the scene and has gotten a lot of attention.

It’s not publicly available yet, but with a couple open-source tools, you can get a similar web dev experience RIGHT NOW, and for probably a fraction of the cost.

Using Wasp’s AI feature within its CLI, you can generate a full-stack web app codebase from a simple prompt. From there, iterate on it by adding features and debugging with the help of Aider.

With the help of these two AI-agents, you can supercharge your full-stack app development, and never have to write a single line of code (if you don’t want to).

Read on for detailed instructions on how to get started!

BTW, Wasp is the fastest way to build full-stack web apps that also happens to have AI generation built-in -- plus its free and open-source!

You can support us by starring our repo on GitHub. It helps us build more stuff and create more cool content like this 🙏

even Ron would star Wasp on GitHub 🤩

Who the hell is Devin?

You’ve probably seen and heard the hype surrounding Devin, the self-proclaimed “first” fully autonomous software engineer.

If not, check out the promo video below:

Although definitely not the first AI-coding assistant of it’s kind, Devin still turned a lot of heads with its launch. In a nutshell, this is what Devin does:

• Takes in a prompt
• Makes a step-by-step plan
• Presents its work in a sleek UI with a code editor, terminal, browser, and chat interface
• Able to iterate on existing codebases

Although other similar AI-coding agents like this exist, with some like GPT-Pilot being open-source, Devin’s use of a slick UI with all the necessary tools built in, is what makes it stand out. Also, it’s ability to iterate on existing codebases sets it apart from the majority of similar tools, with the exception of Aider.

So, is Devin really all that impressive?

Yes and no. As Matthew Berman, prominent AI YouTuber, points out in his video on Devin, the most impressive thing about Devin was probably the success of their launch.

But Berman also pointed out some inconsistencies with their marketing claims:

1. Devin is definitely not the first of its kind. Similar tools like Mage, Aider and GPT-Pilot already exist.
2. Their comparison of performance benchmarks (pictured above) can’t really be taken seriously, as Devin is an agent that can iterate and perform multiple tasks, whereas the LLMs it’s comparing itself to, like GPT-4, are just “zero-shot” (i.e. they have one try to get the answer right). To be a fair comparison, Devin should be compared against other agents, like GPT-Pilot, MetaGPT, Mage, etc.

Plus, Devin is actually built on top of OpenAI’s GPT-4 API. So, yes, some of the tools they’ve built on top of it are very impressive and will speed up coding workflows, but the underlying model is exactly the same thing that developers like you and I have access to.

That means, with a combination of a couple of available open-source tools, you can get pretty similar results to Devin right now, without having to wait for early preview access, and for probably a fraction of the cost.

Let’s check them out now!

Wasp AI x Aider — the open-source “Devin” replacement for full-stack web apps

A few months ago, we released Mage (Magic App Generator), an experimental platform for generating full-stack web apps from a simple prompt. Since its release, Mage has been used to generate over 40k apps!

Mage uses Wasp, a full-stack React, Node, and Prisma framework to generate working full-stack apps better than most coding assistants. Why is that exactly? It’s because Wasp uses a declarative config file to define your app’s features.

This config file gives Wasp’s compiler the instructions it needs to “glue” client and server code together and takes care of a bunch of boilerplate code, so neither you nor the AI have to take care of coding things like Auth, Routes, Endpoints, Server config, etc.

// wasp config file

app TodoApp {
  wasp: {
    version: "^0.13.0"
  },
  auth: {
    userEntity: User,
    methods: {
      usernameAndPassword: {}
    },
  }
}

entity User {=psl
    id       Int    @id @default(autoincrement())
    tasks    Task[]
psl=}

// rest of the config file...

Check out the example above of how to write full-stack Auth with Wasp. Pretty easy, right? Now imagine how easy it will be for Mage, or any other AI-coding assistant, to write Wasp code.

Plus, because the Wasp config file is already structured like a set of instructions, it allows Mage to create a plan in a similar fashion as Devin.

And this is where Mage really shines, in creating full-featured full-stack web app prototypes quickly and cheaply. The only drawbacks with Mage was that it wasn’t available in the terminal, and that you couldn’t iterate on the generated codebase any further.

Well now that’s changed. With the new Wasp update, all the features of Mage are packed into the CLI. You can just install Wasp and run wasp new and you’ll be able to generate a new full-stack app via a prompt from the command line!

After that, you can use Aider, a command line tool that lets you pair-program with GPT-3.5/GPT-4, to iterate on the generated codebase and create a bunch of cool new features.

Not convinced yet? Check out this cool promo video that shows you how it all works:

If that seems cool, and you wanna get started building your own full-stack web apps with the help of these tools, follow the instructions below!

Wasp AI in the CLI

After you install Wasp, head to your terminal and run wasp new

Doing so will give you a list of full-stack starter templates to choose from. You’ll want to:

• Choose [5] ai-generated from the list of options
• Enter a description of your app
• Choose the GPT models and creativity level you want to use for the generation

Playing around with these generation settings can give different results, so if the generated app isn’t what you’re looking for the first time around, tweak them and try again.

And don’t worry so much about the costs of generation via the OpenAI API. Because Wasp leverages a DSL and manages a ton of boilerplate for us, it significantly reduces the amount of code that GPT has to generate.

For example, one app with Wasp AI typically consumes about 25k to 60k tokens, which comes to about $0.1 to $0.2 per app, when we use a mix of GPT4 and GPT3.5 (the default option)! If we run it just with GPT4, then the cost is 10x, which is means it will cost about $1 to $2. This is still WAY cheaper than most of the other AI-coding agents out there which typically cost ~$15-$40 per generation. 🤯

Oh, and “gpt-4-1106-preview” refers to OpenAI’s new GPT-4-turbo model. Therefore, it is faster and cheaper than using GPT-4 entirely.

Wasp AI (and Mage) uses a combination of GPT-4 for planning + GPT-3.5-turbo for code generation, and we found it to work surprisingly well for simple apps. If you’re aiming for a complex app, we’d recommend using GPT-4 entirely, as it’s better able to deal with higher complexity. Just note that GPT-4 will take significantly longer.

Keep Iterating With AI…der

During Mage’s initial release, we got a lot of questions asking whether there was a “debugging assistant”, or a way to keep generating further features using AI after the initial output.

Although it’s not possible to do with Wasp AI, we started exploring other AI-coding assistants with debugging features, and in the end we really liked Aider’s workflow and performance. Plus, Aider is the only current AI-coding tool that allows you to iterate on an existing codebase, apart from Devin which isn’t released to the public yet.

So, this makes Wasp AI + Aider the perfect combo!

BTW, Wasp is free & open-source, so if you like what we're doing, consider giving us a star on Github!

⭐️ Toss Wasp a Star 🙏

Once you’ve generated a full-stack app with Wasp AI, you can use natural language via Aider to generate new features or debug issues in your current code.

Here’s how:

1. install Aider

1. run aider in the command line from within your Wasp project directory

1. /add the files you’d like Aider to work with
2. tell Aider what you want it to do, e.g. add a field for “number of naps” to the form

1. Aider will then plan out a course of action, and apply those changes as a git commit. If you don’t like the changes, run /undo to undo the commit

1. If you’re running into errors when trying to run your code with wasp start, copy and paste the error into the chat to let Aider solve it for you. Make sure you have the file the error is referencing added to the chat (see step 3)!

1. If you need more help using Aider, check out their website or run /help within Aider for a list of commands

The Future is Here

With Wasp AI, we finally added Mage’s AI-assisted full-stack app scaffolding ability to Wasp’s CLI. Use it to kick-start your next full-stack app idea by leveraging the power of GPT-4 and other OpenAI models.

And if you want to keep generating features or debug directly from the terminal with AI assisstance, then use Aider as we’ve outline above to keep the flow going.

The future of coding is really here. Try it out and let us know what you think!