shadcn MCP Server icon

shadcn MCP Server

Official

Use the shadcn MCP server to browse, search, and install components from registries with natural language.

development-toolsui-componentscode-generation
View on GitHub

shadcn MCP Server

The shadcn MCP Server allows AI assistants to interact with items from registries. You can browse available components, search for specific ones, and install them directly into your project using natural language.

For example, you can ask an AI assistant to "Build a landing page using components from the acme registry" or "Find me a login form from the shadcn registry".

Key Features

  • Browse Components - List all available components, blocks, and templates from any configured registry
  • Search Across Registries - Find specific components by name or functionality across multiple sources
  • Install with Natural Language - Add components using simple conversational prompts like "add a login form"
  • Support for Multiple Registries - Access public registries, private company libraries, and third-party sources

Installation

Quick Start with Claude Code

Run the following command in your project:

npx shadcn@latest mcp init --client claude

Restart Claude Code and try these prompts:

  • Show me all available components in the shadcn registry
  • Add the button, dialog and card components to my project
  • Create a contact form using components from the shadcn registry

Quick Start with Cursor

Run the following command in your project:

npx shadcn@latest mcp init --client cursor

Open Cursor Settings and enable the MCP server for shadcn.

Quick Start with VS Code

Run the following command in your project:

npx shadcn@latest mcp init --client vscode

Open .vscode/mcp.json and click Start next to the shadcn server.

Configuration

Claude Code Configuration

Add the following configuration to your project's .mcp.json file:

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

After adding the configuration, restart Claude Code and run /mcp to see the shadcn MCP server in the list.

Cursor Configuration

Add the shadcn server to your project's .cursor/mcp.json configuration file:

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

After adding the configuration, enable the shadcn MCP server in Cursor Settings.

VS Code Configuration

Add the shadcn server to your project's .vscode/mcp.json configuration file:

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

After adding the configuration, open .vscode/mcp.json and click Start next to the shadcn server.

Registry Configuration

Configure additional registries in your components.json:

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

Note: No configuration is needed to access the standard shadcn/ui registry.

Authentication

For private registries requiring authentication, set environment variables in your .env.local:

REGISTRY_TOKEN=your_token_here
API_KEY=your_api_key_here

Usage Examples

Browse & Search

  • "Show me all available components in the shadcn registry"
  • "Find me a login form from the shadcn registry"
  • "List all components from the acme registry"

Install Components

  • "Add the button component to my project"
  • "Install the dialog and card components"
  • "Create a login form using shadcn components"

Work with Namespaces

  • "Show me components from acme registry"
  • "Install @internal/auth-form"
  • "Build me a landing page using hero, features and testimonials sections from the acme registry"

How It Works

The MCP server acts as a bridge between your AI assistant, component registries and the shadcn CLI:

  1. Registry Connection - MCP connects to configured registries (shadcn/ui, private registries, third-party sources)
  2. Natural Language - You describe what you need in plain English
  3. AI Processing - The assistant translates your request into registry commands
  4. Component Delivery - Resources are fetched and installed in your project

Supported Registries

The shadcn MCP server works out of the box with any shadcn-compatible registry:

  • shadcn/ui Registry - The default registry with all shadcn/ui components
  • Third-Party Registries - Any registry following the shadcn registry specification
  • Private Registries - Your company's internal component libraries
  • Namespaced Registries - Multiple registries configured with @namespace syntax

Troubleshooting

MCP Not Responding

If the MCP server isn't responding to prompts:

  1. Check Configuration - Verify the MCP server is properly configured and enabled in your MCP client
  2. Restart MCP Client - Restart your MCP client after configuration changes
  3. Verify Installation - Ensure shadcn is installed in your project
  4. Check Network - Confirm you can access the configured registries

Solution Steps:

# Clear npx cache
npx clear-npx-cache

# Reinstall shadcn
npm install -g shadcn@latest

# Restart your MCP client

Registry Access Issues

