Shadcn UI MCP-сервер

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

Функции

Инструменты

Сервер 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

  • Получить документацию и код для определенных блоков

  • Установка блоков с поддержкой нескольких менеджеров пакетов

• Поддержка менеджера пакетов

  • Гибкая поддержка среды выполнения для npm, pnpm, yarn и bun

  • Автоматическое определение предпочитаемого пользователем менеджера пакетов

Related MCP server: aceternityui-mcp

Установка

Предпосылки

• Node.js (v18 или выше)

• менеджер пакетов npm или yarn

Конфигурация рабочего стола Клода

Для использования с Claude Desktop добавьте конфигурацию сервера:

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

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

Конфигурация виндсерфинга

Добавьте это в ваш ./codeium/windsurf/model_config.json :

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

Конфигурация курсора

Добавьте это в ваш .cursor/mcp.json :

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

Разработка и отладка

Местное развитие

1. Установить зависимости:

npm install

2. Сборка сервера:

npm run build

Отладка

Поскольку серверы MCP взаимодействуют через stdio, отладка может быть сложной. Мы рекомендуем использовать MCP Inspector для отладки:

npm run inspector

Инспектор предоставит URL-адрес для доступа к инструментам отладки в вашем браузере, что позволит вам:

• Мониторинг связи MCP

• Проверка вызовов и ответов инструментов

• Отладка поведения сервера

• Просмотр журналов в реальном времени

Связанные проекты и зависимости

Этот проект создан с использованием следующих инструментов и библиотек:

• Model Context Protocol TypeScript SDK — официальный TypeScript SDK для серверов и клиентов MCP

• MCP Inspector — инструмент отладки для серверов MCP

• Cheerio — быстрая, гибкая и экономичная реализация ядра jQuery, разработанная специально для сервера

Лицензия

Лицензия MIT — можете свободно использовать этот проект в своих целях.

Внося вклад

Вклады приветствуются! Пожалуйста, не стесняйтесь отправлять запрос на включение.