How to Use Cursor Agent and Supabase to Maximize Productivity!

imagine having an AI system that not only helps you code but actually understands your database follows best practices and boosts your productivity like never before today we're combining the power of cursor AI agents with super base to make building apps easier than ever whether you're a season developer or just getting started I'll break down how Cur region Works how to connect them to your super database and even build a beautiful app that users can use let's Dive In so let's start up by creating the front end I've already opened up cursor but let's open up a directory that we can work in go up to file open folder and I'm just going to choose my development directory and we can create a new folder in here we can just call it uh cursor next and hit open okay so now that we have a directory right here I guess we can uh hit command I to open up composer and get started with developing right but instead of diving right into writing the prompts I like to start out with the AI agent anything is fine chat CPT Cloud I like to use cloud just because generally it feels like it gives me better results for developing applications but uh we can start out with a sample prompt something like this where we are asking Cloud that we want to develop a nextjs application uh within the current working directory and we're also asking it to remove any initial boilerplate code that comes with the default uh nextjs app uh if you don't know what nextjs is it's probably the most popular way of developing web applications today uh and some of these things that I've added typescript Tailwind these are also very popular technologies that you could you couldn't really go wrong with nextjs typescript tailin these are the go-to Technologies for developing apps these days and lastly I'm asking it the output should be a markdown format so let's hit send and this is going to give us a set of instructions that we can just pass onto curser agent which would set up a minimal njs application that uh we can just get started working with okay so we can just hit copy to to copy the entire instruction paste it right in there scroll all the way down we don't need this last would you like me to explain blah blah blah part and we can get rid of this trailing 3 dot um comma and also we can get rid of the top I'll provide a step by step guide blah blah blah bit and that's should be good we should be able to give this instructions to uh curser agent make sure that the Asian mode is selected instead of the normal mode and hit submit so I'll be accepting all the instructions that is giving us because with these set of prompts you can't really expect um cursor to do anything dangerous but yeah uh cursor agent does give you options of you know whether you want to accept or not and and once you get to this point you need to accept um you need to basically uh choose a few things like whether you want to uh have the code inside a source directory or not you can just hit return a whole bunch of times to just go with the default choices because that's always the best maybe not necessary but in this case it's it's good enough and it's it's what most people choose anyway so right now um cursor agent is running the nextjs command to set up all the spoiler plate code and then once it's done it'll then proceed to taking care of my second instructions which is deleting all the bullet plate code because um yeah it's it's a whole lot of um mess that you don't really want to deal with so I like to make everything simpler it got got rid of a whole bunch of code on my page. TSX file and then now layout. TSX file it's also taking care of some CSS spoiler plate that just exists right off the bat and then it's deleting some unused images and then lastly it gives me this uh terminal command to run the application locally once the application is up and running we can click this open and see the app in action and we have a beautiful app we do have a single error but I think that's fine for now the app is being displayed nice and beautiful now that we have an empty app that we can work with we're going to have cursor Asin build a beautiful UI for us and to do that we're going to drag and drop a image into cursor agent we can head over to dribble to browse some ideas yes I've searched simple web app and I think I like this first design we can take a screenshot of it and bring it over let's open a new cursor composer window drag it it drag it in there make sure we're on Asian mode and ask cursor to recreate this design we can tag the current page so we can ask cursor to create it in the current page which is the page.

TSX file under Source slapp hit submit note that cursor agent did some searching within the codebase to analyze what's going on what kind of components we already have and what kind of things we don't have and then it's installing a bunch of things that we currently do not have in this project this particular command installed some icons that we can use and also some charts libraries that we can use to recreate that dashboard note that from my experience uploading an image and asking curser to recreate that design in code uh takes a lot of time uh so be patient I think it'll happen if you wait for like a minute or two but finally we got it I think it should look good we can just take a quick look once everything is done generated I think it's done generated so we can go back and view our beautiful application it even gave us this nice animation um and yeah I am very impressed with the uh UI that it created so I'm just going to hit except all at this point we can almost get started with super base code but let's do some cleanups beforehand one thing I noticed with the source code is a a lot of these data are hardcoded meaning they are literally just typed up within the code base like for example these credit card number right here is just typed in there it's just a static HTML uh and there's no efficient way of updating this um value within the code which doesn't work out great when we later add super for it and we can do the cleanup later or right now but um let's just do it right now because it's always better to modify the code base when it's uh lean let's open up a new cursor window and here's the magic prompt that we can use so I'm asking cursor here to extract anything that seems like a variable and take them away and store in a separate file uh and we're going to call them hers uh this is a term that often used within the react context but yeah it just means that we're extracting all these values as separate variables so that it's easier to work with so let's just submit so C is just listing out all the variables that you could find within the page and it's extracting them in a file called use Financial data. TS which looks something like this so basically all these variables are now extracted and they can be modified by the application the way it works later is when we ask actually add super base later on we are going to fetch all the values from super base and we are going to inject those values as the values of these variables I believe it's also modifying the page. TSX file so that it can actually use this um used financial data hook that we just created and I think it's done I think it looks good let's try it out give it a refresh all the data are still there and if we make a modification within this used financial data for example let's give it a huge bump in March we can see that if we refresh the page there's that huge bump in March so we can see that uh the variable is probably being reflected within the application all right I think we're ready to get started with super base we can head over to database.

