Shadcn UI MCP Server

Shadcn UI v4 MCP Server

MCP-сервер, который отдает агенту исходники, демо и блоки компонентов shadcn/ui для React, Svelte, Vue и React Native

jpisnice/shadcn-ui-mcp-serverАвтор:Janardhan Pollle

Установка

В терминале, через SkillFoxx CLI

npx skillfoxx add mcp/shadcn-ui-v4-mcp-server

Определит агенты на машине, проверит риск и зафиксирует версию.

Другие способы установки

Выполните в терминале

claude mcp add --transport stdio --env 'GITHUB_API_KEY=<ваш GITHUB_API_KEY>' shadcn -- npx -y @jpisnice/shadcn-ui-mcp-server --github-api-key '<ваш GITHUB_API_KEY>'

Или добавьте в файл .mcp.json, в проекте

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<ваш GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<ваш GITHUB_API_KEY>"
      }
    }
  }
}

Если файл уже есть, добавьте сервер внутрь ключа mcpServers.

Ключи и настройки

GITHUB_API_KEYсекрет, обязательная

Замените значения в угловых скобках своими. Ключи не попадают в ссылки установки и не хранятся у нас.

Установить в Cursor

Кнопка откроет агент и предложит добавить сервер. Если ничего не произошло, скопируйте конфиг ниже.

Добавьте в файл ~/.cursor/mcp.json, для всех проектов

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<ваш GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<ваш GITHUB_API_KEY>"
      }
    }
  }
}

Если файл уже есть, добавьте сервер внутрь ключа mcpServers. Для одного проекта тот же блок кладут в .cursor/mcp.json.

Ключи и настройки

GITHUB_API_KEYсекрет, обязательная

Замените значения в угловых скобках своими. Ключи не попадают в ссылки установки и не хранятся у нас.

Установить в VS Code

Кнопка откроет агент и предложит добавить сервер. Если ничего не произошло, скопируйте конфиг ниже.

Выполните в терминале

code --add-mcp '{"name":"shadcn","type":"stdio","command":"npx","args":["-y","@jpisnice/shadcn-ui-mcp-server","--github-api-key","<ваш GITHUB_API_KEY>"],"env":{"GITHUB_API_KEY":"<ваш GITHUB_API_KEY>"}}'

Или добавьте в файл .vscode/mcp.json, в проекте

{
  "servers": {
    "shadcn": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<ваш GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<ваш GITHUB_API_KEY>"
      }
    }
  }
}

Если файл уже есть, добавьте сервер внутрь ключа servers.

Ключи и настройки

GITHUB_API_KEYсекрет, обязательная

Замените значения в угловых скобках своими. Ключи не попадают в ссылки установки и не хранятся у нас.

Выполните в терминале

codex mcp add shadcn --env 'GITHUB_API_KEY=<ваш GITHUB_API_KEY>' -- npx -y @jpisnice/shadcn-ui-mcp-server --github-api-key '<ваш GITHUB_API_KEY>'

Или добавьте в файл ~/.codex/config.toml, для всех проектов

[mcp_servers.shadcn]
command = "npx"
args = ["-y", "@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "<ваш GITHUB_API_KEY>"]
env = { GITHUB_API_KEY = "<ваш GITHUB_API_KEY>" }

Если файл уже есть, допишите блок в конец.

Ключи и настройки

GITHUB_API_KEYсекрет, обязательная

Замените значения в угловых скобках своими. Ключи не попадают в ссылки установки и не хранятся у нас.

Добавьте в файл ~/.gemini/settings.json, для всех проектов

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<ваш GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<ваш GITHUB_API_KEY>"
      }
    }
  }
}

Если файл уже есть, добавьте сервер внутрь ключа mcpServers.

Ключи и настройки

GITHUB_API_KEYсекрет, обязательная

Замените значения в угловых скобках своими. Ключи не попадают в ссылки установки и не хранятся у нас.

Добавьте в файл ~/.config/devin/mcp_config.json, для всех проектов

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<ваш GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<ваш GITHUB_API_KEY>"
      }
    }
  }
}

Если файл уже есть, добавьте сервер внутрь ключа mcpServers. В легаси Cascade конфиг MCP лежит в ~/.codeium/windsurf/mcp_config.json.

Ключи и настройки

GITHUB_API_KEYсекрет, обязательная

Замените значения в угловых скобках своими. Ключи не попадают в ссылки установки и не хранятся у нас.

Бывший Windsurf.

Добавьте в файл cline_mcp_settings.json, для всех проектов

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<ваш GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<ваш GITHUB_API_KEY>"
      }
    }
  }
}

