Мощный и гибкий сервер MCP (Model Control Protocol), предназначенный для улучшения опыта разработки компонентов пользовательского интерфейса Shadcn. Этот сервер обеспечивает надежную основу для создания и управления компонентами пользовательского интерфейса с расширенными инструментами и функциональностью.

Особенности

Инструменты

Сервер MCP предоставляет набор инструментов, которые можно использовать через протокол управления моделью:

• [[Т0]]: Список доступных компонентов shadcn/ui
• [[Т1]]: Получить документацию на конкретный компонент
• [[Т2]]: Установите компонент shadcn/ui
• [[Т3]]: Список доступных блоков shadcn/ui
• [[Т4]]: Получить документацию для конкретного блока
• [[Т5]]: Установите блок 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