shadcn/ui MCP Server — Установка & Живое демо

Зачем использовать

Ключевые функции

Получение исходного кода компонентов из реестра shadcn/ui в реальном времени
Мультифреймворк: React, Vue, Svelte 5, React Native
Граф зависимостей компонентов (например, Dialog требует Portal)
Команда установки для каждого пакетного менеджера (npm/pnpm/yarn/bun)
Примеры и демо-исходники, а не только голый компонент
Включены блочные шаблоны (страницы auth, дашборды)

Живое демо

Как выглядит на практике

shadcn-ui-mcp.replay ▶ готово

0/0

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

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

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

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

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

{
  "context_servers": {
    "shadcn-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@jpisnice/shadcn-ui-mcp-server"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add shadcn-ui-mcp -- npx -y @jpisnice/shadcn-ui-mcp-server

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: shadcn/ui MCP Server

Создать shadcn/ui Form без дрейфа API

👤 Frontend-разработчики, создающие приложения React/Next ⏱ ~20 min intermediate

Когда использовать: Нужна Form + react-hook-form + Zod, но Claude постоянно использует устаревшие импорты shadcn.

Предварительные требования

Next.js / Vite-приложение с инициализированным shadcn/ui — npx shadcn@latest init

Поток

Получить актуальный исходник Form

shadcn-ui MCP: получи актуальный исходник form (React) плюс его зависимости. Покажи команду установки.✓ Скопировано

→ Возвращён последний исходник; список зависимостей включает react-hook-form, zod
Построить форму

Теперь создай SignupForm с этими точными API. Email + пароль + чекбокс условий; Zod-схема с сообщениями валидации. Без выдуманных импортов.✓ Скопировано

→ Компонент компилируется против актуальной версии shadcn
Проверить

Запусти tsc --noEmit и сообщи о неразрешённых импортах.✓ Скопировано

→ Чистая проверка TypeScript

Итог: Рабочая Form против актуального API shadcn/ui — без ошибок import { ... } from '@/components/ui/old-name'.

Подводные камни

Проект использует старую версию shadcn — Закрепи через --registry или прими обновление и запусти shadcn upgrade

Сочетать с: filesystem

Вставить shadcn block (auth/dashboard)

👤 Разработчики, которым нужны готовые макеты ⏱ ~15 min beginner

Когда использовать: Нужна полная страница входа или макет дашборда, а не просто компонент.

Поток

Просмотреть блоки

shadcn-ui: перечисли доступные блоки. Хочу макет дашборда с сайдбаром.✓ Скопировано

→ Список блоков с именами + превью
Получить и адаптировать

Получи исходник sidebar-07. Адаптируй под мои маршруты — замени demo-ссылки на /dashboard, /clients, /settings.✓ Скопировано

→ Код блока возвращён; мои пути подставлены

Итог: Полный макет дашборда запущен и кастомизирован под приложение менее чем за 10 минут.

Подводные камни

Блок зависит от компонентов, которые не установлены — MCP возвращает список зависимостей; сначала установи недостающие

Сочетать с: filesystem

Портировать использование shadcn из React-приложения на Svelte

👤 Разработчики, меняющие фреймворк ⏱ ~30 min advanced

Когда использовать: Переходишь с Next на SvelteKit и нужны эквиваленты shadcn-svelte.

Поток

Составить карту компонентов

Перечисли компоненты, которые приложение импортирует из @/components/ui. Для каждого получи эквивалент Svelte 5 из shadcn-ui MCP.✓ Скопировано

→ Карта компонент-к-компоненту с замечаниями по различиям API
Перевести один пример

Переведи это использование React Form на Svelte-версию с использованием актуального API.✓ Скопировано

→ Идиоматичный код Svelte 5

Итог: План миграции + эталонный перевод для команды.

Подводные камни

Некоторые компоненты ещё не существуют в Svelte-порте — MCP скажет «не найдено»; отметь эти для ручного портирования

Комбинации

Сочетайте с другими MCP — эффект x10

shadcn-ui-mcp + filesystem

Генерировать компоненты прямо в репозитории

shadcn: получи Form. Filesystem: запиши код в src/components/SignupForm.tsx с моей схемой.✓ Скопировано

shadcn-ui-mcp + github

PR-рефакторинг UI с актуальным API shadcn

Получи актуальный API Dialog. Отрефактори src/components/Modal.tsx. Открой PR.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
list_components	framework?: react\|vue\|svelte\|react-native	Исследование	1 запрос
get_component	name: str, framework?: str	Перед написанием кода	1 запрос
get_component_demo	name: str, framework?: str	Посмотреть реальное использование	1 запрос
list_blocks	framework?: str	Найти готовые макеты	1 запрос
get_block	name: str	Вставить макет	1 запрос

Стоимость и лимиты

Во что обходится

Квота API: GitHub raw fetches (60/ч без аутентификации, 5000/ч с аутентификацией)
Токенов на вызов: 300–4000 (исходник компонентов может быть большим)
Деньги: Бесплатный OSS
Совет: Передай GITHUB_PERSONAL_ACCESS_TOKEN, чтобы избежать лимита 60/ч

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: Опциональный GitHub token для увеличения лимита rate limit

Исходящий трафик: github.com (raw и api)

Никогда не давайте: repo:write

MCP получает только публичный код — не пишет в твой репозиторий, если не совмещён с filesystem

Устранение неполадок

Частые ошибки и исправления

Превышен rate limit

Установи переменную окружения GITHUB_PERSONAL_ACCESS_TOKEN

Компонент не найден для фреймворка

Порты Vue/Svelte отстают от React; проверяй через list_components для нужного фреймворка

Возвращённый исходник использует API, отличный от проектного

Проект на старой версии shadcn; либо обновляй, либо закрепи старую версию реестра

Альтернативы

shadcn/ui MCP Server в сравнении

Альтернатива	Когда использовать	Компромисс
Magic MCP (21st Dev)	Нужна более широкая генерация UI, а не только shadcn	Более самоуверенный; тяжелее
Component MCP (кастомный реестр)	Есть внутренняя дизайн-система	Нужно строить самому

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills