Building Full-Stack Apps with AI: A Deep Dive into Convex's Chef

Introduction

Many of you are already familiar with the growing number of node and prompt-based app builders that can generate full-stack applications with very little effort. Platforms like Lovable, Bolt, new, and V0 from Vercel are strong examples of tools that fall into this category and are designed to simplify the process of building modern web applications. However, one area where many of these tools still tend to fall short is in back-end development.

Some of you might point out that Lovable is a full-stack solution and does include back-end support, and you would be absolutely right. It relies on Superbase to handle the back end. However, when it comes to building with AI models, Superbase is not always the most seamless option. I believe that Convex is currently the best back-end solution available for this kind of development.

I will go into more detail later in this article, but Convex recently released a new tool about 3 weeks ago. While it is no longer brand new, it is surprising how little attention it has received, considering how powerful and efficient it is. I tried it out myself and was genuinely impressed with how quickly it sets up a complete backend, especially when used in combination with other integrations in the Convex ecosystem.

In this article, I am going to give you a complete walkthrough of Chef and highlight its key features. I will start by showing you a pre-built application that I created using the platform, and then I will go ahead and build a brand new app from scratch so that you can see how the tool performs in a real-world context. Let's get started.

A Look at a Pre-Built Application: The Splitwise Clone

This is the application that I built, and it functions as a Splitwise clone. It was not my first attempt, because the initial version I tried did not turn out the way I wanted. The problem was that the default prompt Chef used lacked enough detail, which led to an app that was missing several important features and didn't function the way it should have.

I have said this before, and it remains true: AI tools require a strong and well-structured prompt right at the beginning of the process. If you try to introduce a major feature later on, it becomes significantly harder to implement, and the chances of something breaking increase rapidly. That is why I decided to try again, this time using a much more comprehensive and thoughtfully written prompt, and the result was this much more complete and functional version of the app.

Core Functionality Walkthrough

The app includes a working signup page and it even allows you to log in anonymously, which is a feature I personally find quite useful. This means that the backend is already set up with user authentication capabilities. I will go ahead and sign in so you can see how it works.

Once logged in, there is an option to create a new group. For this demo, I'll name the group "friends." After creating the group, we are brought into the main group interface, which looks clean and well-designed.

Note on the Backend: If I open the Convex database in the background, you will notice that the backend has been set up completely. All the necessary tables have been created, and Chef has already generated the appropriate schemas. When we look inside the groups table, we can see that the "friends" group has been successfully added. If you notice that it appears twice, the reason is that I had previously logged in anonymously while testing the app, which resulted in duplicate entries during earlier sessions.

Now, I will add a new member to the group. There are two options available: 1. Add a member using their email address. 2. Add someone who is not yet registered on the platform.

I added the second option myself so that I could test the app quickly without needing to go through the full signup flow every time. As I scroll down the page, you can see the section that displays all group members, expenses, and their individual balances.

I am going to record a new expense: - Title: Sports items - Amount: $100 - Paid by: Myself

The expense is recorded immediately, and as we continue to scroll, you can see that it now appears in the list below. Next, I will record a payment within the same group. Let us say Alex paid me $50. The system captures the payment correctly, and both the expense and the payment are now visible in the group's activity history.

I also want to mention that I built this app in a single run using only one prompt, without making any further modifications afterward. However, the member balances currently seem a little inaccurate, which suggests that I need to make some adjustments to fix those calculations.

Addressing Inaccuracies with Re-prompting

I was in the middle of editing my project when I ran out of tokens, and the interface immediately displayed the limit message. I had completely used up all the tokens that were available on my account. In the section labeled "API keys," there's an option to add your own key, and that's exactly what I did by entering my Anthropic API key.

Regarding the pricing, the only plan I currently see available is priced at $25, and it does not seem like there are any alternative pricing options being offered at the moment.

I gave the prompt another try, and it looks like the issue has been resolved. This time, the system used Claude, and now all the member balances are accurate and evenly distributed, exactly the way they should be.

To test things further, I added a new expense: - Title: Dinner - Amount: $100 - Paid by: Me

The expense was added immediately, and the net balance updated correctly. At this point, Alex owes the creator $50. To make sure the payment system is working as expected, I recorded that payment where Alex pays the creator $50. Once the payment was logged, the balance adjusted and returned to zero. If you scroll down through the interface, you can clearly see that all the charges and payments are displayed accurately. The re-prompting worked exactly as intended.

