ChatGPT-Assisted SQL Client

Background

As a full stack developer I was used to using MongoDB because of how easy it is to use and the flexibility you get. There is also a nice free tier on Mongo Atlas that works for me perfectly.

After all those years in NoSQL land, I have finally bitten the bullet and switched to SQL databases. The reliability of having a fixed schema really outweighs the cons, and with the ability to add JSON data in columns, you get the best of both worlds.

The idea

Now that I needed to use SQL for querying my database, I often found myself turning to ChatGPT for assistance in writing queries. Even with a good grasp of the syntax, it was easier to ask ChatGPT for the query, particularly for complex ones with multiple filters. This led me to create DBee.

First steps

I started a new project with Next.js (my framework of choice) and for this project I wanted to also try out Shadcn/UI a different kind of style frameworks that works with Tailwind CSS

My goal was to get a working prototype quickly, so I created a form with two inputs: one for the database connection string and another for the user’s query.

first photo
I used Next.js server actions to communicate with the server and there I can import the mysql package to connect to the db.
Later on I modified the code so that in the first page we type the connection string and on the /search page we do the searches.
This is how the server action for the first page looks.
second photo

When the user goes to the search page we use React Server Components to query the db on the server and we send the results back to the client. (We only keep the connection string on the server for the duration of the server action call)
third photo

The function getQueryResults pulls the table schemas from the database and uses that in conjunction with the user's query to create the SQL query.

const data = await getSQLQuery('mysql', schemas, query);

It sends the schema and query to the OpenAI API, and we get back the SQL Query. OpenAI never sees the data inside the table

It then validates it and executes it on the db

if (!isReadOnlySqlQuery(data.query)) {
    return {
        data: null,
        error: "Query is not read only",
    };
}

This is how the user sees the results on the website
website 1

They can filter with ease using natural language

website 2

The end product

I deployed the project to Vercel very easily connecting it with GitHub.
In the second day I also added support for PostgreSQL in addition to MySQL

You can try it and use it for free on my website
https://dbee.alepacheco.dev

Please try it out and let me know your thoughts in the comments. Your feedback is valuable!
I've also optimized the design for mobile use, making it convenient for on-the-go access.