new to create a new superbase project or we can actually use use the superbase CLI to spin up a superbase project locally meaning it sits in your machine there's so many advantages of using a local version of super based instance which I'll explain along the way let's ask cursor agent to create a local super based instance we don't need to reference any files so I've asked cursor to set up superv locally uh using the superv CLI basically so first it's trying to run the superbase init command let's run it and we can just hit uh return to accept um installing these packages we don't need to generate vs code settings or uh Doo settings we can just um hit return for all them great now we have a super base directory within here and um we have various config files and stuff but we don't really need to touch them for now so let's proceed and it's trying to run the super restart command which spins up the local super instense so let's run it and we get on error okay so we are getting a bunch of errors and and it's trying to solve that but let's actually stop it here because ker failed to execute the super be Star Command because we didn't have Docker running in our machine Docker is a tool used by developers to package an app with everything that it needs to run so that it can run the same way whether it's on your machine or some servers out there once installed you can just click to open up darker desktop and there's no configuration whatsoever that you need to tweak you just have to have it running in the background now that we have Docker running let's try to rerun the same prompt that we had earlier okay I guess it found out that this directory was created but it's just running it just in case which has no harm it's just runs through the same process and superbas CLI knows that it's already there uh so it's not going to do anything but uh we got to the Super Star Command let's run it which should spin up a local instance of super base and this might take a pretty long time if you're running it for the first time could take a few minutes depending on various things that's happening on your machine but just uh sit there uh enjoy a cup of coffee or something and come back a few minutes later and it has spun up if you scroll up we can see various information about the local instance of super base we can view the P URL we can uh find the Anon key but if we copy and paste this studio URL or if we just click into it it opens up the super base uh dashboard basically that we all have seen in the cloud version of superbase uh the nice thing about this dashboard is it's it's a local version of the superbase it's a safe environment uh we can just basically go nuts with creating whatever table we want deleting any data that we want and testing out all things in super base now that we have local superbase instance running it's time to connect our application with the super base instance let's open up a new composer window and ask cursor to create the tables that we need for this app so within this prompt I'm asking cursor to run the migration command of super CLI this migration command creates a new migration file within the superbase directory which is just simp file um that keeps track of what kind of updates that happen within the database once that migration file is created I'm asking cursor to create uh tables that could hold the data uh that are present within this used financial data uh. TS file and then once the table's created I'm asking it to then create some C data basically some sample data that we can use to load within this application and then lastly at the end we're asking cursor to run superbase database reset uh so that we can fetch all the uh sample data that it has created I'm going to add use MPX to run that commands let's run it so the use MPX bit that I added at the end just means that um there's a few ways you could run the super be commands and having MPX at the beginning allows you to run superbase commands without going through the installation process of the superb CLI long so short it's easier to use the MPX version of it so here we are so it ran the superbase migration new uh gave it a name financial data tables and then it created this migration file so this migration file was created by the super CLI and then it's going on in adding bunch of these tables to hold all the data present within the app and then it's also creating a c. SQL file within the superv directory which holds some sample data I think it all looks good let's accept all and run the command and this could take a minute or so okay the app itself isn't connected to superbase yet but we can view all the data within our superbase dashboard let's update our codes so that our app can load the data from our superbase instance So within this prompt I'm asking cursor to load the data from superbase and I also provided the SQL file for the table structure so that cursor knows what kind of tables there are within the subbase database so first it's asking us to install superbase JS which is the correct library to uh load the data uh within this application now it has generated the um environment variables for us to load these data and I think it is the correct environment variables it's not a placeholder or random values so that should be good so it generated a new superb.

