[**Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →**](https://lp.logrocket.com/blg/content-advisory-board-signup)

[![LogRocket blog logo](https://blog.logrocket.com/wp-content/themes/logrocket/assets/logrocket-logo.png)](https://logrocket.com/)

2025-10-03

1610

#ai

Chizaram Ken

207953

102

![](https://blog.logrocket.com/wp-content/uploads/2023/04/logrocket-logo-1.png)

## See how LogRocket's Galileo AI surfaces the most severe issues for you

### No signup required

Check it out

Galileo AI Overview - May 2025


![Video Thumbnail](https://embed-ssl.wistia.com/deliveries/d13588ad6864cb4841845467c9b8feb8.webp?image_crop_resized=1920x1079)

1:15

Click for sound

You ask Claude Code or Cursor about a shadcn/ui component, and it’ll confidently spit out props that don’t exist, dust off patterns from 2023, or just flat-out make things up.

![I Tried Shadcn CLI 3.0 — Here’s What I Learned](https://blog.logrocket.com/wp-content/uploads/2025/10/ShadCN.png)

Most of the time, this comes down to version changes. shadcn/ui keeps evolving, new props, updated requirements, and agents often lean on older docs or outdated patterns.

Other times, it’s simply the AI guessing. This is the not-so-smart side of AI: it won’t admit “I don’t know,” so it stitches together whatever scraps it half-remembers from training instead of the actual component code.

Case in point: your agent might suggest `<Button loading={true}>` even though shadcn/ui’s Button has no `loading` prop. It’s pulling from some other UI library in the background.

The truth is, it guesses because it has almost zero library context. And that’s exactly why we’re going to look at the shadcn/ui [MCP server](https://ui.shadcn.com/docs/mcp), to give your agent real, live access to the component library instead of making it wing it.

Before we dive in, let’s set the stage. The goal of this article is simple: show you how to use the shadcn/ui MCP Server in your workflow so your AI agent stops generating broken components. With the right setup, you’ll get reliable, up-to-date ShadCN code instead of outdated patterns or random guesses.

### 🚀 Sign up for The Replay newsletter

[**The Replay**](https://blog.logrocket.com/the-replay-archive/) is a weekly newsletter for dev and engineering leaders.

Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.

Fields marked with an \* are required

Email \*

If you are a human seeing this field, please leave it empty.


## **ShadCN MCP Server**

The ShadCN MCP (Model Context Protocol) server acts as a link between AI agents and component registries, and it fundamentally changes how AI agents interact with component libraries. Unlike [other ShadCN MCPs](https://github.com/Jpisnice/shadcn-ui-mcp-server) that provide only data for ShadCN components, this official MCP server provides more recent access to:

### **Live component access**

AI assistants gain direct connection to current component specifications, ensuring they always work with the latest versions and configurations.

### **Registry integration**

The server connects to multiple component sources, this includes the official shadcn/ui registry, giving your AI agents access to more detailed data of components needed for your project. So, you are no longer limited to just ShadCN.

### **Accurate installation**

AI Agents can now interpret conversational prompts like “add a login form” or “create a contact form using Shadcn components” and translate them into proper registry commands and needed installations.

### **Better component selection**

The server enables AI Agents to search the available components and make more informed decisions about which components best fit specific requirements.

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image7.png)

## **Quick setup**

Setting up the Shadcn MCP server is a straightforward process for any major AI coding environment. We will be using Claude-code for this, go ahead and install it using the command below:

```bash
curl -fsSL https://claude.ai/install.sh | sh
```

Now open up your CLI, prompt `Claude`. You should know Claude is available if you see this:

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image11.png)

Now go ahead and install the MCP server by running the command below in your project directory:

```bash
npx shadcn@latest mcp init --client claude
```

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image3.png)

Go ahead to restart Claude Code now. If it was properly installed, you should see this:

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image9.png)

After that, you can use the `/mcp` command, and you will be able to see the MCP tools:

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image4_0a7fb3.png)

There are about seven tools available. You can immediately start using prompts like “Show me all available components in the ShadCN registry” or “Add the button, dialog, and card components to my project.”

### **Configuration for other environments like Cursor**

Add the MCP server configuration to your project’s MCP configuration file:

```json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}
```

### **Multi-registry support**

Configure additional registries in your `components.json` to access private or third-party component libraries:

```json
{
  "registries": {
    "@acme": "https://registry.acme.com/{name}.json",
    "@internal": {
      "url": "https://internal.company.com/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}"
      }
    }
  }
}
```

At this point, we can go ahead to build something that actually utilizes a whole lot of ShanCn components, like a kanban board.

## **Building Kanban board**

We want to build a Kanban board for my article writing workflow at LogRocket Blog. Here’s my complete process from initial research to publication:

### **Topic research**

- Search for topics I’m familiar with and passionate about
- Check the LogRocket Blog archives to see if the topic has been covered
- Assess coverage depth – is there room for a fresh perspective or deeper dive?

### **Content strategy**

- Define learning outcomes – What will readers gain from investing 8 minutes in this piece?
- Determine tone and approach – Should this be highly technical and direct, or include light humor to ease the reader’s tension?
- Research competitor content and identify unique angles

### **Draft an outline**

- Draft a detailed article structure
- Submit the outline to the manager for review and approval
- Gain approval and work on considerable feedback from the manager

### **Create content**

- Write the approved article following the outlined structure(Sometimes you make a lot of tweaks for better quality)
- Ensure technical accuracy and readers’ engagement
- Self-review for clarity and smooth flow

### **Editorial process**

- Submit to the editing team for review
- Address comments and suggestions from the editor (there’s always at least one!)
- Finalize revisions and prepare for publication

### **Publication & launch**

- Article goes live on LogRocket Blog
- Monitor initial reader engagement and feedback

Let’s go ahead and create the Kanban board for this workflow. Here is a detailed prompt that embodies our workflow:

```text
Build a Kanban board component for my LogRocket Blog article writing workflow. I need a drag-and-drop board with 6 columns representing my workflow stages:

- Topic Research - For initial topic exploration and validation
- Content Strategy - For planning learning outcomes and approach
- Draft Outline - For creating and getting approval on article structure
- Create Content - For writing the actual article
- Editorial Process - For editing, revisions, and feedback
- Publication & Launch - For live articles and monitoring

Each column should:
- Display the stage name clearly
- Show a count of cards in that column
- Allow drag-and-drop functionality between columns
- Support adding new article cards

Each article card should include:
- Article title/topic
- Brief description or notes
- Priority indicator (high/medium/low)
- Due date or target timeline
- Current status within that stage

Please use ShadCN components like Card, Badge, Button, and any drag-and-drop utilities available, if you do not find the exact names of these components use something components that are very similar. Make it clean, professional, and suitable for a content writer's daily workflow. Include sample article cards in different stages to demonstrate the workflow.
```

We will feed this to Claude-code and see what the result is like. Right away, it goes to work:

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image1.png)

We’re done, I guess:

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image10.png)

This is what the first result looks like:

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image8.png)

I feel Claude omitted the point where ShadCN components need CSS variables defined. Will tell it to fix that.

* * *

[![](https://blog.logrocket.com/wp-content/uploads/2023/04/Screen-Shot-2023-04-05-at-3.19.07-PM.png)\\
\\
**Over 200k developers use LogRocket to create better digital experiences** \\
\\
![](https://blog.logrocket.com/wp-content/uploads/2022/08/rocket-button-icon.png)Learn more →](https://lp.logrocket.com/blg/learn-more)

* * *

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image5.png)

Here is what the UI looks like now:

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image2.gif)

I wanted to see how different this would have been without the MCP server, so I did another test with Gemini CLI. Here was how the first result came out:

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image12.png)

Here is the final result:

![](https://blog.logrocket.com/wp-content/uploads/2025/09/image6.gif)

Same prompt, same number of iterations, but not the same results, and that exactly explains why you should utilize the ShadCN MCP server for your next project, that’s if you choose to use ShadCN as your UI library, though.

## **Troubleshooting**

Here are some common issues you might encounter:

### **MCP Server not responding**

When your MCP server isn’t picking up your prompts:

- **Check your configuration** – Make sure the MCP server is properly set up in your `.mcp.json` file and enabled in your client
- **Restart your client** – After any configuration changes, restart Claude Code, Cursor, Windsurf, or VS Code completely
- **Verify ShadCN installation** – Ensure you have ShadCN properly installed in your project directory
- **Test network access** – Confirm you can reach the configured registries from your development environment

### **Registry access problems**

If components aren’t loading from your registries:

- **Double-check components.json** – Verify your registry URLs are formatted correctly and accessible
- **Test authentication** – Make sure environment variables are properly set for private registries in your `.env.local`
- **Confirm registry status** – Check that the registry is online and responding
- **Validate namespace syntax** – Ensure you’re using the correct `@namespace/component` format

### **Installation failures**

When components refuse to install:

- **Verify project setup** – Confirm you have a valid `components.json` file in your project root
- **Check directory paths** – Make sure target directories exist and are writable
- **Review permissions** – Ensure you have write permissions for component directories

### **No tools available**

If you’re seeing “No tools or prompts” messages:

- **Clear NPX cache** – Run `npx clear-npx-cache` to refresh cached packages
- **Re-enable MCP Server** – Try disabling and re-enabling the MCP server in your client settings
- **Check logs** – In Cursor or Windsurf, go to View → Output and select “MCP: project-” from the dropdown to see detailed logs

Based on the shadcn/ui MCP Server Documentation and troubleshooting experience. There are other ShadCN MCP servers; you can try [this as well](https://github.com/Jpisnice/shadcn-ui-mcp-server).

## **Conclusion**

The gap between AI agents with and without access to live component docs is huge. With the shadcn/ui MCP server, Claude Code delivered accurate, working components aligned with the latest specs. Without it, Gemini CLI slipped into outdated patterns and even made up props that never existed.

This goes beyond convenience; it’s about reliability. The MCP server cuts out the cycle of AI-generated code that looks right but fails at runtime because it’s based on guesswork, not facts.

For developers using shadcn/ui, the setup takes just a few minutes and can save hours of debugging broken components. With MCP in place, your AI coding assistant stops guessing and starts acting like a partner that actually understands the library.

Learn more about MCPs here:

- [Understanding Anthropic’s Model Context Protocol (MCP)](https://blog.logrocket.com/understanding-anthropic-model-context-protocol-mcp/)
- [The top 15 MCP servers for your AI projects](https://blog.logrocket.com/top-15-mcp-servers-ai-projects/)

- [#ai](https://blog.logrocket.com/tag/ai/)

![](https://blog.logrocket.com/wp-content/uploads/2022/06/footer-cta-dots-left.png)![](https://blog.logrocket.com/wp-content/uploads/2022/06/footer-cta-dots-right.png)

![](https://blog.logrocket.com/wp-content/uploads/2022/09/logrocket-logo-frontend-analytics.png)

## Stop guessing about your digital experience with LogRocket

[Get started for free](https://lp.logrocket.com/blg/signup)

#### Recent posts:

[![the replay march 18](https://blog.logrocket.com/wp-content/uploads/2026/03/The-Replay-Graphic-20.png)\\
**The Replay (3/18/26): Hiring in the AI era, coding isn’t dead, and more**](https://blog.logrocket.com/the-replay-3-18-26/)

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the March 18th issue.

[![](https://secure.gravatar.com/avatar/bdb8fc1c58c8a14e8c52f80c0ff964372237e773db8d0d1a179151099f28c358?s=50&d=mm&r=g)](https://blog.logrocket.com/author/matthewmaccormack/)[Matt MacCormack](https://blog.logrocket.com/author/matthewmaccormack/)

Mar 18, 2026 ⋅ 29 sec read

[![ken pickering ai hiring quote card](https://blog.logrocket.com/wp-content/uploads/2026/03/3.18-Ken-Pickering-Engineering-Hiring.png)\\
**Thinking beats coding: How to hire the right engineers in the AI era**](https://blog.logrocket.com/how-to-hire-the-right-engineers-in-the-ai-era/)

A CTO outlines his case for how leaders should prioritize complex thinking over framework knowledge when hiring engineers for the AI era.

[![](https://blog.logrocket.com/wp-content/uploads/2026/01/ken_pickering-150x150.jpeg)](https://blog.logrocket.com/author/ken_pickering/)[Ken Pickering](https://blog.logrocket.com/author/ken_pickering/)

Mar 18, 2026 ⋅ 4 min read

[![](https://blog.logrocket.com/wp-content/uploads/2026/03/Exploring-Vercels-JSON-Render-build-dynamic-UI-from-structured-data.png)\\
**Exploring Vercel’s JSON Render: build dynamic UI from structured data**](https://blog.logrocket.com/vercel-json-render-dynamic-ui/)

Build dynamic, AI-generated UI safely with Vercel’s JSON Render using structured JSON, validated components, and React.

[![](https://blog.logrocket.com/wp-content/uploads/2021/01/AirBrush_20210107121828-150x150.jpg)](https://blog.logrocket.com/author/emmanueljohn/)[Emmanuel John](https://blog.logrocket.com/author/emmanueljohn/)

Mar 17, 2026 ⋅ 11 min read

[![](https://blog.logrocket.com/wp-content/uploads/2026/03/Stop-wasting-money-on-AI-10-ways-to-cut-token-usage.png)\\
**Stop wasting money on AI: 10 ways to cut token usage**](https://blog.logrocket.com/stop-wasting-ai-tokens-10-ways-to-reduce-usage/)

Learn practical techniques to reduce token usage in LLM applications and build more cost-efficient, scalable AI systems.

[![](https://blog.logrocket.com/wp-content/uploads/2021/01/AirBrush_20210107121828-150x150.jpg)](https://blog.logrocket.com/author/emmanueljohn/)[Emmanuel John](https://blog.logrocket.com/author/emmanueljohn/)

Mar 16, 2026 ⋅ 8 min read

[View all posts](https://blog.logrocket.com/)

### Leave a Reply [Cancel reply](https://blog.logrocket.com/ai-shadcn-components\#respond)

Your email address will not be published.Required fields are marked \*

Comment \*

Name \*

Email \*

Website

Save my name, email, and website in this browser for the next time I comment.

Would you be interested in joining LogRocket's developer community?

YeaNo Thanks

Join LogRocket’s Content Advisory Board. You’ll help inform the type of
content we create and get access to exclusive meetups, social accreditation,
and swag.


[Sign up now](https://lp.logrocket.com/blg/content-advisory-board-signup)