Подключение shadcn MCP в GitHub Copilot: Реальный опыт

🤔 Что такое MCP и зачем он нужен?

Model Context Protocol (MCP) — это протокол от Anthropic, который позволяет AI-ассистентам (типа GitHub Copilot или Claude) подключаться к внешним инструментам и источникам данных.

Звучит круто! В теории вы можете просто сказать AI: "Добавь компонент button из shadcn" — и он сам всё установит. Не нужно помнить команды, не нужно гуглить документацию.

💡 Теория vs Практика

✅ Теория:

• AI знает все компоненты shadcn
• Автоматическая установка
• Актуальная документация
• Меньше ошибок

⚠️ Практика:

• UI не всегда работает
• Нужна подписка Copilot
• Технология сырая
• Документация меняется

🚀 Процесс настройки

Шаг 1: Создание конфигурации

Официальная документация shadcn предлагает простую команду:

npx shadcn@latest mcp init --client vscode

Эта команда создаёт файл .vscode/mcp.json с конфигурацией сервера:

{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

✅ Это работает! Файл создаётся без проблем.

Шаг 2: Включение галереи MCP

Согласно документации VS Code, нужно включить настройку chat.mcp.gallery.enabled в Settings:

1. Открыть Settings (⌘ + ,)
2. Найти: chat.mcp.gallery.enabled
3. Включить опцию
4. Перезапустить VS Code

✅ Настройка есть и включается!

Шаг 3: Запуск сервера

Тут начинаются проблемы. Документация говорит:

"Откройте файл .vscode/mcp.json и нажмите кнопку Start рядом с shadcn сервером"

⚠️ Проблема: Кнопки Start нет! Вместо неё только "Add Server..."

🔍 Что пошло не так?

Проверка версии VS Code

MCP требует VS Code версии 1.102 или выше. Проверил:

code --version

Результат: 1.106.2

✅ Версия подходит!

Проверка расширений

• ✅ GitHub Copilot — установлен
• ✅ GitHub Copilot Chat — установлен
• ✅ Подписка активна

Проверка настроек

cat ~/Library/Application\ Support/Code/User/settings.json | grep mcp

Результат:

"chat.mcp.gallery.enabled": true,

✅ Настройка включена!

Проверка работы сервера

Запустил сервер вручную:

cd knowledgebase && npx shadcn@latest mcp

✅ Сервер запускается!

🤷‍♂️ Так в чём проблема?

После всех проверок стало понятно: технически всё работает, но UI в VS Code ещё не готов или зависит от каких-то скрытых флагов.

💡 Важный вывод

MCP — это очень новая технология. Документация опережает реализацию. То, что работает у одних разработчиков, может не работать у других из-за:

• Региональных ограничений
• Экспериментальных флагов
• Версии расширения Copilot
• Типа подписки

✅ Альтернативные решения

1. Использовать shadcn CLI напрямую

Самый надёжный способ. Просто используйте команды:

npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add card

✅ Работает всегда, без зависимостей

2. Просить AI без MCP

GitHub Copilot уже знает shadcn/ui. Можно просто сказать:

"Добавь компонент button из shadcn в проект"

И AI выполнит нужную команду вручную. Да, это не автоматически, но работает стабильно.

3. Подождать стабильной версии

Через несколько месяцев MCP станет более зрелым, UI стабилизируется, и тогда можно будет настроить всё по документации.

📚 Полезные ресурсы

Если всё же хотите попробовать настроить MCP, вот полезные ссылки:

• Официальная документация shadcn MCP
• VS Code MCP документация
• Model Context Protocol спецификация

🎯 Вывод

MCP для shadcn — это классная идея, но пока что не для production. Если вы просто хотите использовать shadcn/ui в своём проекте, лучше:

1. Использовать CLI напрямую: npx shadcn@latest add [component]
2. Полагаться на знания AI без MCP
3. Следить за обновлениями и попробовать через пару месяцев

А для обучения и экспериментов — отличная тема! Именно так и появилась эта статья 😄

📝 Обновления

Эта статья будет обновляться по мере развития технологии. Если у вас получилось настроить MCP — напишите в комментариях!