Shadcn UI MCP Server
Shadcn UI v4 MCP Server
MCP-сервер, который отдает агенту исходники, демо и блоки компонентов shadcn/ui для React, Svelte, Vue и React Native
- 3 098 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Запускает локальный процесс через npx или Docker
- Обращается по сети к GitHub API за исходниками компонентов
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/shadcn-ui-v4-mcp-serverОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запускает локальный процесс через npx или Docker
- Обращается по сети к GitHub API за исходниками компонентов
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Сервер подключается к агенту по протоколу MCP и дает доступ к компонентам shadcn/ui версии 4: исходный код на TypeScript, примеры использования, готовые блоки для дашбордов, форм и календарей, а также метаданные с зависимостями. Данные он берет из репозиториев shadcn через GitHub API, поэтому агент получает актуальные версии, а не устаревшие сведения из своей памяти. Через флаг framework выбирается стек: React с примитивами Radix или Base, Svelte, Vue или React Native. Есть инструменты для просмотра списка компонентов и блоков и для обхода структуры репозитория. Работает по stdio для локального запуска и по SSE для нескольких клиентов сразу, есть образ Docker.
Для кого. Для фронтенд-разработчиков и дизайнеров, которые собирают интерфейсы на shadcn/ui с помощью агента.
Подходит, если
- Агент собирает интерфейс на shadcn/ui и ему нужны точные исходники компонентов
- Нужны готовые блоки: дашборд, форма, календарь
- Кроме React, работаете со Svelte, Vue или React Native
Не подходит, если
- Проект не использует shadcn/ui
- Нужна собственная дизайн-система, а не компоненты shadcn
Пример запроса к агенту
Собери страницу настроек на shadcn/ui: возьми компоненты формы и переключателя из shadcn MCPMCP
- Транспорт
- stdio, sse
- Авторизация
- ключ необязателен
Переменные окружения
GITHUB_PERSONAL_ACCESS_TOKENсекрет- Личный токен GitHub. Не обязателен, поднимает лимит запросов к GitHub API с 60 до 5000 в час. Можно передать и флагом --github-api-key.
Ограничения
Сервер читает компоненты через GitHub API. Без токена лимит около 60 запросов в час, с личным токеном GitHub он поднимается до 5000. Сам сервер запускается локально через npx или в Docker и требует Node.js версии 18 и выше. Он отдает исходники, а записывает файлы в проект уже агент.
Как отключить. Удалите сервер из конфигурации MCP вашего клиента. В Claude Code: claude mcp remove shadcn.
Частые вопросы
Нужен ли токен GitHub?
Не обязателен. Без него доступно около 60 запросов в час, с личным токеном лимит вырастает до 5000, чего хватает для активной работы.
Какие фреймворки поддерживаются?
React по умолчанию, а также Svelte, Vue и React Native. Стек выбирается флагом --framework. Для React можно переключиться с Radix на Base через --ui-library.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыОфициальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
MCP-сервер Arc UI: агент ищет React-компоненты с анимацией, читает документацию и свойства, получает команду shadcn.
MCP-сервер библиотеки React-компонентов для интерфейсов агентов: агент находит компонент и добавляет его в проект
MCP-сервер и плагин 21st.dev: поиск готовых React/Tailwind компонентов, логотипов и генерация интерфейса прямо из агента
MCP-сервер Chakra UI: справочник по компонентам, свойствам и токенам темы плюс разбор кода при переходе с версии 2 на 3
MCP-сервер каталога анимированных React-компонентов UI Beats: поиск, свойства, исходный код и команда установки для агента
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Shadcn UI MCP Server (эта карточка) | нет | ключ необязателен | 3 098 | |
| shadcn-vue — скилл для агентов | да | 10 807 | скилл shadcn-vue читает настройки вашего проекта и учит агента | |
| Vibe MCP | да | не нужна | 695 | Vibe MCP отдает агенту компоненты |
Коротко о README
README описывает MCP-сервer для shadcn/ui версии 4, который дает агенту исходники компонентов, демо, блоки и метаданные. Показаны запуск через npx, установка npm-пакетом, сборка из исходников и режим SSE с Docker Compose для нескольких клиентов. Отдельно описаны выбор фреймворка (React, Svelte, Vue, React Native), переменные окружения и получение токена GitHub для повышения лимитов. Есть готовые инструкции по подключению к Claude Code, Claude Desktop, Cursor, VS Code и Continue. Лицензия MIT.