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.
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, 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.
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 that provide only data for ShadCN components, this official MCP server provides more recent access to:
AI assistants gain direct connection to current component specifications, ensuring they always work with the latest versions and configurations.
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.
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.
The server enables AI Agents to search the available components and make more informed decisions about which components best fit specific requirements.
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:
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:
Now go ahead and install the MCP server by running the command below in your project directory:
npx shadcn@latest mcp init --client claude
Go ahead to restart Claude Code now. If it was properly installed, you should see this:
After that, you can use the /mcp
command, and you will be able to see the MCP tools:
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.”
Add the MCP server configuration to your project’s MCP configuration file:
{ "mcpServers": { "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] } } }
Configure additional registries in your components.json
to access private or third-party component libraries:
{ "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.
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:
Let’s go ahead and create the Kanban board for this workflow. Here is a detailed prompt that embodies our workflow:
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:
We’re done, I guess:
This is what the first result looks like:
I feel Claude omitted the point where ShadCN components need CSS variables defined. Will tell it to fix that.
Here is what the UI looks like now:
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:
Here is the final result:
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.
Here are some common issues you might encounter:
When your MCP server isn’t picking up your prompts:
.mcp.json
file and enabled in your clientIf components aren’t loading from your registries:
.env.local
@namespace/component
formatWhen components refuse to install:
components.json
file in your project rootIf you’re seeing “No tools or prompts” messages:
npx clear-npx-cache
to refresh cached packagesBased on the shadcn/ui MCP Server Documentation and troubleshooting experience. There are other ShadCN MCP servers; you can try this as well.
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:
Hey there, want to help make our blog better?
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 nowDiscover how WebAssembly 3.0’s garbage collector, exception handling, and Memory64 transform Wasm into a true mainstream web platform.
Learn how to structure Rust web services with clean architecture, Cargo workspaces, and modular crates for scalable, maintainable backends.
Andrew Evans gives his take on agentic AI and walks through a step-by-step method to build a spec-first workflow using Claude Code.
This tutorial shows how to use TanStack DB to build a task manager with live queries, optimistic updates, and offline support, delivering a fast, resilient UX with less boilerplate than traditional React state management.