UI Registry — MCP-сервер для Claude Code: что делает и как установить
Подключает агента к 12 библиотекам компонентов формата shadcn. Помогает находить готовые блоки интерфейса, сравнивать варианты и выравнивать стили.
claude mcp add ui-registry-mcp -- npx -y ui-registry-mcpЧто делает UI Registry
Ассистенты часто генерируют примитивную вёрстку с нуля, хотя для веба уже есть тысячи открытых заготовок. Сервер даёт модели прямой доступ к 12 внешним каталогам с примерно 3700 компонентами, среди которых ReUI, Watermelon UI, Aceternity UI, Tailark и Kibo UI. Данные не хранятся локально. Запросы уходят напрямую в реестры при каждом поиске, сохраняя актуальность кода.
Внутри шесть инструментов: list_registries, search_components, compare_components, get_component, check_consistency и list_components. Модель может сопоставить несколько реализаций карточки или модального окна, забрать готовый исходный код с командой npx shadcn add и проверить расхождения в стилях. Инструмент проверки находит несоответствия в скруглениях, пропущенную тёмную тему или жёстко прописанные цвета вроде zinc-900.
Каталоги вроде ReUI или Aceternity содержат платные блоки. Для отсечения нерабочих вариантов нужно явно передавать параметр verified, иначе агент попытается поставить закрытый компонент и завершит вызов ошибкой.
Какие задачи решает
- подобрать готовый блок интерфейса из 12 shadcn-реестров
- сравнить несколько реализаций одного элемента перед вставкой в проект
- устранить стилевой разброс и конфликты токенов между сторонними компонентами
- получить исходный код блока вместе со списком зависимостей
Примеры запросов агенту
- Собери экран с тарифами: поищи подходящие блоки по реестрам и выбери лучший вариант.
- Добавь таблицу с данными и проверь через
check_consistency, чтобы её стили совпадали с карточкой выше. - Найди только бесплатные диалоговые окна с поддержкой тёмной темы.
Как установить UI Registry
Командой платформы
claude mcp add ui-registry-mcp -- npx -y ui-registry-mcpКомандой платформы
codex mcp add ui-registry -- npx -y ui-registry-mcpФайл настроек
{
"mcpServers": {
"ui-registry": {
"command": "npx",
"args": [
"-y",
"ui-registry-mcp"
]
}
}
}Файл настроек
{
"servers": {
"ui-registry": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"ui-registry-mcp"
]
}
}
}Командой платформы
gemini mcp add ui-registry npx -y ui-registry-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о UI Registry
Как установить UI Registry в Claude Code?
Выполните в терминале команду claude mcp add ui-registry -- npx -y ui-registry-mcp. Сервер сразу запустится через npx без сборки репозитория.
Зачем нужен MCP-сервер UI Registry?
Он позволяет ИИ-агенту искать и скачивать проверенные компоненты из каталогов экосистемы shadcn прямо в процессе диалога. Модель перестаёт придумывать вёрстку с нуля.
Как отфильтровать платные компоненты?
В инструментах поиска предусмотрен параметр verified. Он отсеивает премиальные карточки ReUI и Aceternity, оставляя только доступные для свободной установки блоки.