There's also the option to sign out at any time, which adds a nice finishing touch. Overall, I think this was a strong attempt at replicating the functionality of Splitwise. The app is fully deployable, and the source code is also available for download, which makes it easy to reuse or build upon.

Limitations and Strengths

However, there was one thing that stood out as a drawback: the platform does not currently support images in the prompt, meaning you can only rely on text instructions. This becomes a major limitation when you need to address UI issues. For instance, in an earlier version of this same app, I had to manually tweak the layout after generating certain components because the initial prompt lacked visual reference. The resulting interface looked inconsistent, the theme did not match across different parts of the app, and trying to describe all the necessary adjustments using only text became tedious and time-consuming. I couldn't upload screenshots or mock-ups to clarify what I wanted, which made the process unnecessarily difficult. That part of the experience was definitely frustrating.

However, setting that aside, I have to say that the built-in database integration is genuinely impressive and makes a strong case for using this tool in real-world projects.

Building a New App from Scratch: Neighbor Gear

The first prompt I used was actually one of the available presets designed to generate a Splitwise-style application automatically. I had to make a few adjustments to the prompt to get it working properly, but the foundation was already there. After working with that, I started thinking it might be more interesting to try building something completely new from scratch.

Right now, I'm working on a new idea and have given it a prompt to build a tool rental platform that I'm calling "Neighbor Gear." I came up with the concept while brainstorming with ChatGPT, and once the idea was clear, I provided the full prompt directly into the builder. The system has already started generating the application based on the instructions I gave. I'll fast forward to the point where the app is fully generated so I can show you the preview and walk through what it came up with.

The Power of a "Backend for AI"

While the app is being built, I want to take a moment to explain why this entire process is so powerful. The backend that Chef generates is actually written in React using TypeScript, which brings the advantage of type safety to your application. If you've noticed the type checks running during the build process, those are responsible for ensuring that everything functions correctly and consistently.

The reason this approach is referred to as a "backend for AI" is because the majority of code that AI models have been trained on comes from React and TypeScript. These models are extremely familiar with this structure, which means they perform exceptionally well when building frontends. Since Convex also uses TypeScript on the back end, the AI has no trouble understanding the codebase. It can make changes, introduce new functionality, and extend features with a high degree of accuracy and very few errors.

This is exactly what makes Chef such an effective tool. As it builds your front-end interface, it is simultaneously generating a fully functional backend in React. If you decide to download the code, you can run the entire project locally on your machine without any additional setup. In my opinion, this is what makes the tool not only powerful but also genuinely impressive in terms of practical usability and developer experience.

Neighbor Gear: The Final Result

The app has finished building, and I have to say that it looks genuinely impressive. Everything is functioning exactly as expected, and the overall layout feels polished and well-thought-out. This particular listing was added earlier by an anonymous user, and now we can go ahead and test whether the booking system is working as it should.

While the app was being generated, I started thinking about just how valuable this tool could be for anyone who wants to quickly launch a SaaS product or set up a small online business. If I needed a website ready in a short amount of time, I would not have to hire a developer or outsource the work. Instead, I could simply use this tool, create the website myself, and have it live and running almost immediately. What makes it even more compelling is the fact that the app is fully hostable and comes with a working database built-in, which means that if the business grows over time, the platform can grow alongside it without needing major changes.

One of the most impressive aspects is that the backend is written entirely in React code, which makes it both efficient and familiar for anyone with experience in front-end development. It is easy to maintain and integrate seamlessly with the rest of the application.

Now, returning to the app itself, what you are looking at is the main page of Neighbor Gear. The listing currently shown was created by me during testing, and I used a picture of the R-code kangaroo from my local files to quickly add some content. The process was simple and worked exactly as intended.

To test the booking functionality, I will go ahead and choose May 20th as the start date and select a 1-day rental period. The system immediately calculates the price, which is set at $80 for a single day, and everything appears to be working perfectly. You also have the option to list your own gear for rent using the built-in submission form, which is the same one I used earlier to create the listing for climbing equipment.

Visually, the app looks clean and modern, and from a usability perspective, everything runs smoothly and responds well.

Conclusion

Overall, I am genuinely impressed with what this tool can accomplish, and I would definitely consider using it again for future projects or quick startup ideas. As always, thank you for reading.