Creating MCP config for shadcn in Next.js app

Let’s break this down step by step since you’re new to MCPs (Model Context Protocols) but familiar with Next.js and Cursor. The X post you shared from @shadcn introduces a new feature that combines shadcn (a popular UI component library) with something called Model Context Protocol (MCP). It’s aimed at developers like you who work with Next.js and tools like Cursor to streamline building apps with design systems and AI assistance. I’ll explain what’s going on in simple terms and how this can help you in your Next.js projects.

1. What is shadcn?

Since you use Next.js, you might already know about shadcn/ui. It’s a collection of reusable UI components (like buttons, forms, modals, etc.) that you can easily add to your project. Unlike traditional libraries where you install a package and import components, shadcn works differently:

  • It’s a CLI-based tool that copies component code directly into your project.
  • You can customize the components as you like since the code lives in your codebase.
  • It’s built with Tailwind CSS for styling, which makes it easy to tweak the look and feel.
  • It also supports a component registry—a way to organize and share components, styles, and design tokens (like colors, fonts, etc.) across projects.

For example, if you want to add a button component to your Next.js app, you’d run a command like:

npx shadcn-ui add button

This would add a button.tsx file to your project that you can use and modify.

2. What is MCP (Model Context Protocol)?

Now, let’s get to the new thing: Model Context Protocol (MCP). This is where things get exciting, especially since you use Cursor (an AI-powered code editor).

  • MCP is a system that helps AI tools (like Cursor) understand and interact with your project’s components, styles, and design system.
  • Think of it as a “translator” that gives AI the context it needs to help you write code faster and smarter.
  • In this case, MCP connects shadcn’s component registry with AI models (like the ones powering Cursor) so the AI can:
    • Understand your design system (e.g., what fonts, colors, or components you’re using).
    • Automatically set up your project with the right configurations.
    • Suggest or write code that matches your design system’s styles and rules.

For example, if your design system uses a specific font (like DM_Sans) or a color palette, MCP helps Cursor “know” this and apply those rules when generating code for you.

3. What’s the Big Deal with “registry mcp”?

The post announces a new feature: the registry mcp command. Here’s what it does in simple terms:

  • It makes any shadcn component registry “MCP-compatible.” This means the registry (a collection of components, styles, and rules) can now talk to AI tools like Cursor.
  • With one command, it can:
    • Set up shadcn in your Next.js project.
    • Pull in your design system’s components, fonts, colors, and other settings.
    • Configure everything automatically (what the post calls “zero config”).
    • Let Cursor use this information to help you code faster.

The post mentions:

"Your Design System. Now with AI. Zero config."

This means you can have a fully functional design system in your Next.js app, and Cursor can help you use it without you having to manually configure a bunch of stuff.

4. How Does This Work in a Next.js Project?

The thread walks through an example of setting up a Next.js project with this new feature. Let’s break it down:

Step 1: Start with a Vanilla Next.js Project

You begin with a fresh Next.js project (no shadcn or registry set up yet). You’re probably familiar with this—you’d typically run:

npx create-next-app@latest my-app
cd my-app
npm run dev

Step 2: Run the registry mcp Command

Shadcn now has a new command: registry:mcp. When you run it, it does a bunch of things automatically:

  • Connects to a shadcn registry (a collection of components and styles).
  • Figures out the styles, fonts, and tokens (like colors) your design system uses.
  • Initializes shadcn in your project.
  • Installs everything you need, including custom fonts or configurations (like updating next.config.ts if needed).

The thread mentions using @cursor_ai (Cursor’s AI) to help with this setup. Since you use Cursor, this means the AI can follow the rules defined in the registry to set up your project perfectly.

Step 3: Use Components Right Away

Once the setup is done, you can start using components from the registry in your Next.js app. For example, the thread shows a simple Next.js page being built with components from a custom registry called “Alpine Design System.” The AI helps you:

  • Add components that match your design system’s style.
  • Apply the right fonts (like DM_Sans in the example).
  • Use the correct colors and styling.

The thread even shows a webpage being built with these components, like a header with a “Next.js” logo and a button.

