shadcn/ui MCP

Jpisnice/shadcn-ui-mcp-server· Проверено 12.11.2026· 3,1 тыс.на GitHub

Даёт агенту исходники, демо и зависимости компонентов shadcn/ui v4 и готовые блоки вроде дашбордов и форм. Кроме React есть версии для Svelte, Vue и React Native.

Как подключить

Что сделать до подключения

1

Node.js 20 или новее

2

Токен GitHub по желанию: без него 60 запросов в час, с ним 5000

3
GITHUB_PERSONAL_ACCESS_TOKEN

github.com/settings/tokens → Generate token, права не нужны

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --env 'GITHUB_PERSONAL_ACCESS_TOKEN=ghp_<ваш токен GitHub>' --transport stdio shadcn \
  -- npx -y @jpisnice/shadcn-ui-mcp-server

Проверка: claude mcp list показывает статус рядом с каждым сервером: ✔ Connected, ! Needs authentication или ✘ Failed to connect. Внутри сессии то же видно по команде /mcp.

Инструменты сервера

list_componentsпоказывает все компоненты
get_componentотдаёт исходник компонента
get_component_demoотдаёт пример использования
get_component_metadataпоказывает зависимости компонента
list_blocksпоказывает блоки по категориям
get_blockотдаёт блок целиком
get_directory_structureпоказывает структуру репозитория
list_themesпоказывает темы tweakcn
get_themeпоказывает тему tweakcn
apply_themeприменяет тему к проекту

Что попросить агента

«Покажи компонент button из shadcn/ui»Агент вызовет get_component
«Покажи, как пользоваться компонентом card»Агент вызовет get_component_demo
«Возьми блок dashboard-01 и встрои его в проект»Агент вызовет get_block и получит все файлы блока
«Сравни компонент button в React и Svelte»Агент вызовет get_component для обеих библиотек; для Svelte нужен сервер с --framework svelte

Для каких задач

Собрать экран из компонентов shadcn/ui по их настоящему исходнику
Взять готовый блок дашборда, календаря или формы со всеми файлами
Посмотреть пример использования и зависимости компонента до установки
Сравнить компонент в React, Svelte, Vue и React Native
Применить тему tweakcn к проекту, сначала посмотрев изменения в режиме dryRun

Ограничения

!

Компоненты читаются через GitHub API: без токена лимит 60 запросов в час

!

Фреймворк выбирается при запуске флагом --framework; один процесс сервера отдаёт одну библиотеку

!

Base UI вместо Radix доступен только для React

!

Сервер сторонний: shadcn его не ведёт

Если не работает

Сервер не запускается
Проверьте node --version: нужна версия 20 или новее, и наличие npx.
Ошибки лимита запросов GitHub
Добавьте токен GitHub флагом --github-api-key или переменной GITHUB_PERSONAL_ACCESS_TOKEN.
Компонент не находится
Попросите агента сначала вывести список компонентов через list_components и взять точное имя.
После обновления до 3.0.0 клиент получает 404 на /sse
Транспорт SSE убран. Подключайтесь по http к http://<хост>:7423/mcp.
Ошибка -32022 Unsupported protocol version
Сервер запущен с --protocol modern, а клиент говорит на протоколе 2025 года. Запустите с --protocol any.

Частые вопросы

Как переключить на Svelte или Vue?
Добавьте в args флаг --framework svelte, vue или react-native. В логе при запуске сервер пишет, под какой фреймворк настроен.
Нужен ли токен GitHub?
Без токена сервер работает, но GitHub даёт 60 запросов в час. С токеном — 5000. Права токену не нужны.
Как использовать Base UI вместо Radix?
Добавьте --ui-library base или переменную UI_LIBRARY=base. Работает только с React.
Можно запустить по HTTP для нескольких клиентов?
Да: node build/index.js --mode http --port 7423 или Docker Compose. Адрес для клиента — http://localhost:7423/mcp.
Работает ли сервер из России?
Сервер работает на вашем компьютере и берёт компоненты с GitHub, поэтому нужен доступ к api.github.com; токен GitHub бесплатный.

Похожие серверы