Dolt is the world's first version-controlled relational database. Dolt lets you branch, fork, clone, merge, and diff your relational data, in all the same ways Git lets you work with your files.

In this blog post, we're taking a look at another generative web app builder – Replit. In my last blog post, I built an application using Vercel's v0.app and tested how well it could handle using Dolt's version control features, such as reverting commits and viewing diffs. In this post, I describe my experience building the same app with Replit.

TL;DR

On the surface, Replit and Vercel's v0.app are similar offerings. They both offer a web app hosting platform and they both give you a conversational UI where you instruct an agent on what to build. They both have a lot of additional features, but we're just using the basics in this first look at Replit. Both Replit and Vercel's v0.app were able to successfully build an inventory tracking web app that incorporated Dolt versioning information. However, the experience with Replit felt quite a bit more polished and professional. Vercel's v0.app felt clumsy and bungling, while Replit's work came across as more skilled and professional.

By far, my biggest complaint with Vercel's v0.app was that it doesn't make any attempt to test its own work – it just YOLOs out some code and lets you deal with the mess. It would repeatedly tell me (sometimes five or six times in a row) that it had fixed a bug, only for me to publish the app, try it myself, and find that it was still broken, or sometimes even more broken than it was before. Even when building just a simple demo application, this was incredibly frustrating, and I wouldn't put up with that on a larger project. Replit was a completely different experience here and really impressed me with how it tests functionality automatically and shows you a video recap of the app being tested. This made iterations with Replit take slightly longer, but the tradeoff of getting code that actually works on the first try is a no-brainer. There were a few times when this automatic testing caught real issues and then Replit debugged them and fixed the app, all without me having to get involved and without me having to publish the app, manually find the issue, and then explain it to the agent.

Overall, Replit exceeded my expectations and I'm looking forward to using it more deeply for additional projects. Read on to see more details about my experience with Replit, including more details on its automatic testing capability.

Building an Inventory Tracking Web App

Here's a look at the finished inventory tracking web app that Replit created. I didn't give Replit any instructions or feedback on the UI style, and I think the UI it created turned out a bit nicer and more modern looking than what Vercel's v0.app created. Perhaps I'm just a sucker for a dark theme UI though.

Read on to see how I used Replit to build this app from just a few prompts.

Launching a Dolt Server through Hosted Dolt

The first thing we need to do is get a Dolt SQL server up and running for our new web app to use. I'm using Hosted Dolt to run my Dolt SQL server. Hosted Dolt gives you a fully managed experience for running a Dolt server, including automatic backups, support for horizontal scaling through read replicas, automatic version upgrades, and more.

After logging into the Hosted Dolt site, I clicked on the Deployments link, and then on the Create Deployment button. A "deployment" is simply an instance of Dolt running on Hosted Dolt.

I named my deployment "replit-demo" and accepted the defaults on the other pages of the Create Deployment UI. After a few minutes, Hosted Dolt had spun up a Dolt server, ready to be used in my Replit test.

If you're following along, keep the deployment page open so that we can grab the database information later and tell Replit how to connect to our database.

If you scroll down on the deployment page, you'll see instructions for connecting to the Hosted Dolt instance through the mysql tool. Use that command to open a SQL shell to our new Dolt server and run the following command to create the database, demo_db, on the server that we'll be using for our application:

CREATE DATABASE demo_db;

Getting Started in Replit

Now that we've got a Dolt server running. Let's jump over to Replit and start building our web app.

After creating an account, the main Replit landing page shows you a text box to type in what you want to build with Replit. I wanted to test Replit's experience against Vercel's, so I made sure to use the same prompts I used when I tested Vercel v0.app.

After sending that prompt, Replit got started analyzing my request and came up with a plan for how to build my app.

Replit even gave me a choice on how to proceed. I could let Replit move ahead quickly and bang out an implementation, or I could be more hands on, and review a UI design upfront and provide feedback. I wanted to see how Replit did with more autonomy, so I let it go ahead and build out the app without any design assistance from me.

Connecting a Database

Replit made it very easy to configure a connection to an external Dolt database. After I gave it the go ahead to get started building the app, the first thing it asked me for was how to get connected to the Dolt database.

I loved that directly in the chat, it gave me text boxes to fill in the database name, host, user, password, and port. This was a bit easier with Replit than it was with Vercel, where Vercel made me go find the environment variable settings for my deployment on a different page and also made me structure them in a connection URL, which wasn't hard, but definitely took a little more effort than just plugging in values to text boxes directly in the chat UI.

After that, Replit created a schema for the inventory data and the frontend UI, using React.

Next, Replit configured the client dependency needed to connect to my Dolt database. It already knew that Dolt is MySQL-compatible, so it understood to grab a MySQL client library, and chose mysql2.

When Replit moved on to the backend code, it pulled in a client library to connect to my Dolt database and got it integrated into my app. However, we hit an issue in the next step, when it tried to use that client to connect to my database for the first time. This was the first moment when I started to see the BIG difference between Replit and Vercel's v0.app. Replit proactively tested the database connection and realized there was an error connecting to my database. It analyzed the error, saw that a secure connection was needed, updated its code, then confirmed things were working now. I hit a similar issue while testing Vercel, but Vercel was happy to give me non-working code and let me find the SSL/TLS issue myself. I was impressed that Replit was proactive in testing its work, found the issue, and fixed it correctly.

