Supabase MCP로 앱 찍어내는 방법

0:00 Hello everyone. This is the Demo Mountain Development Team. Today, continuing from last time, I'm going to show you how to build a backend for an app with Superbase . Today, I will show you how to create PRD rules using a cursor and through cloud code, so please watch the video until the end . Honestly, I didn't use super bass much before I did this . After using it this time, I felt that the Super Bass MCP is really good. I think it would be really great if you all watched it to the end and realized that this is the way to build a backend for an app, and moved on with certainty . Yes, today I'm going to take some time to explain to you while playing the screen I recorded . I'm creating a spa base project . You can easily create a project by setting up the organization and

0:47 entering the project name and database password. The important thing is to set the region to Korea , folks. This way, you wo n't experience network latency. If this is in Singapore, it will be slower than if it is in Seoul. And then I searched for MCP on Google . Now, if you originally wanted to use Superbase, you had to manipulate it through the UI, but now, if you can see the cursor through MCP, you can also connect the cloud code here . When that happens, it's much easier to operate Supervisor by using natural language prompting or typing input. If you watch the video till the end, I believe you will understand what I am talking about . First, we connect from the cursor. So, you can see me reading through the official documentation . If you look at it, you can see that you just need to

1:32 paste this, but you need to paste the reference related to the project and then the access token . So after you paste this in, you can see it issuing an access token and finding project references . If you look, I'm going to show you how to find the access token on Google. Actually, it's faster to find it by Googling like this . This is the scene where it is issued. After receiving it and bringing it, this is a slightly edited video, but I brought the reference separately. But this is probably the only one left in the middle . So I'll show you how to fix it later. This part is about MCP settings, so you can just watch it once and follow along . So let's just quickly move on from this part . You can set it like this. So here we set up the reference and access

2:18 talk. If you go this way, the super base MCP will light up blue like this. So, you can think of it as a function that tells you that you can rest these things because they are connected . So let's set it to this state and move on. yes. Now that you've connected the MCP, you need to connect the project. This is Superbase, I just went into the website and created a project and the source code is on my computer right now. So, I need to connect the Superbase project with my local code to make it work together. Originally, in the same case, you had to type it in directly with the code, but now that you've connected the Superbase MCP, I think it would be good for you to know that it's now possible with just a prompt. You can see that the cursor is doing its job well . Yes.

3:05 We originally had to find and bring this part, but if we use MCP, we can fill it in automatically. yes. If you look at it, it still doesn't seem to be connected, but now it's showing me that I'm requesting it to be done through MCP . Then, bring it like this through MCP. If you look at it, it now gets the project URL and things like Unkey . So you can see the direct impact. This way, the cursor will show that the connection has been established, and we have made it easy to connect through MCP without having to go to the Superbase UI . But it's really important to always commit like this . This project could break down if AI mainly does the coding at various points in the middle, so

3:50 I think it would be good to think of it as creating my own checkpoint through the add-point commit. So you can always see commits like this. Now, we will type in the code and it will ask us to design the database for this project . Before you do this, you can see a scene where you ask the cursor what questions to ask to get the database design results. Then please write down your questions as well . I've been using the cursor a lot for this purpose lately. Since I'm showing scenes that I actually develop, I wanted to show you how I actually do it rather than just giving a prepared lecture . So, we actually put it in through the cloud code and showed it to you quickly . Then, you

4:36 can see the steps that the original developer had to take to design the database table being carried out in this way. And finally, write the superbase SQL and make it like this . We're going to put this directly into the Superbase via the Superbase MCP . This is a scene where I was connecting only the cursor to the MCP, but now that I found out that the cloud code can also be connected to the MCP, I came in to connect the super base to the cloud code . This is the same process as before, so let's go over it quickly. Now the cloud code is like this mcp.j Jason says that Jason has to connect the MGP to the file and the cloud code will process it . I hope those of you who are going to use it will do your homework well. You

5:21 can see how to copy and paste it, and you can use the project reference and access talk as you did before. You can see a scene where a part is taken from the cursor and pasted . If you look at it, Claude Code designed the database and had to put this in, but this is a scene where I ask Claude Code to put this database in Superbase directly through Superbase MCP . So, because we've connected the MCP, you can see scenes where DB tables are being created without having to go to the superbase and create the tables yourself . In the end, you can see that AI is now automatically creating the table. And this is because MCP is set to read-only by default. So, I think you should know that you need to remove this read-only to be able to create a table.

