Shadcn UI MCP Server

A powerful and flexible MCP (Model Control Protocol) server designed to enhance the development experience with Shadcn UI components. This server provides a robust foundation for building and managing UI components with advanced tooling and functionality.

Features

Tools

The MCP server provides a set of tools that can be used through the Model Control Protocol:

list-components: Get the list of available shadcn/ui components
get-component-docs: Get documentation for a specific component
install-component: Install a shadcn/ui component
list-blocks: Get the list of available shadcn/ui blocks
get-block-docs: Get documentation for a specific block
install-blocks: Install a shadcn/ui block

Functionality

Component Management
- List available shadcn/ui components
- Get detailed documentation for specific components
- Install components with support for multiple package managers (npm, pnpm, yarn, bun)
Block Management
- List available shadcn/ui blocks
- Get documentation and code for specific blocks
- Install blocks with support for multiple package managers
Package Manager Support
- Flexible runtime support for npm, pnpm, yarn, and bun
- Automatic detection of user's preferred package manager

Installation

Prerequisites

Node.js (v18 or higher)
npm or yarn package manager

Claude Desktop Configuration

To use with Claude Desktop, add the server config:

On MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json On Windows: %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["@heilgar/shadcn-ui-mcp-server"]
    }
  }
}

Windsurf Configuration

Add this to your ./codeium/windsurf/model_config.json:

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["@heilgar/shadcn-ui-mcp-server"]
    }
  }
}

Cursor Configuration

Add this to your .cursor/mcp.json:

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["@heilgar/shadcn-ui-mcp-server"]
    }
  }
}

Development and Debugging

Local Development

Install dependencies:

npm install

Build the server:

npm run build

Debugging

Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector for debugging:

npm run inspector

The Inspector will provide a URL to access debugging tools in your browser, allowing you to:

Monitor MCP communication
Inspect tool calls and responses
Debug server behavior
View real-time logs

This project is built using the following tools and libraries:

Model Context Protocol TypeScript SDK - The official TypeScript SDK for MCP servers and clients
MCP Inspector - A debugging tool for MCP servers
Cheerio - Fast, flexible, and lean implementation of core jQuery designed specifically for the server

License

MIT License - feel free to use this project for your own purposes.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Install Server

HTTP connection URL

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

A Model Control Protocol server that allows users to discover, install, and manage Shadcn UI components and blocks through natural language interactions in compatible AI tools.

Related MCP Servers

Command Executor MCP Server
Sunwood-ai-labs
A
security
F
license
A
quality
A Model Context Protocol server that allows secure execution of pre-approved commands, enabling AI assistants to safely interact with the user's system.
Last updated -
1
3
18
JavaScript
Godot MCP
Coding-Solo
-
security
A
license
-
quality
A Model Context Protocol server that enables AI assistants to interact with the Godot game engine, allowing them to launch the editor, run projects, capture debug output, and control project execution.
Last updated -
62
JavaScript
MIT License
MCP Toolkit
zxfgds
-
security
F
license
-
quality
A comprehensive Model Context Protocol server implementation that enables AI assistants to interact with file systems, databases, GitHub repositories, web resources, and system tools while maintaining security and control.
Last updated -
16
TypeScript
Metabase MCP Server
sazboxai
-
security
F
license
-
quality
A Model Control Protocol server that enables AI assistants to interact with Metabase databases, allowing models to explore database schemas, retrieve metadata, visualize relationships, and execute actions.
Last updated -
2
Python

View all related MCP servers

Shadcn UI MCP Server