In the messages above, you can also see the Replit went ahead and initialized the database schema for us. Vercel helped with this, too, but not nearly as smoothly. While Vercel produced some SQL files for me to run, it did it in a way where they weren't actually runnable by default, then tried to fix that by running them in a Javascript file, but ended up breaking them in a different way. By this point, Replit had already earned more of my trust than Vercel ever did.

Replit's Real Magic

There were a lot of features I liked about Replit, but far and away the most magical one was its ability to proactively test functionality, identify issues, and fix them, without requiring me to be involved. This is a HUGE improvement over Vercel's rather clumsy experience. Even when building just a simple web app for a day or two with Vercel, I encountered at least five different times when Vercel generated broken code, usually repeatedly breaking it in different ways when I'd prompt it to fix it. This was easily the biggest gap that would prevent me from using Vercel v0.app for a real project, so I was pleasantly surprised to see that Replit was so much stronger here.

Here's an example where Replit did some acceptance testing of our app and caught a problem with editing an inventory item.

It was even more magical to see a video recap of the UI testing Replit was doing. I wasn't expecting this feature, so it really surpassed my expectations. In the video below, you can see how Replit runs through UI testing for the app, edits inventory items, and makes sure the updates show up correctly in the UI.

Replit also seems to detect when it can't sufficiently test. I was pleasantly surprised when Replit asked me for help testing a change when I asked it to add calls to dolt_commit() after adding or editing any inventory item. Replit realized that it wasn't able to confirm that the commits had been created properly, since our application wasn't showing those commits anywhere yet. Instead of just moving on, it turned things over to me to confirm that the functionality was working.

Publishing Experience

The publishing experience in Replit was very simple and easy to use. Overall, this felt comparable to Vercel's experience. It was about the same amount of work in the UI to publish my app, and it took about the same amount of time to publish it.

Replit also showed some nice information by default on the progress of the app publishing. Here's a look at the status page where Replit shows you how your deployment is going.

And with that, we've got the basic CRUD operations for our inventory tracking website published. Replit gives us a nice rundown of exactly what we've done so far.

Adding Versioning Features

Now that we've got the basic app working, let's start adding in Dolt's version control features.

Adding a Commit History UI

Just like in Git, Dolt tracks all changes through a commit graph. The first version control feature we want to add is showing this commit history. Here's the prompt I gave Replit:

Replit handled this like a champ. Here's the UI it created:

Each commit (except for the current commit) includes an action to "reset to this commit". Just like in Git, Dolt allows you to reset the current tip of a branch to any other commit in the graph. Replit did a great job coming up with the UI, including the descriptive text for the action.

Next, let's add another action that lets us revert a commit. Unlike reset, which moves the HEAD pointer for a branch to another commit and essentially makes more recent commits completely disappear, revert takes any commit and creates a new commit at the tip of the current branch that applies opposite changes to undo a commit, without actually removing the original commit from the commit history.

Replit handled this without any issues, too. Here's the video recap of Replit doing UI acceptance testing for this new feature.

Commit Diffs

Let's add one more feature to our commit history UI. We'd like to see exactly what data changed in each commit. Dolt makes this really easy and provides several system tables and functions that allow you to easily query diffs. Here's what I asked Replit to build:

Replit was able to easily use the dolt_diff() table function to pull this data and created the UI below that makes it easy to see how inventory attributes changed in a commit.

After that, Replit gave a nice summary of what it had created.

Inventory Item History

Let's add one more addition to our web app that utilizes Dolt's version-control features. This time, we want to give users the ability to see exactly how a specific inventory item has changed over time. Here's the prompt I gave Replit.

Replit gave me a nice summary of its plan for the work and then diligently got started executing. Before long, I noticed this message about a problem it had caught while testing the new feature:

Replit had already caught a couple small issues in its acceptance testing and each time was able to identify the root cause and then fix the issue. This particular issue was very similar to one that I encountered when building my app with Vercel, too. Replit did a MUCH better job than Vercel here – it detected the issue automatically, immediately started debugging, and then fixed the issue. When I hit a similar issue with Vercel, I had to find the issue myself and then had to prompt Vercel five or six times to fix it, before it could actually successfully fix it.

The final UI Replit created ended up looking quite nice and does a great job showing how an inventory item has changed over time.

Final Thoughts

This is the second generative app builder we've tested out so far, and while the overall experience was more similar than different, Replit brings crucial features that Vercel's v0.app was sorely lacking. The biggest of these is Replit's ability to do some basic acceptance testing with the UI it created, and then share the results and video from that testing with you. This is a game changer for a generative app builder tool. Without this feature, Vercel's v0.app came across as clumsy and untrustworthy, and not a tool I would want to use for larger projects. Replit stood in sharp contrast to that experience, and left me feeling excited to build larger, more complex apps with it and see how well it handled those.

We're looking forward to continuing to explore generative AI tooling. We stronly believe that agents need tests to work effectively, and that's why we've added a built-in test engine to Dolt. Dolt is the database for agents after all.

If you're curious about using a version-controlled relational database, or if you want to talk more generative AI tooling, come by our Discord and say hello!