TS file which loads the environment variables and initializes uh a super based client Library which is required to fet the data um from the subb database and then it's going on to updating the used financial data hook so that it can actually load the data from super base and from a quick glance it looks okay let's see we can always test it out before accepting it right so we can go back to the app let's hit refresh and it looks like the app is loading I see one error generally this hydration failed error isn't the biggest concern so it might be fine let's just uh tweak the numbers so okay total balance I wonder where this value is coming from ex Revenue data sure let's tweet the Revenue data so we remember we um pumped up the numbers in March which is oh it's this one okay we're going to have to yeah um the order is now messed up so we're going to have to do something about that but um let's forget that for now and um let's change this March number to something even bigger cuz why not so yeah 100 no 133. 5k USD why not and if we hit refresh we can see that the data has been updated so we can confirm that the data is being loaded from Super and we can hit accept all now that we have connected superbe to our app and the data is being loaded from our superbe database why don't we fix that issue that we saw with the chart when I take a look at the chart I notice that the month is being sorted with the alphabetical order and not the numerical order so a a JJ mm uh so on and this is a problem and if we take a look at the database how these data are stored the month is actually just a string it's not a number or it doesn't represent a date it's just a string of texts and because um the data format is not a actual date time or date or anything um the issue is being caused and the proper solution for this is to drop this month column and then introduce a new new month column with a proper date type column which can properly hold uh datetime values and can be sorted with date and so on and the application should be able to handle that uh nicely so let's go back to curser and ask cursor to do that so the problem I'm giving cursor is first I'm explaining the issue that I'm experiencing a sorting issue with the uh month column of the Revenue data table and uh the cause is because because the month column is a string type so I'm asking it to update it to a DAT type and I'm also asking it to use the superb CLI again to create a migration file uh and then update the uh column type there I also mentioned that uh not just updating the tables but it should also update the uh c. SQL file so that it can properly insert some dummy uh date type columns lastly I'm also asking it to update the application code so that um the app can handle the daytime column coming in instead of the string type so it's starting out with running the superv migration command which created this new migration file now I should be writing into this migration file to update the table data which it is doing has also updated the uh c.

SQL file so that instead of having month uh in as strings it has actual date values and yeah everything looks good let's just accept all and run the DB reset command which again could take a minute or so but once the database is back up and running we should be able to view the new format of data all right DB reset is done running we can see the new month column uh the type has been updated and let's take a look at the application if we hit refresh we see that okay so we see the uh dates being displayed which works I like the you know alphabetical display representation right here but that works as well I wonder if we can just ask a quick question quick ask to uh curser to update the format so I'm telling cursor that um although most of the updates were good I like the threel abbreviation display of the month so um update the app so that it can actually kind of keep that design interesting it's actually updating the used Financial data. TS to do that I thought it would take care of it on the p. TSX file but let's just trust cursor and see what it does so it's as the data is coming in from super base it's actually updating the format right there on the Fly which works yeah sure let's accept it and let's take a look hit refresh and we have one error that is because that's not the hydration aor I wonder what happened display month H if we take a look at the page.