If components aren't loading from registries:

  1. Check components.json - Verify registry URLs are correct
  2. Test Authentication - Ensure environment variables are set for private registries
  3. Verify Registry - Confirm the registry is online and accessible
  4. Check Namespace - Ensure namespace syntax is correct (@namespace/component)

Solution Steps:

# Test registry access
curl https://registry.acme.com/button.json

# Verify environment variables
echo $REGISTRY_TOKEN

# Check components.json syntax
npx shadcn@latest init --check

Installation Failures

If components fail to install:

  1. Check Project Setup - Ensure you have a valid components.json file
  2. Verify Paths - Confirm the target directories exist
  3. Check Permissions - Ensure write permissions for component directories
  4. Review Dependencies - Check that required dependencies are installed

Solution Steps:

# Initialize shadcn in your project
npx shadcn@latest init

# Check project structure
ls -la components/ui/

# Verify dependencies
npm list @radix-ui/react-slot

No Tools or Prompts

If you see the "No tools or prompts" message:

  1. Clear the npx cache - Run npx clear-npx-cache
  2. Re-enable the MCP server - Try to re-enable the MCP server in your MCP client
  3. Check Logs - In Cursor, you can see the logs under View -> Output and select MCP: project-* in the dropdown

Solution Steps:

# Clear cache and restart
npx clear-npx-cache
rm -rf ~/.npm/_npx

# Verify MCP server status
npx shadcn@latest mcp --version

Advanced Configuration

Custom Registry Headers

For registries requiring custom headers:

{
  "registries": {
    "@enterprise": {
      "url": "https://enterprise.company.com/{name}.json",
      "headers": {
        "Authorization": "Bearer ${ENTERPRISE_TOKEN}",
        "X-API-Version": "v2",
        "User-Agent": "shadcn-mcp/1.0"
      }
    }
  }
}

Environment Variables

Set up environment variables for different environments:

# Development
REGISTRY_TOKEN=dev_token_here
ENTERPRISE_TOKEN=dev_enterprise_token

# Production
REGISTRY_TOKEN=prod_token_here
ENTERPRISE_TOKEN=prod_enterprise_token

Multiple Registry Sources

Configure multiple registries for different component types:

{
  "registries": {
    "@ui": "https://ui-registry.com/{name}.json",
    "@blocks": "https://blocks-registry.com/{name}.json",
    "@templates": "https://templates-registry.com/{name}.json"
  }
}

Performance Tips

  • Cache Registry Responses - The MCP server automatically caches registry responses
  • Use Specific Namespaces - When working with multiple registries, specify the namespace for faster lookups
  • Batch Installations - Install multiple components in a single request when possible

Security Considerations

  • Environment Variables - Never commit registry tokens to version control
  • Private Registries - Use HTTPS for all registry connections
  • Token Rotation - Regularly rotate authentication tokens
  • Access Control - Limit registry access to necessary team members only

This comprehensive MCP server enables seamless integration between AI assistants and component registries, making it easier than ever to build applications with reusable components through natural language interactions.

Use shadcn MCP Server MCP Server with

5ire

Open source cross-platform desktop AI assistant with native MCP server support for enhanced tool integration.

desktopopen-source+1

Claude.ai

Anthropic's official web client with MCP server integration for enhanced AI assistant capabilities and tool connectivity.

anthropicweb-client+1

Claude Desktop App

Official Claude desktop application with built-in MCP support and comprehensive server management capabilities

anthropicdesktop-app+1

Cline

Advanced agentic coding VS Code extension that leverages MCP servers for powerful development tools and automation

vscodecoding-assistant+1

Continue

Open-source development copilot for VS Code and JetBrains IDEs with comprehensive MCP integrations and extensible architecture

open-sourceide-extension+1

Cursor

Advanced AI-powered IDE with comprehensive MCP support for tools and resources, designed for modern development workflows

ideai-powered+1

Daydreams Agents

