一款强大且灵活的MCP（模型控制协议）服务器，旨在提升Shadcn UI组件的开发体验。该服务器为构建和管理UI组件提供了坚实基础，配备先进的工具和功能。

特色

工具

MCP服务器提供了一套可以通过模型控制协议使用的工具：

• list-components：获取可用的 shadcn/ui 组件列表
• get-component-docs：获取特定组件的文档
• install-component：安装shadcn/ui组件
• list-blocks：获取可用的 shadcn/ui 块列表
• get-block-docs：获取特定区块的文档
• install-blocks：安装shadcn/ui块

功能

• 组件管理

• 列出可用的 shadcn/UI 组件

• 获取特定组件的详细文档

• 安装支持多个包管理器（npm、pnpm、yarn、bun）的组件

• 区块管理

• 列出可用的 shadcn/UI 块

• 获取特定区块的文档和代码

• 支持多个包管理器的安装块

• 包管理器支持

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

1. Install dependencies:

npm install

2. 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