Skip to main content

Starts at 0:11, after the intro.

Lesson 6 of 7 · 13:08 · Intermediate

The Memberstack MCP

Connect the Memberstack MCP and build an app with login, a database and payments.

Where this fits

So far your AI has read the Memberstack docs. The Memberstack MCP goes further: Claude Code can create members, Data Tables and plans in your app without you opening the dashboard.

By the end of this lesson you can

  • Install the Memberstack MCP in Claude Code and connect it to one app
  • Build signup and login pages that work with Memberstack from a single prompt
  • Build a to-do list that saves, updates and deletes items in Data Tables
  • Add a $5 a month plan with Stripe checkout and lock the app to paying members

Heads up: The Memberstack MCP was in beta when this was recorded. Connect only the app you’re working on so Claude doesn’t change the wrong one. Creating prices through the MCP needs a paid Memberstack plan with Stripe connected, so on a free app you may need to add the price in the dashboard instead.

Lesson notes

How it works

What the Memberstack MCP does

MCP (Model Context Protocol) lets an AI tool use outside services directly. The Memberstack MCP server connects Claude Code, Cursor, Codex or Claude Desktop to your Memberstack account. With it, Claude doesn't just read the docs: it can create members, plans, Data Tables and gated content in your app, and search Memberstack's documentation when it needs to.

Each app has a SANDBOX environment for testing, with Stripe test data, and a LIVE environment with real members and payments. Always check which app and which environment Claude is working in before you let it make changes. The MCP is in beta, so features may change.

How to install the Memberstack MCP in Claude Code

You need Node.js installed, because the server runs through npx.

  1. Exit Claude Code, then run claude mcp add memberstack --scope user npx mcp-remote https://mcp.memberstack.com/mcp in your terminal. --scope user makes it available in all your projects.
  2. Start Claude Code again. A browser window opens for you to log in to Memberstack and authorise the connection.
  3. Authorise only the app you're working on, so Claude can't change the wrong one.
  4. If Claude Code says the server failed, type /mcp, select memberstack and reconnect.
  5. Ask "Which app do you have access to?" and check it names the right app.

Building auth and a to-do list with prompts

Start from a Next.js boilerplate with your dev server running. First ask Claude to build a home page plus signup and login pages. Then ask it to make them work with Memberstack. Claude needs your public key from Dev Tools in the dashboard for the front-end code. Sign up once and check the member appears under Members.

Next, ask for a to-do list that saves to Memberstack Data Tables. Through the MCP, Claude creates the table and fields itself, then writes the code that creates, reads, updates and deletes records. Test all four: add a to-do, tick it off, delete it, and refresh Data Tables after each step to see the change. If you hit errors, paste them back into Claude.

Adding a $5 a month plan and locking the app

Start a fresh Claude Code conversation when context is running low, then ask for a $5 a month paid plan and for the app to be blocked unless the member is paying. Paid plans use a Price ID starting with prc_. Through the MCP, creating a price needs a paid Memberstack plan and the LIVE environment with Stripe connected. If Claude gets a Requires Paid Subscription error, create the plan in the dashboard and give Claude its Price ID. The app sends members to Stripe Checkout with purchasePlansWithCheckout, and checks their plan connections for an ACTIVE paid plan before showing the to-do list.

Test with a new account: you should hit an upgrade screen, pay with Stripe's test card 4242 4242 4242 4242, land back in the app, and see the plan active on the member in your dashboard. Ask Claude to set the redirect after payment if it sends you to the wrong page.

Before you move on

0 of 4

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: This app was built in code. Next, you’ll pair the Memberstack MCP with the Webflow MCP to build a membership site in Webflow the same way.

Chapters

Common questions

How do I install the Memberstack MCP in Claude Code?

Run claude mcp add memberstack --scope user npx mcp-remote https://mcp.memberstack.com/mcp, restart Claude Code, and log in to Memberstack in the browser window that opens.

What can the Memberstack MCP do?

It can manage members, create and configure plans and prices, build Data Tables and their records, set up gated content, switch apps and environments, and search the Memberstack docs. It has about 68 tools and is in beta.

How do I switch Memberstack accounts in the MCP?

Run rm -rf ~/.mcp-auth to clear the saved session, then restart your client and log in again.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 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

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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.

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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.

  15. 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

  16. 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

  17. 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

  18. 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

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

  24. 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.

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.