Innovative agentic platform with Model Context Protocol support for building and deploying autonomous AI agents

agentsplatform+1

Emacs MCP

Community-driven Emacs integration packages for Model Context Protocol support and tool integration

emacseditor+1

fast-agent

Ultra-lightweight agent framework with Model Context Protocol support designed for high-performance AI agent deployment

agent-frameworklightweight+1

FLUJO

Open-source MCP Hub and Inspector with multi-model workflow orchestration and intuitive chat interface

open-sourceworkflow+1

AgentAI

Rust library for simplified AI agent creation with built-in MCP integration and high-performance async capabilities.

rustlibrary+1

Genkit

Google's powerful Genkit framework with comprehensive MCP support for building AI-powered applications and workflows

googleframework+1

Glama

Comprehensive MCP directory, client listings, and community hub for discovering and sharing MCP resources

directorycommunity+1

GenAIScript

Microsoft's powerful scripting framework with comprehensive MCP client integration for AI-powered automation and scripting

microsoftscripting+1

Goose

Open-source development agent with comprehensive MCP integration and intelligent IDE automation capabilities

open-sourcedev-agent+1

gptme

Versatile terminal and chat client with comprehensive MCP support for both local and hosted AI models

terminalchat-client+1

HyperAgent

Playwright-powered autonomous web agent with comprehensive MCP tools integration for automated web interactions

web-automationplaywright+1

JetBrains AI Assistant

JetBrains AI Assistant with full MCP client and server support. Connect to external MCP servers for enhanced AI capabilities, or expose 25+ IDE tools to external clients like Claude Desktop and Cursor.

IDEAI Integration+2

Klavis AI

Open-source MCP integration platform that connects AI agents to 100+ tools (GitHub, Slack, Notion, etc.) with enterprise-grade OAuth and intelligent context management. YC-backed, SOC 2 compliant.

platformintegration+2

LibreChat

Self-hosted, open-source ChatGPT-style UI with comprehensive MCP support, multi-model AI integration (OpenAI, Anthropic, Google, AWS), agents, code interpreter, and enterprise features. Fully customizable and privacy-focused.

web-appself-hosted+2

Lutra AI

First MCP-compatible client built for everyone. AI task agent that connects all your work apps, turns conversations into automated workflows, and integrates with MCP servers seamlessly. No-code automation platform.

workflow-automationno-code+2

AgenticFlow

No-code platform for building intelligent agents that connect thousands of APIs and tools via Model Context Protocol integration

no-codeagent-builder+1

mcp-agent

Simple, composable Python framework to build production-ready AI agents using MCP. Pairs Anthropic Building Effective Agents patterns with MCP runtime, supports multiple LLM providers, and includes Temporal-based orchestration for workflows.

frameworkpython+2

mcp-use

Open-source library to connect any LLM to any MCP server in 6 lines of code. Language-agnostic protocol supporting Python and TypeScript with LangChain.js compatibility, HTTP/SSE transport, and everything needed to build with MCP servers/clients and AI agents.

librarypython+3

MCPHub (mcp.nvim)

Neovim plugin to manage and use MCP servers within the editor. Features intuitive UI for managing server states, marketplace integration for exploring MCP servers, interactive testing, and integration with Avante.nvim, CodeCompanion.nvim, and CopilotChat.nvim.

editor-pluginneovim+2

MCPOmni-Connect

Versatile CLI client for MCP with agentic and orchestrator capabilities. Supports chat mode, autonomous agents, planner-based orchestration, treats each MCP server as tool agent, multi-agent workflows, and can be embedded in FastAPI or backend systems.

cliagent-framework+3

Memex

All-in-one desktop app and server builder with prompt-to-MCP server capabilities. Build custom MCP servers from natural language, integrate them instantly, and use them to solve problems—all within a single conversation.

desktop-appdeveloper-tools+2

MindPal

No-code platform for AI agents and workflows with comprehensive MCP support. Build custom AI agents trained on your data, create multi-agent workflows, and connect to 1,000+ business tools—all without writing code.

