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

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 -
4
Python
shadcn-ui MCP Server
ymadd
A
security
A
license
A
quality
Helps AI assistants access shadcn/ui component documentation and examples through a TypeScript-based MCP server that provides reference information for component details, usage examples, and search capabilities.
Last updated -
4
352
56
JavaScript
MIT License
SupaUI MCP Server
buoooou
A
security
F
license
A
quality
A Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.
Last updated -
3
255
4
TypeScript
Blender Open MCP
dhakalnirajan
-
security
F
license
-
quality
A server that integrates Blender with local AI models via the Model Context Protocol, allowing users to control Blender using natural language prompts for 3D modeling tasks.
Last updated -
43
Python

View all related MCP servers

Shadcn UI MCP Server