
shadcn/ui MCP
Даёт агенту исходники, демо и зависимости компонентов shadcn/ui v4 и готовые блоки вроде дашбордов и форм. Кроме React есть версии для Svelte, Vue и React Native.
Как подключить
Что сделать до подключения
Node.js 20 или новее
Токен GitHub по желанию: без него 60 запросов в час, с ним 5000
GITHUB_PERSONAL_ACCESS_TOKENgithub.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.
Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex
[mcp_servers.shadcn]
command = "npx"
args = ["-y", "@jpisnice/shadcn-ui-mcp-server"]
[mcp_servers.shadcn.env]
GITHUB_PERSONAL_ACCESS_TOKEN = "ghp_<ваш токен GitHub>"Проверка: В интерфейсе codex введите /mcp: появится список активных серверов. Из терминала то же покажет codex mcp list.
Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["-y", "@jpisnice/shadcn-ui-mcp-server"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_<ваш токен GitHub>"
}
}
}
}Проверка: Откройте Customize в боковой панели: там список серверов с переключателями. Ошибки подключения смотрите в панели Output (Cmd+Shift+U), пункт MCP Logs в выпадающем списке.
Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code
{
"mcpServers": {
"shadcn": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@jpisnice/shadcn-ui-mcp-server"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_<ваш токен GitHub>"
}
}
}
}Проверка: Попросите Copilot выполнить безобидную задачу через сервер и раскройте вызов инструмента в чате. Одна запись в конфиге подключение не подтверждает.
Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["-y", "@jpisnice/shadcn-ui-mcp-server"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_<ваш токен GitHub>"
}
}
}
}Проверка: Запустите qwen и введите /mcp: откроется окно управления серверами. Из терминала статус покажет qwen mcp list.
Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["-y", "@jpisnice/shadcn-ui-mcp-server"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_<ваш токен GitHub>"
}
}
}
}Проверка: gemini mcp list показывает каждый сервер, его настройки и статус Connected или Disconnected. В сессии /mcp выводит CONNECTED, CONNECTING или DISCONNECTED и список инструментов.
Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"servers": {
"shadcn": {
"type": "local",
"command": ["npx", "-y", "@jpisnice/shadcn-ui-mcp-server"],
"environment": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_<ваш токен GitHub>"
}
}
}
}
}Проверка: opencode mcp list показывает состояние каждого сервера, подключённый выглядит как ✓ context7 connected. Внутри OpenCode то же видно в /mcps.
Настройки → Разработчик → Изменить конфиг: файл claude_desktop_config.json. После правки перезапустите приложение. Подробно о Claude Desktop
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["-y", "@jpisnice/shadcn-ui-mcp-server"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_<ваш токен GitHub>"
}
}
}
}Проверка: Нажмите «Add files, connectors, and more /» в левом нижнем углу поля ввода, наведите на Connectors и откройте Manage connectors. Выберите сервер, чтобы увидеть его инструменты.
Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["-y", "@jpisnice/shadcn-ui-mcp-server"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_<ваш токен GitHub>"
}
}
}
}Проверка: Попросите модель в чате выполнить задачу через инструмент сервера. Через API сервер из mcp.json вызывают по id в integrations, например mcp/playwright.
Инструменты сервера
list_componentsпоказывает все компонентыget_componentотдаёт исходник компонентаget_component_demoотдаёт пример использованияget_component_metadataпоказывает зависимости компонентаlist_blocksпоказывает блоки по категориямget_blockотдаёт блок целикомget_directory_structureпоказывает структуру репозиторияlist_themesпоказывает темы tweakcnget_themeпоказывает тему tweakcnapply_themeприменяет тему к проектуЧто попросить агента
Для каких задач
Ограничения
Компоненты читаются через GitHub API: без токена лимит 60 запросов в час
Фреймворк выбирается при запуске флагом --framework; один процесс сервера отдаёт одну библиотеку
Base UI вместо Radix доступен только для React
Сервер сторонний: shadcn его не ведёт