Step 4: Mix and Match Components

Here’s where it gets even cooler: because all shadcn registries follow the same structure, you can pull components from other registries too. For example, the thread mentions pulling a component from a registry called “Tailark,” and the AI automatically adapts it to fit your project’s style.

Step 5: Keep Everything Up to Date

If a component in the registry gets updated (like a bug fix or style change), you can ask Cursor to pull the updated version, merge it into your project, and apply the changes—all automatically.

5. Why Should You Care as a Next.js Developer Using Cursor?

This feature is a game-changer for a few reasons:

  • Saves Time: Setting up a design system in a Next.js project can be tedious—installing shadcn, configuring Tailwind, adding fonts, defining colors, etc. With registry mcp, it’s all done with one command.
  • AI-Powered Development: Since you use Cursor, this means the AI can now understand your design system and help you write code that’s consistent with it. For example, if you ask Cursor to “add a login form,” it’ll use the right shadcn components, apply your custom styles, and even set up the right fonts.
  • Consistency: If you’re working on a team or building multiple projects, this ensures every project follows the same design system without manual effort.
  • Flexibility: You can pull components from different registries and the AI will make sure they fit your project’s style.

6. How Can You Try This Yourself?

Since this post is from April 30, 2025, this feature might be new, but here’s how you can get started based on the info:

  1. Make Sure You Have the Latest shadcn CLI
    The registry:mcp command might be in a newer version of shadcn. You can install or update it with:

    npm install -g shadcn-ui

    If the feature isn’t available in the stable version, you might need the canary version:

    npm install -g shadcn-ui@canary

  2. Set Up a Next.js Project
    Create a new Next.js project if you don’t already have one:

    npx create-next-app@latest my-app
cd my-app

  3. Run the registry mcp Command
    The post doesn’t share the exact command, but based on the thread, it might look something like:

    npx shadcn-ui registry:mcp

    This should set up shadcn, connect to a registry, and configure your project. The thread mentions using Cursor, so you might need to enable Cursor’s AI features or install a specific MCP server (more on that below).

  4. Use Cursor to Build Your App
    Open your project in Cursor, and start asking it to help you build pages or components. For example:

    • “Add a header with a logo and navigation.”
    • “Create a login form using shadcn components.” Cursor should now understand your design system (thanks to MCP) and generate code that matches it.

  5. Optional: Set Up an MCP Server
    The web results mention an “MCP server” that acts as a bridge between shadcn and AI tools like Cursor. You might need to install this server to make everything work smoothly. Based on the web results, you can install it with:

    npm install

    in the directory where the MCP server code lives. You’d likely find this on shadcn’s website or GitHub (e.g., mcp.so as mentioned in the web results). Since I can’t search right now, I’d recommend checking shadcn’s official docs or the link in the post for more details.

7. Answering a Question from the Thread

Another user (@glipsman) asked:

"It's still unclear to me—what does 'mcp-compatible' mean in this case? Is it just a file that describes the locations of all components and any shadcn/ui styles?"

Here’s the answer in simple terms:

  • “MCP-compatible” means the registry has been set up to work with the Model Context Protocol, so AI tools like Cursor can understand and use it.
  • It’s more than just a file listing components and styles. It includes:
    • A schema that describes the components, styles, fonts, and tokens in a way the AI can understand.
    • Rules that tell the AI how to set up your project (e.g., how to install fonts, configure Tailwind, or update next.config.ts).
    • A way for the AI to access and apply these components in your code.

So, when a registry is “MCP-compatible,” Cursor can use it to automate setup, suggest components, and keep your project consistent with your design system.

8. What’s Next?

If you’re excited about this, here are a few things to explore:

  • Check out the link in the post (https://t.co/uH73P2FlTR) for the full announcement or documentation.
  • Look into the “Alpine Design System” mentioned in the thread—it seems to be a custom registry you can use as an example.
  • Experiment with pulling components from other registries (like Tailark) to see how the AI adapts them to your project.

If you’d like more details on setting up an MCP server or finding specific registries, I can search for more information—just let me know!

Does this clear things up? Let me know if you want to dive deeper into any part!