no-codeworkflow-automation+2

MooPoint

Web-based, model-agnostic AI chat platform with comprehensive MCP server integration, tool calling capabilities, and OAuth support. Connect to any LLM provider while maintaining control over your API keys and data.

web-appmulti-model+2

Msty Studio

Privacy-first AI workspace integrating local and online LLMs with comprehensive MCP toolbox. Run models entirely offline or use cloud providers while maintaining complete control over your data and workflows.

desktop-appprivacy-focused+2

NVIDIA Agent Intelligence Toolkit

Enterprise-grade toolkit for building AI agents with MCP client/server support. Works with LangChain, LlamaIndex, CrewAI, and Semantic Kernel. Includes observability, profiling, and hyperparameter tuning. Part of NVIDIA NeMo family.

platformframework+2

Amazon Q CLI

Amazon's AI-powered coding assistant for terminals with comprehensive MCP server support and AWS integration

awscli+1

OpenSumi

AI-native IDE framework for building custom development environments with MCP client support. Powers CodeFuse IDE and CodeBlitz. VSCode plugin compatible, customizable UI, supports containers, Electron, and pure frontend deployments. By Alibaba & Ant Group.

ideframework+2

oterm

A text-based terminal client for Ollama that supports the Model Context Protocol (MCP), allowing interaction with external tools and data sources directly from the CLI.

cliopen-source+2

Postman

The world's leading API platform now includes a native MCP client for testing, debugging, and interacting with MCP servers in a visual environment.

developer-toolstesting+2

Roo Code

Open-source AI-powered agentic coding assistant for VS Code with comprehensive MCP server support, multi-file editing, custom modes, and advanced orchestration features. Free to use with any AI model.

VS Code ExtensionAI Coding Assistant+2

Slack MCP Client

An open-source TypeScript client that bridges Slack with the Model Context Protocol, enabling users to interact with MCP tools directly within Slack channels and DMs.

chatintegration+2

Sourcegraph Cody

An advanced AI coding assistant that leverages the Model Context Protocol (via OpenCtx) to fetch context from external sources like issue trackers, databases, and documentation.

coding-assistantide-extension+2

SpinAI

A lightweight, observable TypeScript agent framework designed for building production-grade AI agents that can easily consume Model Context Protocol (MCP) tools.

frameworktypescript+2

Superinterface

A comprehensive developer platform and infrastructure for building in-app AI assistants that natively supports the Model Context Protocol (MCP) for tool integration.

platforminfrastructure+2

Superjoin

An AI Assistant for Google Sheets that functions as an MCP Client, allowing users to import data from external sources and automate spreadsheet workflows using natural language.

productivityspreadsheet+2

Theia AI

An open and flexible platform for building AI-enhanced tools and IDEs, featuring deep integration with the Model Context Protocol to provide rich context to AI agents.

platformframework+2

Apify MCP Tester

Standalone SSE/HTTP client for comprehensive MCP server testing with intuitive chat-like user interface

testingdebugging+1

Theia IDE

The open-source IDE that serves as the reference implementation for Theia AI, offering out-of-the-box support for the Model Context Protocol (MCP).

ideopen-source+2

Tome

A sleek macOS desktop client by Runebook that simplifies the management of local LLMs and Model Context Protocol (MCP) servers for non-technical users.

desktop-appmacos+2

TypingMind

A versatile web and desktop frontend for LLMs that supports the Model Context Protocol via a local bridge connector, allowing web-based agents to access local tools.

frontendweb-app+2

Warp

A modern, Rust-based terminal that integrates with Claude Code and the Model Context Protocol to bring AI agent capabilities directly into your command-line workflow.

terminalcli+2

WhatsMCP

Connect your personal AI stack and MCP servers directly to WhatsApp. Manage tools, agents, and workflows through a familiar chat interface.

messagingmobile+2

