Chakra UI MCP
MCP-сервер Chakra UI: справочник по компонентам, свойствам и токенам темы плюс разбор кода при переходе с версии 2 на 3
- 40 716 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Сервер запускается через `npx` и скачивает пакет из npm при первом старте
- Ключ Pro хранится в конфигурации клиента и открывает платные шаблоны Chakra UI
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/chakra-ui-mcpОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Сервер запускается через `npx` и скачивает пакет из npm при первом старте
- Ключ Pro хранится в конфигурации клиента и открывает платные шаблоны Chakra UI
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Chakra UI MCP — сервер от команды Chakra UI, через который агент читает справочник по библиотеке: список компонентов, свойства каждого, примеры кода и токены темы. Данные приходят из инструментов `get_components`, `get_component_props`, `get_component_example` и `get_theme`, поэтому агент собирает интерфейс по актуальному API, без догадок. Инструмент `v2_to_v3_code_review` разбирает код на второй версии и показывает фрагменты до и после для перехода на третью. Инструменты `list_blocks` и `get_component_templates` отдают блоки и шаблоны Chakra UI Pro, для них нужен ключ в переменной `CHAKRA_PRO_API_KEY`. Сервер запускается по stdio командой `npx -y @chakra-ui/react-mcp`. В репозитории есть готовые конфигурации для Cursor и Claude Desktop и команда для Codex.
Для кого. Разработчикам интерфейсов на React, которые верстают на Chakra UI в Cursor, Codex или Claude Desktop и переводят проект на третью версию.
Подходит, если
- Агент пишет форму на Chakra UI и путает свойства компонентов, а сервер отдает актуальные props
- Проект переезжает с Chakra UI 2 на 3, и разбор кода с фрагментами до и после ускорит правки
- Тема приложения строится на токенах, и агенту пригодятся семантические токены, стили текста и слоев
- У команды есть доступ к Chakra UI Pro, и агент подбирает готовые блоки и шаблоны из каталога Pro
Не подходит, если
- Интерфейс написан на другой библиотеке: сервер знает только Chakra UI
- Ключа Pro нет, а нужны платные блоки: без него шаблоны Pro недоступны
- Агент должен сам менять тему и файлы проекта: инструменты отдают справочные данные и в проект ничего не пишут
Пример запроса к агенту
Через Chakra UI MCP посмотри свойства компонента Dialog и собери форму входа на Chakra UI 3 с проверкой полейMCP
- Транспорт
- stdio
- Авторизация
- не нужна
Переменные окружения
CHAKRA_PRO_API_KEYсекрет- Ключ Chakra UI Pro для блоков и шаблонов Pro
Ограничения
Блоки и шаблоны Chakra UI Pro работают только с ключом в переменной `CHAKRA_PRO_API_KEY`, остальные инструменты обходятся без него. Миграционный инструмент рассчитан на переход со второй версии на третью, другие пути обновления он не охватывает. Для Codex нужен Codex CLI версии 0.34.0 или новее. Готовой команды для Claude Code в репозитории нет, сервер подключают по образцу из конфигурации Claude Desktop. Сервер запускается через `npx` и при первом старте скачивает пакет из npm, поэтому на машине нужен Node.js.
Как отключить. Удалите блок `chakra-ui` из `mcpServers` в конфигурации клиента. Для Codex выполните `codex mcp remove chakra-ui` или уберите секцию `[mcp_servers.chakra-ui]` из `~/.codex/config.toml`.
Частые вопросы
Как подключить Chakra UI MCP к Cursor?
Добавьте в конфигурацию Cursor сервер `chakra-ui` с командой `npx` и аргументами `-y @chakra-ui/react-mcp`. В репозитории есть и кнопка быстрой установки для Cursor. После перезапуска редактора агент увидит инструменты сервера.
Нужен ли ключ, чтобы пользоваться сервером?
Нет, справочные инструменты работают без ключа. Переменная `CHAKRA_PRO_API_KEY` нужна только для блоков и шаблонов Chakra UI Pro.
Как подключить сервер к Codex?
Выполните `codex mcp add chakra-ui -- npx -y @chakra-ui/react-mcp` или добавьте секцию `[mcp_servers.chakra-ui]` в `~/.codex/config.toml`. Понадобится Codex CLI версии 0.34.0 или новее.
Что делает инструмент v2_to_v3_code_review?
Он разбирает код на Chakra UI 2 и выдает указания для перехода на третью версию, с фрагментами до и после. Запускайте его на тех файлах, которые агент собирается править.
Какие данные про тему отдает сервер?
Инструмент `get_theme` возвращает токены темы, семантические токены, стили текста и стили слоев. По ним агент подбирает цвета и размеры из темы проекта.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыShadcn UI MCP Server
Shadcn UI v4 MCP Server
MCP-сервер, который отдает агенту исходники, демо и блоки компонентов shadcn/ui для React, Svelte, Vue и React Native
MCP-сервер библиотеки React-компонентов для интерфейсов агентов: агент находит компонент и добавляет его в проект
MCP-сервер CodeRocket отдает агенту правила дизайн-системы, компоненты и блоки сохраненной библиотеки только на чтение.
MCP-сервер и плагин 21st.dev: поиск готовых React/Tailwind компонентов, логотипов и генерация интерфейса прямо из агента
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Vibe MCP отдает агенту компоненты, иконки и токены дизайн-системы monday.com Vibe
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Chakra UI MCP (эта карточка) | да | не нужна | 40 716 | |
| Shadcn UI MCP Server | нет | ключ необязателен | 3 089 | справочник по компонентам shadcn/ui, а не Chakra UI |
| shadcn/ui | нет | 127 567 | скилл про shadcn/ui без сервера и токенов Chakra |
Коротко о README
Описание сервера начинается с перечня возможностей: компоненты и примеры, переход со второй версии на третью, токены дизайна и платные шаблоны. Дальше идут семь инструментов, настройка для Claude Desktop, Cursor и Codex, единственная переменная окружения и команды разработки через pnpm.