TSX file [Music] the you know what let's oh yeah Revenue data is here right uh yeah use financial data uh Revenue results and format Revenue data you know what let's ask curser once again hopefully this prompt works but uh if it doesn't I guess this is not a big deal I'm just going to move on let's see if CER can figure it out it's uh doing something that didn't do before which is scanning through the code base and yeah it is actually indeed tweaking the page. TSX file to yeah modify the display month which sounds like the right approach and it is March April May June July August beautiful I love it I love it let's accept it now that we have edited one of the tables we now have two migration files and if you remember from earlier in the video I provided one of the migration file as context for cursor so that you can understand the database schema but now that we have two migration file and if the project keeps growing we're going to get many more migration files it's not realistic at all to throw every single migration file along the way to cursor just because we wanted it to understand the database schema well how can we fix this you can actually tackle this issue by using model Contex protocol or mCP mCP was developed by anthropic the company behind cloud and it's basically a standardized protocol for AI to talk to various tools such as database and luckily there is the official postgress mCP server that we can just uh use with superbase and if we take a look at the documentation uh for local superbase instance we can first run this npx superb status command to get all the uh credentials and then uh basically we can just copy and paste this command into the cursor settings page so let's open up a new terminal and run this super status command and we get all these credentials the one that we want should be the DB URL which is this one so let's copy that one and let's go to settings let's close this terminal features and there's a mCP servers let's add a mCP server I'm just going to paste in what I have in the clipboard we're going to change the type to command server name can be local super base or whatever you want to name it and let's copy this piece of string and the um DB URL goes at the end so let's go at the go to the beginning we can delete this whole thing and this should do it all right let's check out if um curer can take a look at our database schema through mCP so we can simply ask something like what tables there are in the database we could just say what tables there are in the database and just make sure that it uses mCP I'm just saying use mCP and the cursor made a call using the mCP to our database and got all the table info such is uh card info transactions expense categories weekly metrics and Revenue data which matches the set of tables that we have in our database great uh let me get more details about the structure of these tables sure why not so I I'm assuming it's I don't have to assume I can take a look at what kind of query it's uh throwing its way so it's taking a look at the table name the column name data type basically returning uh more detailed breakdown of the table so yeah uh along with the table name it's returning the uh column name column types so great um I guess in this video I won't go into like actually adding another feature that would require table context but using this prompt or something similar you could always um add the database schema as context to uh curser one issue with this mCP server is currently there is no uh project level settings for mCP meaning I set this mCP server uh Command right here but if I have another super base project that I have I totally have a very different configuration for this uh taking a look at the superbase instance for example if I'm actually connected to the remote instance then um I'm going to have to update it here uh and if I come back to this project I'm going to have to update it again but hopefully in the future we get project level mCP settings so that we can have uh different mCP server settings per project but for now this is uh this is the way to go I think our application is coming together and it's almost ready to put it out in the public but one thing we cannot forget is security when we jump into the Super dashboard we can see this RLS disabled RLS stands for role level security and it's the postest mechanism to protect data from Lous access uh when it's disabled uh any user basically can perform any action against this database such as reading every single data or even deleting every single data which is not great right so we want to enable it and once we enable it that actually shuts out every single action against the table and we can Define policies uh which are like conditions which allow certain actions to be performed under certain conditions so we want to enable it but um there's two ways to enabling it we can just hit this and enable it from the dashboard or we can come back to curser and let curser handle it which is what we want to do so uh this is going to be another migration and before I dive into ciser and let let it do anything I want to share another tip that I have and that is uh at super base we provide many predefined prompts that we created so if you go to sub. com docs start and scroll all the way down we have set of AI prompts that are um that covers a common use cases that occurs with superbase and we happen to have one for creating Ro level security policies what you can do is you can just copy this prompt come back to cursor hit uh command shift p and uh search for new cursor rules one at the top click that and give it a name where it go new cursor rule uh Ro level security uh rule sure why not and we can paste in what we have here in the content body section now the nice thing about uh this rules is uh it comes with a description in a glob description is um basically when should this rule be applied to uh what files under what conditions in human language and Globs is against what type of files should this be um applied to in our case we wanted it to apply to SQL files so we're just going to specify the SQL nice thing about this prompt is it comes with this set of description and gloves that you can just copy and paste and save that it sits under this do cursor SL rules and once we have that there whenever we trigger anything that um cursor things matches the glob or the description um the rules will be automatically be applied um to The Prompt that we give to curser so let's have cursor enable Ro over security and write bunch of policies that could uh basically secure out our application so in a real application you probably want to give users some right access but for this example I'm just going to say allow read access for every single users and just don't allow any kind of write access for anybody let's say submit so for this prompt I'm asking curser to once again create a migration file using the superb CLI with MPX and then enable roll over security um and then in that actual production app you probably want to Grant some kind of right access to the users but for this particular example I'm am going with um just allow anybody to access the dashboard but do not allow anybody to write to the database whatsoever let's hit send and see what cser can come up with so you can see that this rule was automatically applied to cursor which is great it's working out great and let's run this command to once again create a new migration file and then within this file cursor will write the roller World security policies it that will allow read access to every single users and not allow any um right access to any other the table whatsoever which basically means no policies it looks good I think it looks good let's accept all and uh reset database guess I forgot to include that in the prompt but uh cursor will need to run this super VDB reset command to have this roll security policy be applied to the local instance of the super base that we have running all right let's head back over to the app refresh confirm that all the numbers are loaded if we go to our dashboard we can see that we no longer have the warning and if we go to authentication policies we have a bunch of policies that allow certain action to be performed by the user now that our app is all secured I think it's time to deploy it to the cloud let me start out by creating a new superbase instance we can just head over to database.