UI Beats — MCP-сервер для Claude Code: что делает и как установить
Находит анимированные компоненты React в каталоге UI Beats, читает их свойства и генерирует команды для установки. Помогает внедрять готовый интерфейс прямо из чата с ассистентом.
claude mcp add mcp -- npx -y @uibeats/mcpЧто делает UI Beats
Сервер открывает ИИ-агенту доступ к библиотеке анимированных React-компонентов. Вместо поиска по сайту в браузере агент напрямую вызывает поиск по описанию, запрашивает сигнатуру пропсов и полный исходный код выбранного элемента. Для вставки в проект он отдаёт готовую команду shadcn вместе со списком нужных npm-зависимостей.
Внутри нет отдельного бэкенда. Вызовы идут к двум статическим файлам сайта uibeats.com с индексами и документацией. Сервер кэширует каталог в оперативной памяти на десять минут. При сбоях сети он отдаёт устаревшую копию, чтобы инструмент продолжал отвечать.
Если сайт недоступен или вы разрабатываете витрину локально, переменная UIBEATS_URL позволяет направить запросы на локальный порт. Без указания этой переменной сервер всегда обращается к основному сайту.
Какие задачи решает
- Найти анимированный компонент React по описанию на естественном языке
- Получить исходный код и таблицу пропсов без открытия браузера
- Сгенерировать команду
shadcnдля быстрой установки пакета - Посмотреть список компонентов интерфейса с группировкой по категориям
Примеры запросов агенту
- Найди карточку с эффектом переворота в каталоге UI Beats и покажи её пропсы
- Покажи команду для установки компонента
flip-cardчерез shadcn - Выведи список компонентов анимации из UI Beats по категориям
Как установить UI Beats
Командой платформы
claude mcp add mcp -- npx -y @uibeats/mcpКомандой платформы
codex mcp add mcp -- npx -y @uibeats/mcpФайл настроек
{
"mcpServers": {
"mcp": {
"command": "npx",
"args": [
"-y",
"@uibeats/mcp"
]
}
}
}Файл настроек
{
"servers": {
"mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@uibeats/mcp"
]
}
}
}Командой платформы
gemini mcp add mcp npx -y @uibeats/mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о UI Beats
Как установить UI Beats в Claude Code?
Выполните в терминале команду claude mcp add mcp -- npx -y @uibeats/mcp. После этого перезапустите сессию с агентом, чтобы подключить доступные инструменты.
Что делает MCP-сервер UI Beats?
Он предоставляет агенту инструменты вроде search_components и get_install_command. Это позволяет модели искать элементы интерфейса, читать их код и генерировать команды добавления в проект.
Как переключить сервер на локальную копию сайта?
Задайте переменную окружения UIBEATS_URL=http://localhost:3000 перед запуском команды npx @uibeats/mcp. По умолчанию сервер обращается к адресу https://uibeats.com.
