- 0:00
I have literally never been more excited to make a video about something than I am right now and I am not kidding. If you know what’s on my screen right now, then you probably already know why. Memberstack has just released an MCP server into beta. So, what does that mean if you don’t know what an MCP server is? It means you can build a full-on web app with off, payments, and a database without even touching your Memberstack dashboard. Yep, I’m not kidding. You’re going to watch me do it in this video and you’re going to be able to use this. So, the links to
- 0:30
everything you’re seeing are at the link in the description below so you can follow along with everything that I’m doing and try this out for yourself. Without further ado, let’s get right into it. So, first things first, I already have a folder on my computer over here and I have a terminal window open. So, if you haven’t five coded before, there’s a link in the description to a video where I explain how to get started from scratch up to having a project set up with Claude code. So, anyways, I’m going to go ahead and start from the Next.js boilerplate, which is my favorite way to start, link in the
- 1:01
description as always. So, I’m going to name it the same thing that I had the folder on my computer name. Okay, that isn’t working cuz I’ve already tried it before, so let’s just go ahead and add a two to the end of it. So, we’re going to create that and in the meantime, we are going to pop open Claude code in our terminal. All right, so now that that’s done, let’s go ahead and continue to the dashboard and pop open the repository in GitHub. I’m going to copy that URL. I’m going to go to Claude code and I’m going
- 1:31
to say, I just made a new project from a boilerplate, copy the code into this folder, and set the remote origin. All right, there we go. It is done. So, the next thing that we’re going to do is we’re actually going to exit Claude code because now we’re going to install a couple of MCPs. So, new tab over here. First MCP we’re going to install, which I use all the time, is the Shadcn/ui MCP. Link is in the description to that. So, just going to go ahead and paste in that command for Claude code, and then
- 2:01
of course, we’re going to install the Memberstack MCP server as well. Link to this is in the description below. There is a Claude code example right here. So, I’m just going to go ahead and copy that, and I am going to paste it into this terminal window. So, all right, it says it was done. Now, let’s go ahead and open Claude code. So, as you can see, it’s saying you have new MCP servers. We’re getting started. All right, there we go. So, it’s open, and as you can see now, it is opening a new window here where I can select which
- 2:31
app I want to authenticate. So, just like this, I’m going to scroll down and select the app that I want to authenticate. And my recommendation to you is make sure you only have the app that you want to work on authenticated. That way, it doesn’t go ahead and update other things, cuz obviously, you don’t want that. So, MCP to do, that is the exact one right there. So, authorization successful. I can go ahead and close this. Now, you can see it says MCP server failed. So, all I got to do here is do {slash} MCP. We can see Member
- 3:02
Stack says failed, and I’m going to hit reconnect, cuz now it’s authenticated, so I can just reconnect. As you can see, it’s connected. So, now I’m going to just ask it. This is the first thing we’re doing with it. I’m going to say, "Which app do you have access to?" All right. So, as you can see, it knows that it has access to the MCP to do app, which was created today. Wow, I have 127 total Memberstack apps. That is insane. All right. So, anyways, this is working. Now, let’s go ahead and start up our dev server. So, first, I’m going to run npm
- 3:33
install. Just like that, and then I’m going to run npm run dev. It’s going to load for a second, and then it is going to give me the dev server URL, localhost 3000. It’s probably going to be the same thing for you. So, now we can see this open on my screen, and that means we are officially in business. We are running and we can start our development. We have the MCPs done. We have the boilerplate up and running. Now it’s time to get to it. So, first things first, we need off. And this is going to be a to-do list app.
- 4:04
So, I’m going to write a prompt right now telling Claude to turn this home page here into a thing that says like to-do list and links to the off pages and then build out the off pages. And the way that I do this is using shadcn blocks with default styling. You’ll notice I always say in my prompts shadcn blocks with default styling. You’ll see why. It just makes everything look a whole bunch better. There is a link as well in the description to a video where I explain why exactly I do that. All right. So, let me write up my prompt. All right, there we go. So, it has done
- 4:54
what I asked it to. It made this little home page thing that links to the sign up in the login page. And this is what our sign up and login pages look like. They look pretty good if you ask me. Basic, but we’re going to make them a bit prettier later on. So, this looks great, but this is just the UI. Now what I’m going to go ahead and do is I’m going to tell it to make this work with Memberstack. So, yes, we are going to have it set up authentication without me actually having to touch the Memberstack dashboard. It’s crazy. Check this out. All right, there we go. So, it says that
- 5:30
it is now working with Memberstack. Let’s go ahead and try it out. I’m going to hit sign up and I’m just going to enter some stuff in here. There we go. All right. So, it took me here. It’s showing me a member ID and my email. So, I suppose it is indeed working. Let’s go over here and check members. And as we can see it has created a member. So yes, I just one shotted my auth. Now, the next thing that I’m going to want to do is I’m going to want to turn this into an actual to-do list. So, I’m going to let it know to build out that UI and to make it work using Memberstack data tables. And yes, I am about to one shot both the
- 6:02
UI and the functionality at the same time. That is how insane this is. All right, I’m going to do that right now. Okay, so it worked. One prompt followed
- 6:43
by copying and pasting error codes into Claude code fixed it up. We now have a working to-do list. So, take a look at this. I’m going to go over here. I’m going to click add to do and I’m going to say like go to the store and click create to do. And as you can see it gets created. So now, if I go over here into Memberstack, first of all, it’s created this data table. I mean, can we just take a second to think about how cool that is? And then, I’m going to refresh and as you’re going to see, we now have the go to the store to-do list right there. Now, I’m going
- 7:14
to go back over here and I am going to hit check. As you can see it’s been updated. This just looks amazing. Now, if I go over here, go to the store, which is currently set to completed no, is now completed yes. Now, if I go back over here and I delete go to the store and I go back to Memberstack and I refresh, as we can see it is gone. So yes, we just got our entire functionality working with one prompt and a couple of back and forths about bugs. So, just like that, we have auth and we have our functionality working.
- 7:46
We’ve done I haven’t touched the Memberstack dashboard. I only went in to get the public key and send it to Claude. That’s literally it. Okay, there’s one more thing we need to do. And that one thing is typically a total pain when you’re vibe coding and that is payments. So, I want my mediocre to-do list app to be $5 a month and I don’t want anyone to be able to use it unless they’re paying $5 a month. So, gated content and payments. I’m going to go ahead, close up Claude Code, and reopen
- 8:18
it because you can see here it says context left until auto compact. We do not want it to auto compact. We want to gracefully end the conversation and start a new one. So, I’m going to close up Claude Code, reopen Claude Code, and then I’m just going to say, "Hey, I want it to be $5 a month. Please make a paid plan in Memberstack and make it so no one can use the app unless they’re paying $5 a month." I’m going to do that right now. We’ll get back to you once we’ve got our payments done. All right, there we go. Yes, you are
- 9:00
seeing this correctly. I’m going to go into the Memberstack dashboard right now and you just watched everything I did. We have the pro plan and it’s $5 a month. We have here I’m on an account that doesn’t have it. So, back again, if I go into Memberstack and I go to members, we can see this julian@me doesn’t have any plans associated with it. So, it’s showing me this. It’s like, "You need to upgrade. You cannot use this unless you upgrade." So, I’m going to go ahead and click upgrade and yes, it is opening the Stripe checkout. It is that easy to add Stripe and to make your
- 9:32
app payments work. Okay, now I’m going to do a quick test payment. All right, so we just did our test payment and if I go over here now into Memberstack, as we can see the pro plan is active. That means we just added payments to our app without touching Memberstack with just a few simple prompts to Claude code. That is the most insane thing ever. Now, I just did another prompt telling it to redirect to the dashboard after payment cuz it took me to the home
- 10:01
page and I don’t want that, right? Okay, so now as we can see redirecting me to the dashboard page. So, this works. Let’s go ahead and just test out adding something again. Let’s just say something random, goo. There you go. We all got a goo every now and again. That sounds gross. Okay, anyways, check off goo. Goo is working. Can I delete the pet a dog task? I want to pet a cat instead. Okay, so take a look at that. Now, I’m going to test this whole flow from scratch. I’m going to go ahead and hit log out. I’m going to go to sign up. I’m just going to write some random
- 10:31
stuff in. All right, there we go. So, I signed up and immediately took me here say, "Hey, you need to pay." So, again, I’m going to do a test payment. All right, so after the test payment, it took me to the dashboard. Right here, we can go into Memberstack. We can see that .com has the pro plan. Yes, everything is working. How insane is that? And just one more time, let’s go ahead and add a to-do and just write some random stuff into it for testing purposes. As we can see, it’s right
- 11:02
there. We just built this app with off, with payments, and with a database. The timer on my clock right now is 30 minutes with waiting for Claude. That is how insane it is. And finally, I’m going to give you one more thing. This looks nice, you know, this looks good, uh but it also looks very generic, right? So, what I want to do is I want to just give it a better look. And what better way to do that than with Tweek UI. The link is in the description. Tweek UI is like themes for Shad UI. They have a bunch of super nice ones, so
- 11:34
I’m going to go ahead and find one for example like this. This nice pink theme Quantum Rose. I’m going to copy that code. I’m going to paste it in the cloud code, and I’m just going to say, "Hey, update my Shadcn theme to use this instead." All right, everyone. Take a look at this. Without doing anything in the Memberstack dashboard, we got all of that set up. Now we have this beautiful pink theme. We are at 35 minutes on my clock. This is why I was
- 12:06
so excited to show you this. This is literally life-changing. I spent 35 minutes on this, and we have a beautiful, performant, well-working, and easy to manage to-do list app. Now, are you going to sell this app for $5 a month? Nobody’s going to buy a basic to-do list app for $5 a month, but that’s not the point of this video. You can build whatever you want to build. I spent 35 minutes, you should spend 3 hours. You should spend 8 hours. You should spend a week and build whatever idea it is that you may have. You can seriously build anything that your mind
- 12:37
can imagine with this using simple plain English. This is going to unlock so many opportunities. I do not even know how to explain it. I am so excited that this is now in your hands. I hope you enjoyed this video. Please let me know what you’re building with this because I am so excited to see it. Have a great day, and I hope you enjoyed.