A Complete Guide to the Memberstack MCP Server

TL;DR:

• The Memberstack MCP Server lets you build complete web applications with authentication, databases, and Stripe payments in minutes using simple language prompts in Claude Code.
• By connecting Claude directly to your Memberstack project, you can create production-ready features without manually configuring anything in the dashboard. This guide walks you through building a full SaaS application in 35 minutes, demonstrating a workflow that applies to any web project.

The world of web development has changed forever. What if you could build a complete web application, complete with user authentication, a database, and Stripe payment integration, in just 35 minutes using normal prompts? No wrestling with authentication flows, no complex database configurations, and no payment integration headaches.

This isn't science fiction. It's the power of the Memberstack MCP (Model Context Protocol) Server, and in this guide, you'll learn exactly how to use it to build production-ready web applications faster than ever before.

Note: This tutorial demonstrates building a to-do list application as an example, but the techniques you'll learn can be applied to any SaaS application you want to create.

What You Build

By the end of this tutorial, you will create a fully functional web application featuring:

• User authentication (sign up and login functionality)
• Database functionality with full CRUD operations (Create, Read, Update, Delete)
• Stripe payment integration with subscription management
• Gated content that requires payment to access
• Professional UI with custom theming

All of this without manually configuring anything in the Memberstack dashboard. Everything is built through AI-powered prompts in Claude Code.

Prerequisites

Before you begin, make sure you have:

