UI Beats MCP
MCP-сервер каталога анимированных React-компонентов UI Beats: поиск, свойства, исходный код и команда установки для агента
- 235 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Сервер читает публичные страницы каталога и не получает доступа к вашему коду, а установку компонента выполняет команда shadcn, которую запускаете вы или агент
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/ui-beatsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Сервер читает публичные страницы каталога и не получает доступа к вашему коду, а установку компонента выполняет команда shadcn, которую запускаете вы или агент
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
UI Beats — коллекция из 55 анимированных React-компонентов на TypeScript, Tailwind CSS и Motion. Это не пакет для импорта: компонент копируют в проект командой shadcn или вручную, и код становится вашим. MCP-сервер `@uibeats/mcp` ставит каталог внутрь Claude Code, Cursor или Windsurf, чтобы агент подбирал компонент и читал его настоящие свойства, а не угадывал их. У сервера четыре инструмента: `search_components` ранжирует каталог по описанию простыми словами или названию, `get_component` отдает таблицу свойств, пример использования и полный исходный код, `list_components` перечисляет все по категориям, `get_install_command` выдает точную команду `shadcn` и список npm-пакетов, которые она подтянет. Отдельного бэкенда нет: сервер кэширует два статических файла сайта (`/r/components.json` и страницы `/docs/<категория>/<название>.md`) на десять минут и держит устаревшую копию на случай сбоя сети.
Для кого. Фронтенд-разработчикам на React и Next.js, которые собирают интерфейс с анимациями вместе с агентом и хотят брать готовые компоненты с реальными свойствами.
Подходит, если
- Агенту нужна карточка, которая переворачивается: он ищет по описанию, читает свойства и ставит нужный компонент
- Перед написанием JSX агент проверяет таблицу свойств компонента и не выдумывает пропсы
- Надо увидеть весь каталог по категориям и выбрать анимацию для лендинга
- Точную команду установки и список зависимостей нужно получить, не открывая сайт
Не подходит, если
- Стек без React и Tailwind: компоненты написаны на React с Tailwind CSS и Motion
- Нужен установленный пакет с версиями и обновлениями: компоненты копируют, а не импортируют
- Нужна строгая дизайн-система с токенами заказчика: каталог задает собственный стиль анимаций
Пример запроса к агенту
Найди в UI Beats анимированную карточку с эффектом переворота, прочитай ее свойства и дай команду установкиMCP
- Транспорт
- stdio
- Авторизация
- не нужна
Переменные окружения
UIBEATS_URL- Адрес каталога, по умолчанию https://uibeats.com; для локального next dev
Ограничения
Сервер читает каталог с сайта uibeats.com через сеть, поэтому без доступа к сайту он работает только по кэшу в памяти на десять минут и сохраненной копии. Адрес меняется переменной `UIBEATS_URL`, например для локального `next dev`. Команда установки `shadcn` записывает файлы в проект и ставит npm-пакеты, а для работы нужен Node.js. Версия в реестре MCP 0.1.3, а лицензия MIT. Компоненты принадлежат вам после копирования, и обновления автор в проект сам не отправляет.
Как отключить. Удалите блок uibeats из конфигурации клиента (`claude mcp remove uibeats`). Уже добавленные компоненты остаются в проекте и удаляются вручную.
Частые вопросы
Как подключить UI Beats к Claude Code?
Выполните `claude mcp add uibeats -- npx -y @uibeats/mcp`. Для Cursor, Windsurf и Claude Desktop добавьте блок `mcpServers` с командой `npx` и аргументами `-y`, `@uibeats/mcp`.
Как установить компонент без MCP?
Командой shadcn из страницы компонента, например `npx shadcn@latest add https://uibeats.com/r/flip-card.json`, или копированием исходника из раздела Installation, Manual.
Какие инструменты есть у сервера?
`search_components`, `get_component`, `list_components` и `get_install_command`. Типичный путь: поиск, чтение свойств, затем команда установки.
Нужен ли отдельный бэкенд?
Нет, сервер кэширует два статических файла сайта: индекс `/r/components.json` и страницы компонентов в Markdown. Кэш живет десять минут.
Есть ли версия для агентов, которые читают только ссылки?
Да: `/llms.txt` с индексом компонентов, `/llms-full.txt` со всеми свойствами и исходниками в одном файле и любая страница компонента в Markdown при добавлении `.md`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыСкилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
MCP-сервер библиотеки React-компонентов для интерфейсов агентов: агент находит компонент и добавляет его в проект
MCP-сервер Arc UI: агент ищет React-компоненты с анимацией, читает документацию и свойства, получает команду shadcn.
Размещенный MCP Watermelon UI ищет бесплатные компоненты, блоки и дашборды на React и Tailwind и отдает исходники.
MCP-сервер и плагин 21st.dev: поиск готовых React/Tailwind компонентов, логотипов и генерация интерфейса прямо из агента
Shadcn UI MCP Server
Shadcn UI v4 MCP Server
MCP-сервер, который отдает агенту исходники, демо и блоки компонентов shadcn/ui для React, Svelte, Vue и React Native
Коротко о README
Текст объясняет, что UI Beats состоит из анимированных компонентов, которыми вы владеете: ставятся командой shadcn или копируются вручную. Дальше идут раздел про агентов с четырьмя инструментами MCP, список адресов для агентов, читающих ссылки, и сведения о стеке.