Windsurf Editor

The first agentic IDE, powered by Codeium. Features deep context awareness and native MCP support to connect to your external tools and data.

idedeveloper-tools+2

Witsy

A powerful desktop AI assistant for macOS and Windows. Supports local LLMs (Ollama) and cloud providers (OpenAI, Anthropic), with a native plugin system built on MCP.

desktopproductivity+3

Zed

A high-performance, multiplayer code editor from the creators of Atom. Features built-in MCP support to connect AI assistants to your codebase and external tools.

idedeveloper-tools+3

Zencoder

An AI coding agent and IDE that integrates with your entire software development lifecycle. Features a built-in MCP library for one-click tool installation.

idedeveloper-tools+3

Augment Code

Agentic code assistant that orchestrates MCP servers for repository-level tasks with intelligent automation

code-assistantautomation+1

Raycast MCP Extension

A Raycast extension that bridges the Model Context Protocol with Raycast AI. Access your MCP tools directly from the Raycast launcher and Quick AI.

launcherproductivity+3

LM Studio

A desktop application for discovering, downloading, and running local LLMs. Version 0.3.17+ includes native support for MCP, allowing local models to use tools.

desktoplocal-llm+3

Perplexity

Native macOS integration enabling Perplexity to connect with local apps and data (Notes, Calendar, Files) via the Model Context Protocol using the PerplexityXPC helper.

desktop-appsearch+2

ChatMCP

An open-source, feature-rich desktop chat client built with Flutter that implements the Model Context Protocol, featuring an integrated MCP server marketplace and multi-LLM support.

desktop-appopen-source+2

MCP Inspector

The official web-based debugging tool for Model Context Protocol servers, allowing developers to test tools, resources, and prompts interactively.

developer-toolstesting+3

mcphub.nvim

Neovim plugin to manage, test, and use MCP servers within the editor. Integrates seamlessly with AI chat plugins like Avante.nvim, CodeCompanion.nvim, and CopilotChat.nvim.

neovimide+2

Bolt.new

AI-powered full-stack development platform that creates stunning apps and websites through conversational AI, with native MCP server integration for extensible capabilities.

web-developmentai-powered+3

Rovo Dev CLI

An AI agent built by Atlassian for software developers, bringing AI-assisted development directly to the command line interface.

cliai-assistant+1

Toolprint

Build AI Agents that use tools 10x Better. A single SDK with powerful capabilities to teach and improve tool selection to achieve workflow goals.

ai-agentstool-management+2

Microsoft Copilot Studio

Low-code platform for building custom AI copilots and agents with MCP integration. Connect existing knowledge servers and data sources directly within Copilot Studio to extend agent capabilities.

enterpriselow-code+2

BeeAI Framework

Open-source framework with comprehensive MCP support for building sophisticated AI workflows and automations

frameworkai-workflows+1

GitHub Copilot (VS Code)

AI-powered code completion and chat in Visual Studio Code with native Model Context Protocol support. Access external tools and data sources through MCP to enhance code generation and assistance.

idecode-editor+2

Amp

Frontier coding agent for terminal and editor with multi-model support (Claude, GPT-5), native MCP integration, thread-based conversations, and extensions for VS Code, Cursor, JetBrains, and Neovim.

clieditor-extension+2

OpenCode

Open-source AI coding agent for the terminal with native MCP support, Plan/Build modes, undo/redo capabilities, and conversation sharing. Supports multiple LLM providers.

cliopen-source+2

BoltAI

Native macOS desktop AI application with comprehensive MCP integrations for both local and cloud-based AI models

macosdesktop-app+1

Claude Code

Anthropic's official AI coding assistant CLI and terminal application with comprehensive MCP support and development tools

anthropiccli+1
Sponsored
Algolia Inc logo

Algolia Inc

“I can't code” is no longer an excuse. The technical barrier is gone. What will you create first?

Try Algolia MCP

Related Categories

development-toolsui-componentscode-generation