6:07 So there will be a scene where we run it again without the lead only . If you run it again, you will now be able to see the scenes without Reed Holly . Claude's code tells me to refer to the database design and the SQL statements that create the database tables through Golbang . If you look, you can see that when you write this, it asks MCP to create a table and connect to it . Then, you create the tables one by one while thinking on your own like this . So there's really no need to go into the super base and look. So I believe and wait that AI will do well . The service we found was not as difficult as you might think . As you can see here, it is possible because there is not much data, but if this were a more commercial service with many functions, I

6:53 think it would still be a bit difficult to process it like this . I hope you all know that a simple side projector is possible . The table was created successfully. If you look here, you can see that I'm committing a technique again . You have to keep committing like this to be able to come back. So this is a very important habit. yes. Actually, I check the table that AI created through MCP every now and then . But I think it's pretty good because it looks like attendance, team, and user settings are all accurately recorded . Now, it 's time to add a login function, and I just request that the login function be completed through the Superbase MCP . So, this is the screen that just appeared. I skipped ahead so quickly that I was able to get to the login function so quickly. But the default is to guide you to authenticate via email . I am

7:39 now requesting that the email authentication feature be removed as we find this feature cumbersome . So, this is a scene where they ask that the login function be changed so that it only allows login with email and a blank ID number, excluding email authentication, because it is cumbersome. Can you see that it's changing the code on its own ? Then, you can check whether you are currently logged in . I'm trying to change the name here, but it's not working. So I'm asking you to change this too . If you look here, you can see that the data is coming in properly after logging in. Now that it's all done, you can see the committing scene. Oh, yes. And at this point, I think we need to write some PRDs that describe the project, or some rules that describe the project . Now the

8:24 cursor is written in the cursor rule, but now the way to save Claude is to save it in a different file, so I think I have to do this, so you can see that I'm organizing it and putting it in now . Actually, this is a good idea to create before starting the project, but I think it's also a good idea to create the UI to a certain extent, do some work, and then create the MVP and then write the rules based on this. That's why if you write the rules too complicatedly, it won't be implemented no matter how many times you do it on the front end . So, I think it would be a good idea to fix the implemented project and then write rules for it and then add additional functions . So, I think it would be good if you all knew that this is a great tip that I learned by actually trying it out in my daily life

9:10 . If you look here, it says flat mode . If you hold down Shift and Tab together, you can now power on the cursor in S mode, which is a mode where you only plan without actually changing or executing the actual code . And instead of the cursor rule, Claude should put this Claude.md in this MD file, so now every time Claude code executes something, it will always think based on the rules written in this file . So, since I wrote the rules in the Claude code after I had implemented the MVP to some extent, it is actually more accurate. So, I think it would be a really good idea to build on this and add more detailed features. yes. Can you see me committing again ? You should always do it as a habit

9:55 . After I implemented this, I looked at the calendar and other parts below, and it said that I was present even though I have never attended. So, it seems that the database, superbase, and screen codes don't match up well with Claude's code . This is an expression of asking for a match, and you can see people doing it all in one line of prompts. Take a look. Okay, now you can read the super base structure and do the Oars linking and stuff like that . In the end, this name change will be applied and if you change it again, it will work fine. And when you press go to work, you can see it going into DV.

10:42 yes. This is what comes in here when you register for attendance . In the past, developers had to create all of these things one by one, but now they can just do it right away through MCP. The AI ​​does everything for us and we just ask them to connect, and then when we cancel the attendance and refresh, you can see the data being deleted again. So, I wanted to show you guys how easy it is to integrate the backend. If we organize the previous videos and the videos we've made so far, we quickly created the screen with Flutter . Next, by connecting to the Sipabase MCP, I asked them to design the database and write SQL statements for the UI, and by asking them to create tables and connect them through the connected MCP, I completed the backend of the app . The

11:27 next video will show the actual distribution and release process of this, so please be sure to watch it as well. If you found this helpful, please subscribe and like . And we're running a program called Demo Mountain Vibe Villains . Now, those who really want to create a product are collaborating with our development team to create a more proper product. So, our development manager is attached and we coach him for almost three months to help him actually build the product . If you are interested, please apply by leaving a comment below. Then I'll see you again next time. thank you