Build a Webflow membership site with AI

Using Memberstack with Webflow is not very hard. You just kind of add everything with attributes, but at the same time, I know all of the attributes off by heart because I have like 130 Memberstack apps. You probably don’t because why would you? Now, that just got a whole bunch easier thanks to two different things that came out recently. One of which is the Webflow MCP. If you haven’t seen, I have a video on that at the link in the description. And the other one is the Memberstack MCP. video on that is also at the link in the description. Now, if you

combine the two of those, then what that essentially means is that you can build with Webflow and Memberstack without even having to touch Webflow. Yes, you heard that correctly. You don’t need to know the attributes. You don’t need to know anything. So, I’m going to show you in this video. I’m going to connect the two of them together and then I’m going to build out some off pages on my site simply by talking to Claude. So, I’m going to go ahead and add the MCP configuration, and you can get the instructions to do that from the Memberstack MCP docs and

the Webflow MCP docs. The links to those are in the description below. I already have it copied, so I’m just going to pop open my code editor here, and I’m going to paste in the configuration. There we go. So, now that I’ve pasted that in, I’m just going to go ahead and restart Claude over here. And then what should happen is it is going to pop open and ask me to authenticate both of those MCPs. All right, there we go. So here is the authentication for the Webflow MCP. I’m going to go ahead and click approve on

that. Then it’s going to load. It’s going to take me and ask me which site I want to authenticate. You could authenticate a whole bunch of your sites, but my recommendation to you is to just do one at a time, specifically the one that you’re working on just so that you don’t run into anything where it like accidentally makes a change to the wrong site. I haven’t had that yet, but I don’t really want to. So, just to be safe, I’m going to go ahead and find the exact site that I’m working on, which is right here. Then, I’m going to click authorize app. So, now it says it’s all good. I can close the window. Now, I’m going to do the same thing with

the Memberstack MCP. I’m going to collect that one. I’m going to make sure that is all that’s selected and I’m going to hit continue. All right, so now we’re good to go. And uh just so that I don’t have to mess with it again, I’m just going to go ahead and close up Claude here and then reopen it one more time. All right, so I’m going to see here we can see Memberstack. We can see Webflow. Looks good. Now I’m going to make sure I’m going to say, do you have connection to both the Memberstack and the Webflow MCP? And another thing is you got to have Webflow open here. I’m

going to go ahead and click this plus and just launch this MCP bridge app thing. You have to have that open. So, now that I have that open, I’m going to ask it if it has connection to both. All right, great. It says it’s connected to both. And just to be sure, I’m going to ask it which Memberstack app it’s connected to and which Webflow site it’s connected to. Sometimes they kind of connect to multiple even if you didn’t ask them to. So, just to be sure, ask it. All right. So, if you run into any connection issues like I just did, like

it’s not working, it’s not loading or it’s not telling you anything, just go ahead and close and reopen Cloud Code. That almost always fixes it. So, it let me know that I’m connected to one Webflow site just like I wanted to. And I’m connected to a bunch of Memberstack apps. So, that’s fine. I’m just going to let it know to only work with this one right here, the most recent one that I’ve created. So, I’m going to say only work with this. And then I’m going to paste that in. All right. So now that means that we are connected. So the next thing that I can do is actually ask it to do something. The first thing I’m

going to ask it to do is install my Memberstack script on the Webflow site. So I’m just going to copy that from my Memberstack dashboard. Paste it in like that. And I’m going to say, can you install it on my Webflow site? All right. So it is done and I just hit publish. Now my recommendation to you is the Webflow MCP can publish your site. I’d recommend just publishing it on your own because it doesn’t show you that it’s published then you have to refresh. It’s just it’s not worth it. Just go ahead keep the publishing to yourself.

So I just opened my site and as we can see down here test mode with Memberstack. So that means it has successfully installed my Memberstack app. Now the next thing that I want to do in order to make it work is I want to actually make a signup form. So I already have a page over here which is called sign up. So, what I’m going to go ahead and do is just say on this page, use client first and make me a Memberstack signup form. All right. So, there we go. As you can

see, it has created my signup form and all of the attributes that have been added to it are correct. So, just like that, I don’t need to go ahead and look and cross reference Memberstack attributes. It just knows it because it has access to the Memberstack MCP. One problem, this form looks terrible. And that’s a complaint that I have with the Webflow MCP is it’s not a very good designer at all. So, go ahead and let me do what I do best, which is design this in Webflow. I’ll get back to you in just a second. All right, there we go. So, this looks a lot

better in my opinion. And what I’m going to go ahead and do now is just hit publish on that. And we should be able to see that we’re going to have a working signup form just like that without having to look at Memberstack attributes at all. All right. So, I’m going to go ahead and just test it out right now and see if it is working. Hit sign up. It’s loading just like that. Took me to the homepage. So, now we can see if we go into Memberstack and take a look at the members, we should be able to see that new member which was just created by the signup

form. We can see right there. So, just like that, without even looking at Memberstack attributes, we have a working signup form. So now what I’m going to go ahead and do is I’m just going to copy this page and turn it into a login page. Just like that. Hit create. All right, we are good over here. Now that we have this, I’m just going to go ahead and say I’ve just copied the signup form. Now, can you go ahead and turn it into a login form? All right, so it says it’s done. Let’s

go ahead hit publish and then open this up to see if it indeed did do everything properly. All right. So just like that we can see the attributes have been found. It is a login form with an email and a password field. So it has done everything perfectly just like that with one prompt. We went from signup form to login form. So if you don’t know members attributes that is going to make your life way way way easier. So the next thing that I want to do is create gated content. again without touching the members dashboard or anything like that literally just through talking to AI we

are going to make it. So the first thing that I’m going to do is I am going to make a dashboard page and I am going to create that and then here we are over here. Let’s actually get the client first page structure by copying our login page pasting it in and then deleting our container within there. So now I am just going to go ahead and add a couple things in this. All right. So I just made a page here

that says this is a gated page. So what I’m going to go ahead and do now is just log out so that we can simulate this from the standpoint of a logged out member. So I’m going to go to slashdashboard. And as we can see this is a gated page but I am not logged in. That is a problem. So now what I’m going to do is I’m going to let it know to use the Memberstack MCP to create gated content so that only logged in members are able to view the slash dashboard page. All right. So just like that if I take a

look in Memberstack we can see restricted URLs equal to dashboard and access denied URLs login. I did not touch the Memberstack dashboard. So, I did have a problem with connection. If that happens, again, close claw desktop, reopen it, and it should be working. So, now I shouldn’t have to publish anything in Webflow cuz that was just a Memberstack change. I’m going to go ahead and refresh this dashboard page. And as you can see, it is now taken me to login. So, now what I’m going to do is I’m going to go to the signup page and try to sign up again. And I’m going to see

if it allows me in. All right. So, I didn’t set a redirect. That is totally fine. And now I’m going to go to /dashboard. And as we can see, this is a gated page work. So I just got my off and my gated content set up without actually touching Memberstack. And the only thing I did in Webflow is change the design. So that is how easy it is now using both the Memberstack and the Webflow MCP. If you like this video, please like, subscribe, drop a comment, and I’ll see you in the next one.