Если файл уже есть, добавьте сервер внутрь ключа mcpServers. Файл настроек открывается в Cline: вкладка MCP Servers, кнопка Configure MCP Servers.

Ключи и настройки

GITHUB_API_KEYсекрет, обязательная

Замените значения в угловых скобках своими. Ключи не попадают в ссылки установки и не хранятся у нас.

Добавьте в файл .roo/mcp.json, в проекте

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<ваш GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<ваш GITHUB_API_KEY>"
      }
    }
  }
}

Если файл уже есть, добавьте сервер внутрь ключа mcpServers.

Ключи и настройки

GITHUB_API_KEYсекрет, обязательная

Замените значения в угловых скобках своими. Ключи не попадают в ссылки установки и не хранятся у нас.

Форк Roo Code, папки .roo те же.

Добавьте в файл opencode.json, в проекте

{
  "mcp": {
    "shadcn": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<ваш GITHUB_API_KEY>"
      ],
      "environment": {
        "GITHUB_API_KEY": "<ваш GITHUB_API_KEY>"
      }
    }
  }
}

Если файл уже есть, добавьте сервер внутрь ключа mcp.

Ключи и настройки

GITHUB_API_KEYсекрет, обязательная

Замените значения в угловых скобках своими. Ключи не попадают в ссылки установки и не хранятся у нас.

Добавьте в файл ~/.config/zed/settings.json, для всех проектов

{
  "context_servers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<ваш GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<ваш GITHUB_API_KEY>"
      }
    }
  }
}

Если файл уже есть, добавьте сервер внутрь ключа context_servers.

Ключи и настройки

GITHUB_API_KEYсекрет, обязательная

Замените значения в угловых скобках своими. Ключи не попадают в ссылки установки и не хранятся у нас.

Добавьте в файл .codeassistant/mcp.json, в проекте

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<ваш GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<ваш GITHUB_API_KEY>"
      }
    }
  }
}

Если файл уже есть, добавьте сервер внутрь ключа mcpServers.

Ключи и настройки

GITHUB_API_KEYсекрет, обязательная

Замените значения в угловых скобках своими. Ключи не попадают в ссылки установки и не хранятся у нас.

Понадобится: Node.js

Сверено с репозиторием 25 сент. 2026, коммит 45d615f.

Текст для агента

Подключи MCP-сервер: claude mcp add shadcn -- npx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN. Токен GitHub не обязателен, но поднимает лимит запросов. Для Svelte, Vue или React Native добавь флаг --framework.

Другие способы из описания автора

claude mcp add shadcn -- npx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

Токен GitHub не обязателен, но без него лимит около 60 запросов в час. Флаг --framework меняет стек.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Сервер подключается к агенту по протоколу 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 MCP

Ограничения

Сервер читает компоненты через GitHub API. Без токена лимит около 60 запросов в час, с личным токеном GitHub он поднимается до 5000. Сам сервер запускается локально через npx или в Docker и требует Node.js версии 18 и выше. Он отдает исходники, а записывает файлы в проект уже агент.

Как отключить. Удалите сервер из конфигурации MCP вашего клиента. В Claude Code: claude mcp remove shadcn.

MCP

Транспорт: stdio, sse
Авторизация: API-ключ

Переменные окружения
Переменные окружения
GITHUB_PERSONAL_ACCESS_TOKEN секрет	Личный токен GitHub. Не обязателен, поднимает лимит запросов к GitHub API с 60 до 5000 в час. Можно передать и флагом --github-api-key.

Проверка безопасности

Запускает локальный процесс через npx или Docker
Обращается по сети к GitHub API за исходниками компонентов

Коротко о 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.

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

Нужен ли токен GitHub?

Не обязателен. Без него доступно около 60 запросов в час, с личным токеном лимит вырастает до 5000, чего хватает для активной работы.

Какие фреймворки поддерживаются?

React по умолчанию, а также Svelte, Vue и React Native. Стек выбирается флагом --framework. Для React можно переключиться с Radix на Base через --ui-library.

Скиллы Next.js

Next.js skills

Выбор редакции

Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере

ПлагинСредний рискБез VPN142,9 тыс.

shadcn/ui

Выбор редакции

Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки

СкиллСредний рискБез VPN124,8 тыс.

Impeccable

Выбор редакции

Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов

СкиллВысокий риск72,1 тыс.

Скиллы Vercel для агентов

Agent Skills

Выбор редакции

Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой

СкиллСредний риск31,7 тыс.

Установка

Что делает

Подходит, если

Не подходит, если

Пример запроса к агенту

Ограничения

MCP

Проверка безопасности

Коротко о README

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

Похожие

Скиллы Next.js

shadcn/ui

Impeccable

Скиллы Vercel для агентов