1. A Memberstack account (sign up at memberstack.com if you don't have one)
2. Claude Code installed on your machine
3. Basic familiarity with Next.js (beginner level is fine)
4. A terminal window and code editor

Don't worry if you're new to some of these tools. This guide is designed for beginners and will walk you through each step.

Understanding the Memberstack MCP Server

Before we dive into building, let's understand what makes this approach new. A MCP (Model Context Protocol) server is a standardized way for AI assistants to interact with external tools and services. The Memberstack MCP Server allows Claude Code to directly communicate with your Memberstack project.

What this means: Instead of manually creating authentication flows, database tables, and payment plans in the Memberstack dashboard, you simply describe what you want in plain English, and Claude Code builds it for you. This automatically creates the necessary configurations in your Memberstack project.

The result? You can build in minutes what would normally take hours or even days.

Step 1: Setting Up Your Next.js Project

Create Your Project Folder

Start by creating a new folder on your computer for your project and opening a terminal window in that location. If you are new to Claude Code, there are comprehensive getting-started guides available in the Claude documentation.

Initialize from a Boilerplate

For this tutorial, we start from a Next.js boilerplate. This gives us a solid foundation with all the basic Next.js configurations already in place. Once you created your project through your preferred method:

1. Navigate to your project dashboard and locate the GitHub repository URL
2. Open Claude Code in your terminal
3. Copy your project code into the folder and set the remote origin

Once Claude Code confirms completion, you are ready to move to the next step.

Step 2: Installing Required MCP Servers

Now comes the magic part. We need to install two MCP servers that will supercharge our development workflow:

Install the Shadcn UI MCP

The Shadcn UI MCP allows Claude Code to work with the Shadcn component library, giving us beautiful, pre-styled UI components. Open a new terminal tab and run the installation command for Claude Code (you can find this in the Shadcn UI MCP documentation).

Install the Memberstack MCP Server

The Memberstack MCP Server enables Claude Code to create and configure Memberstack resources directly through prompts. Copy the installation command from the Memberstack MCP documentation and run it in your terminal.

Once both installations complete, close and reopen Claude Code to activate the new MCP servers.

Step 3: Authenticating Your Memberstack Project

When you reopen Claude Code, you'll see a notification about new MCP servers being available. This is where you'll connect Claude Code to your specific Memberstack project.

Select Your App

A browser window will open displaying all your Memberstack apps. Scroll through the list and select the app you want to work with for this tutorial.

Pro tip: Only authenticate the app you're currently working on. This prevents Claude Code from accidentally making changes to other projects.

Reconnect the MCP Server

After authentication, you might see a "MCP server failed" message. Don't panic. This happens. Simply type /mcp in Claude Code, find the Memberstack server in the list, and click "Reconnect." The server should connect successfully.

To verify everything is working, ask Claude Code: "Which apps do you have access to?" It should confirm access to your selected Memberstack project.

Step 4: Starting Your Development Server

With authentication complete, it's time to fire up your development environment:

1. Run npm install to install all dependencies
2. Run npm run dev to start the development server

After a moment, you will see the server URL (typically localhost:3000). Open this in your browser, and you should see your Next.js boilerplate running. Now we're officially ready to build!

Step 5: Building Authentication Pages

Let's create the foundation of our app: the authentication system. This is where the magic of MCP-powered development really shines.

Creating the UI

For our to-do list app, we need a homepage that links to sign-up and login pages. Here's where you'll experience the power of plain-English prompts.

Example prompt: "Transform the homepage into a to-do list landing page with links to sign-up and login pages. Build those authentication pages using Shadcn blocks with default styling."

Why specify 'Shadcn blocks with default styling'? This ensures Claude Code uses well-designed, professional-looking components that work together harmoniously. It's a simple phrase that dramatically improves the visual quality of your output.

Within seconds, Claude Code will generate a clean and professional looking homepage with navigation links and create separate sign-up and login pages with form fields, styling, and responsive layouts.

Implementing Memberstack Authentication

At this point, you have great looking but non-functional, authentication pages. This is where the Memberstack MCP Server really shines. You can now connect these pages to Memberstack with a single prompt.

Example prompt: "Connect these authentication pages to Memberstack. Make the sign-up and login forms functional."

Claude Code will now:

• Install the Memberstack SDK if needed
• Configure authentication in your project
• Connect the forms to Memberstack's authentication API
• Set up proper redirects after login/signup

Testing Your Authentication

Once Claude Code confirms completion, test your authentication:

• Navigate to the sign-up page
• Enter an email and password
• Submit the form

You should be redirected to a dashboard page showing your member ID and email. But the real magic? Check your Memberstack dashboard. You'll see the new member was created automatically. You just implemented full user authentication without touching the Memberstack dashboard once.

Step 6: Building Your Database with Memberstack Data Tables

Now that users can sign up and log in, let's give them something to do. This section demonstrates how to create a fully functional database using nothing but prompts.

Creating the To-Do Interface and Database

Here's where things get really impressive. You can build both the UI and the database functionality simultaneously in a single prompt.

Example prompt: "Build a to-do list interface with the ability to add, view, update, and delete tasks. Store all to-do items in Memberstack Data Tables."

Claude Code will now:

• Create a to-do list UI with input fields and action buttons
• Automatically create a data table in your Memberstack project
• Implement create, read, update, and delete functionality
• Connect everything to your authenticated user

You may need to copy and paste a few error messages back to Claude Code for debugging (this is normal in AI-assisted development), but within minutes, you have a fully functional application.

Testing Full CRUD Functionality

Let's verify everything works using the Create, Read, Update, Delete process:

Create: Click "Add To-Do," enter a task like "Go to the store," and submit. The task should appear in your list immediately.

Read: Navigate to your Memberstack dashboard and find the newly created data table. Refresh the page, and you'll see your to-do item stored there.

Update: Check off the task in your app. Return to the Memberstack dashboard and refresh. The task's "completed" status should now show as "Yes."

Delete: Delete the task from your app. Refresh the Memberstack dashboard one more time, and the task should be gone.

Congratulations! You just built a database-backed application with authentication, and you did it without writing code or manually configuring anything in Memberstack.

Step 7: Adding Stripe Payments and Gated Content

The final piece of the puzzle is monetization. You're going to add Stripe payment integration and make your app accessible only to paying users. Traditionally, this is one of the most complex parts of web development. With the Memberstack MCP Server, it's remarkably simple.

Understanding Context Management

Before we proceed, there's an important concept to understand about working with Claude Code. AI assistants have a limited context window, they can only remember so much of your conversation at once.

When you see "context left until autocompact" in Claude Code, it's telling you that the conversation is getting long. Rather than letting it auto-compact (which might lose important context), it's better to end the conversation and start a fresh one.

Creating a Paid Plan

With your fresh Claude Code session, you can now add payment functionality with another plain-English prompt.

Example prompt: "Create a paid plan in Memberstack for $5 per month. Make it so users cannot access the to-do app unless they have an active subscription."

Claude Code will:

• Create a "Pro Plan" in your Memberstack project
• Set the price to $5/month
• Configure Stripe integration automatically
• Implement gated content logic
• Add an upgrade page for non-paying users

Testing the Payment Flow

Once implementation is complete, verify everything works:

1. Check your Memberstack dashboard. You'll see the new "Pro Plan" listed at $5/month.
2. Log into your app with an account that doesn't have the plan. You should see an upgrade page preventing access to the to-do list.
3. Click "Upgrade" and you'll be redirected to a Stripe checkout page.
4. Complete a test payment using Stripe's test card numbers.
5. After successful payment, verify you're redirected back to the app.
6. Check your Memberstack dashboard again. The account should now show the "Pro Plan" as active.

You've just added complete payment functionality, including subscription management, gated content, and Stripe integration, through simple prompts. No payment API documentation to read, no webhook configuration to debug.

Refining the User Experience

You might notice that after payment, users are redirected to the homepage instead of the dashboard. This is an easy fix with one more prompt: "After successful payment, redirect users to the dashboard instead of the homepage."

This level of refinement is one of the great advantages of AI-assisted development. You can continuously improve the user experience with basic language instructions.

Step 8: Testing the Complete User Journey

Before moving forward, let's do a comprehensive test of the entire application from a new user's perspective:

1. Sign Up: Log out of any existing account and navigate to the sign-up page. Create a new account with a fresh email address.
2. Payment Gate: After signing up, you should immediately see the upgrade page since the new account doesn't have a subscription.
3. Purchase: Click through to the Stripe checkout and complete another test payment.
4. Dashboard Access: Verify you're redirected to the dashboard after payment.
5. App Functionality: Add a new to-do item, check it off, and delete it to ensure all CRUD operations work correctly for the new paid user.
6. Dashboard Verification: Check the Memberstack dashboard to confirm the new user has the Pro Plan active.

If everything works as expected (and it should), you've successfully built a complete SaaS application with authentication, database, and payments in around 35 minutes.

Step 9: Adding Custom Theming (Optional but Recommended)

Your app is fully functional, but let's be honest, it looks fairly generic. This is where we'll add some visual polish to make your application stand out.

Using Tweak CN for Instant Themes

Tweak CN (available at tweakcn.com) is a fantastic resource that provides pre-designed themes for Shadcn UI components. Browse their collection and find a theme that matches your vision.

Once you've found a theme you like (for example, the "Quantum Rose" pink theme), simply:

1. Copy the theme code from Tweak CN
2. Paste it into Claude Code
3. Add a prompt: "Update my Shadcn theme to use this instead"

Within seconds, your entire application will be restyled with a professional, cohesive design system. This is the kind of task that would traditionally require careful CSS work across multiple files, but with AI assistance, it takes moments.

What You Accomplished

Take a moment to appreciate what you've built in just 35 minutes:

• A full authentication system with sign-up and login functionality
• A complete database solution with CRUD operations
• Stripe payment integration with subscription management
• Gated content that requires payment to access
• Professional UI with custom theming

All of this without manually configuring anything in the Memberstack dashboard using plain English prompts.

The Bigger Picture: What This Means for Your Projects

While a to-do list app isn't going to make you rich, this tutorial demonstrates a revolutionary development workflow that you can apply to any project.

Think about it: If you can build a functional app with authentication, database, and payments in 35 minutes, what could you build in a few hours? In a day? In a week?

The possibilities are generally limitless. Whether you're building:

• A subscription-based content platform
• A marketplace with buyer and seller accounts
• A SaaS tool for businesses
• A community platform with premium features
• An educational platform with course management

The core architecture, authentication, database, payments, is the same, and you now know how to build it in minutes rather than days.

Best Practices for MCP-Powered Development

As you continue building with the Memberstack MCP Server, keep these tips in mind:

1. Write Clear, Specific Prompts

The quality of your output directly relates to the quality of your prompts. Be specific about what you want.

2. Authenticate Only What You Need

When connecting Claude Code to Memberstack, only authenticate the specific project you're working on. This prevents accidental changes to other apps and keeps your development environment clean.

3. Manage Context Proactively

Watch for context warnings in Claude Code. When you see "context left until autocompact," exit and reopen Claude Code to start fresh. This prevents loss of important context and keeps responses focused.

4. Test Incrementally

Don't wait until everything is built to test. After each major feature (authentication, database, payments), verify it works as expected. This makes debugging much easier if something goes wrong.

5. Embrace Iteration

Don't expect perfection on the first try. If something isn't quite right, provide feedback and let Claude Code adjust. "Make the payment redirect go to the dashboard instead of the homepage" is a perfectly valid prompt.

6. Use Error Messages to Fix Themselves

When you encounter errors (and you will), copy the full error message and paste it back to Claude Code. Modern AI assistants are excellent at debugging when given clear error information.

Final Thoughts

The Memberstack MCP Server represents a fundamental shift in how we build web applications. By removing the friction between idea and implementation, it democratizes web development in a way we haven't seen before. You no longer need to be an expert to build sophisticated web applications. You need a clear vision of what you want to create and the ability to communicate that vision in plain English.

This doesn't mean traditional coding skills are obsolete. Understanding how these systems work under the hood makes you a better developer and helps you write better prompts. But it does mean the barrier to entry for building production-ready applications has dramatically lowered.

The question isn't whether this technology will change web development, it already has. The question is: What are you going to build with it?

FAQs

Even with the power of MCP servers, you might encounter some hiccups. Here are solutions to common issues:

MCP Server Connection Failures

Issue: The Memberstack MCP server shows as "failed" even after installation.

Solution: This usually happens before authentication. Follow the authentication steps in Step 3, then use the /mcp command to reconnect the server manually.

Authentication Not Working

Issue: Users can't sign up or log in despite the forms being built.

Solution: Verify that your Memberstack public key is correctly configured. Ask Claude Code: "Show me the Memberstack configuration." Make sure the key matches your project.

Database Operations Failing

Issue: CRUD operations don't work or data doesn't appear in Memberstack.

Solution: Check that the data table was actually created in your Memberstack dashboard. If not, ask Claude Code explicitly: "Create a data table in Memberstack called 'todos' with fields for title, completed status, and user ID."

Payment Integration Issues

Issue: The Stripe checkout doesn't appear or payments don't process.

Solution: Ensure your Memberstack project has Stripe properly connected in the Memberstack dashboard settings. The MCP server can create plans, but the initial Stripe connection must be established in the dashboard.

Additional Resources

Memberstack Documentation: docs.memberstack.com

Memberstack MCP Server: github.com/memberstack

Claude Code Documentation: docs.anthropic.com

Shadcn UI: ui.shadcn.com

Tweak CN: tweakcn.com

Original Video Tutorial: Watch on YouTube