Ark UI

Chakra Systems (команда Ark UI) · официальный сервер

Даёт агенту свойства, готовые примеры и атрибуты для стилей компонентов Ark UI, когда он собирает интерфейс на React, Vue, Svelte или Solid

На твоём компьютере·Без ключа·Бесплатно·7 инструментов·проверено 14.10.2026 на версии 1.3.0

Другие способы ↓Что можно сделать ↓

Перед установкой

Персональные данные клиентов могут уйти за границу. Если через подключение пойдут данные твоих клиентов, это передача за границу по 152-ФЗ: нужны согласие людей и уведомление Роскомнадзора.

Работа из России нестабильна (на 14.10.2026). Регистрация, ключ и оплата не нужны. 14 октября 2026 года с трёх российских узлов check-host.net, двух московских и одного петербургского, адреса ark-ui.com/api, к которым ходит сервер, ответили за 0,16-0,30 секунды, реестр npm отдал версию 1.3.0. MCP-вызов из России мы не делали: песочница стоит за границей, так что проверка неполная. Сверено 14.10.2026.

Что сможет агент

Агент получает список компонентов Ark UI для React, Vue, Svelte или Solid: для React на прогоне их пришло 65, от accordion до tree-view, для Vue 63.
По имени компонента сервер присылает его свойства с типами и значениями по умолчанию. У корня модального окна dialog их 31, и видно, что окно по умолчанию закрывается клавишей Esc и держит фокус внутри.
Готовые примеры приходят целиком, вместе с файлами стилей: у окна dialog для React 18 примеров, пример окна подтверждения пришёл четырьмя файлами.
Для оформления сервер называет data-атрибуты и CSS-переменные частей компонента, которые описаны в справке Ark UI: у окна dialog это Trigger, Backdrop и Content. К двум десяткам компонентов сервер добавляет заметки авторов, например обязательный CSS для корня уведомления toast.
Поиск по документации находит нужную страницу, после чего агент получает её в Markdown: руководство по формам с React Hook Form, TanStack Form и Vee Validate заняло 16 751 знак.

Кто сделал: Chakra Systems (команда Ark UI)
Версия: 1.3.0
Проверено: 14.10.2026, Claude Code
Лицензия: MIT
Код: github.com/chakra-ui/ark/tree/main/packages/mcp
Документация: ark-ui.com/react/docs/ai/mcp-server

Подключить

Промпт собран из паспорта: команды в нём те же, что во вкладках Claude Code и Codex.

Промпт для агента

Подключи MCP-сервер «Ark UI» версии 1.3.0. Работай по шагам и после каждого коротко говори, что сделал.

Данные сервера (каталог smyslokod.ru, проверено 14.10.2026):
- имя в конфиге: ark-ui
- официальный источник: https://github.com/chakra-ui/ark/tree/main/packages/mcp
- запуск: npx -y @ark-ui/mcp@1.3.0

Правила:
1. Не ставь Node.js, uv или Docker без моего «да». Не хватает - остановись и скажи, что поставить и откуда.
2. Ставь только пакет или адрес из этого промпта. Никаких установочных скриптов из README без моего подтверждения.
3. Перед правкой конфига сделай его резервную копию.

Шаги:
0. Определи, кто ты (Claude Code, Codex или другой агент) и какая у меня система.
1. Проверь окружение: node --version и npx --version (нужен Node.js 18 или новее). Скажи, что нашёл.
2. Проверь, нет ли уже сервера с таким именем: `claude mcp get ark-ui` (в Codex: `codex mcp list`).
3. Подключи сервер:
Claude Code: claude mcp add --scope user --transport stdio ark-ui -- npx -y @ark-ui/mcp@1.3.0
Codex: codex mcp add ark-ui -- npx -y @ark-ui/mcp@1.3.0
Если ты не Claude Code и не Codex, подключи способом, принятым у тебя, с той же командой запуска.
4. Проверка: `claude mcp list` (в Codex: `codex mcp list`), статус должен быть «Connected». Попроси меня перезапустить сессию. У сервера 7 инструментов, перечисли их. Сделай пробный запрос: «Через ark-ui покажи свойства Dialog.Root для React и какие из них включены по умолчанию». Покажи результат.
5. Итог одним сообщением: что добавлено и куда, статус, число инструментов, команда отката и откуда восстановить копию конфига. Откат: `claude mcp remove ark-ui --scope user` (в Codex: `codex mcp remove ark-ui`).

Если на любом шаге ошибка, не чини наугад. Покажи текст ошибки и скажи, что, по-твоему, случилось. Частые проблемы: https://smyslokod.ru/mcp/ark-ui#problemy

Выполнят Claude Code, Codex, Hermes и любой агент с доступом к терминалу.

Что нужно на компьютере: Node.js 18 или новее.

Ключ: не нужен.

Ключ и аккаунт не нужны. При запуске и на каждый вызов сервер обращается к сайту ark-ui.com: без интернета он не стартует. Справку сайт отдаёт по текущей пятой версии Ark UI, на прогоне 14 октября 2026 года это была 5.39.3.

Проверь, что работает

Пробный запрос

Через ark-ui покажи свойства Dialog.Root для React и какие из них включены по умолчанию

Что должно получиться: Промпт просит свойства корня модального окна. При прямом вызове get_component_props через mcp-probe пришло 9 частей окна и 31 свойство у Root, по умолчанию включены closeOnEscape, closeOnInteractOutside, modal, trapFocus и preventScroll. Ответ агента на этот промпт мы не смотрели. Если в ответе нет вызова ark-ui, проверь командой /mcp, подключён ли сервер.

Что можно сделать

4 сценария

Окно, которое не даёт потерять несохранённый текст

Пример confirmation из справки Ark UI делает ровно это: окно с полем ввода, а при попытке закрыть его с текстом открывается второе окно с вопросом. На прогоне он пришёл файлом confirmation.tsx и тремя файлами стилей. Перенос в твой проект агентом мы не запускали.

list_examples по dialog для React выдаёт 18 примеров, среди них confirmation.
get_example присылает код примера и его файлы стилей.
Свойства каждой части окна показывает get_component_props по dialog.

Промпт

Через подключение ark-ui найди среди примеров модального окна dialog для React тот, где при закрытии с несохранённым текстом появляется подтверждение. Возьми его за основу и сделай окно «Оставить отзыв» с полем для текста и кнопкой «Отправить». Сверь свойства Dialog.Root, прежде чем менять код.

Бесплатно: почта или сразу Телеграм-канал клуба

Совет. По умолчанию окно закрывается по Esc и по щелчку снаружи: за это отвечают closeOnEscape и closeOnInteractOutside.

Выбор даты в форме на Svelte

У корня компонента date-picker для Svelte сервер вернул 51 свойство. Там видно то, что легко пропустить: язык по умолчанию en-US, часовой пояс UTC, а первый день недели задаёт startOfWeek. Соберёт ли агент календарь по-русски с понедельника, на прогоне не выясняли.

get_component_props по date-picker для Svelte присылает все части календаря и свойства корня.
Страницу с примерами и разделом о доступности отдаёт get_docs по components/date-picker.

Промпт

Добавь в форму заявки на Svelte поле выбора даты на Ark UI. Через ark-ui посмотри свойства date-picker и сделай так, чтобы календарь был на русском, неделя начиналась с понедельника, а прошедшие даты выбрать было нельзя.

Бесплатно: почта или сразу Телеграм-канал клуба

Совет. Страница date-picker в Markdown весит 180 тысяч знаков. Если агенту хватает свойств, просить всю страницу не обязательно.

Выпадающий список в форме на Vue

Для select на Vue нашлось 17 примеров. Один из них, form-library, связывает список с проверкой формы из библиотеки vee-validate и пришёл тремя файлами, Vue-компонентом и двумя файлами стилей. Руководство по формам добавляет, что поля внутри Field.Root сами наследуют disabled, invalid, required и readOnly. Код твоей формы агентом не правили.

list_examples по select для Vue находит пример form-library.
search_docs по слову forms выдаёт руководство guides/forms, get_docs присылает его целиком.

Промпт

У меня форма на Vue с проверкой через vee-validate. Через ark-ui найди пример выпадающего списка select, который работает с библиотекой форм, и руководство по формам Ark UI. Добавь в форму обязательный список «Тариф» с тремя вариантами.

Бесплатно: почта или сразу Телеграм-канал клуба

Оформить всплывающие уведомления

styling_guide по toast вернул атрибуты корня Root, среди них data-type, переменные группы Group и заметку авторов Ark UI: корню уведомления нужны определённые строки CSS, иначе оно работает неправильно. Эти строки пришли готовым блоком. Как агент впишет их в стили проекта, мы не смотрели.

styling_guide по toast присылает атрибуты, переменные и заметку с обязательным CSS.

Промпт

Через подключение ark-ui узнай, как оформлять уведомления toast: какие у частей data-атрибуты и CSS-переменные и какие стили обязательны. Сделай уведомления об ошибке и об успехе разного цвета по атрибуту data-type.

Бесплатно: почта или сразу Телеграм-канал клуба

Пример работы

редакция, прогон при проверке 14.10.2026

Задача: Собрать окно и форму на Ark UI по свежей справке библиотеки
Промпт: Через подключение ark-ui найди пример окна с подтверждением закрытия и свойства Dialog.Root для React
Что сделал агент: В песочнице Ubuntu 24.04.5 сервер добавили командой claude mcp add, Claude Code 2.1.292 показал Connected.
list_components для React перечислил 65 компонентов, для Vue 63.
Среди 18 примеров окна dialog нашёлся confirmation, get_example прислал его четырьмя файлами.
get_component_props по dialog отдал 31 свойство корня, styling_guide - атрибуты и CSS-переменные окна.
Несуществующий пример получил ответ 404, путь ../../../etc/passwd - отказ 403.
Результат: 16 вызовов всех семи инструментов заняли от 10 до 493 мс, ключ не понадобился. Вызывал их mcp-probe, агентом Claude Code промпт не выполнялся.

Инструменты

7 · описания около 1,7 тыс. токенов

Жёлтым то, что агент делает от твоего имени, красным запуск команд на компьютере. Нажми на имя: покажем, что делает инструмент, и описание, которое читает агент. В Claude Code инструменты грузятся по запросу и почти не занимают память агента; в других клиентах и при своём адресе подключения (ANTHROPIC_BASE_URL) описания грузятся целиком на каждом сообщении.

Когда не нужен

Если интерфейс собран на другой библиотеке компонентов, сервер не пригодится: справка у него только по Ark UI. Готового оформления у Ark UI нет, компоненты приходят без стилей, поэтому для сайта, который надо собрать быстро и сразу красиво, лучше подойдёт библиотека с готовыми стилями.

Частые проблемы

Ответ «Failed to fetch example: 404 Not Found»

У компонента нет примера с таким именем: сервер подставляет его в адрес как есть и со списком не сверяет. Попроси агента сначала вызвать list_examples и взять имя оттуда.

Ответ «Failed to fetch docs page: 403 Forbidden»

Сайт отказал в доступе к запрошенному адресу. На прогоне так ответил выдуманный путь ../../../etc/passwd, точную причину отказа мы не выясняли. Пусть агент возьмёт поле slug из ответа search_docs, например guides/forms, и передаст его в get_docs.

Свойство из ответа не срабатывает в проекте

Сайт отдаёт справку по текущей версии Ark UI, а в проекте может стоять более старая. Справку по старым версиям сервер не выбирает. Посмотри версию @ark-ui/react или @ark-ui/vue в package.json. Если она отстаёт, обнови библиотеку или сверь свойство в документации своей версии на ark-ui.com.

Агент не видит инструментов сервера

Клиент не перезапущен после подключения: Claude Code читает подключения при старте сессии. Закрой и открой сессию, потом проверь: claude mcp list.

«spawn npx ENOENT» при запуске

Клиент не видит npx: приложения с иконкой не читают PATH из настроек терминала. Пропиши полный путь к npx. Узнать его: which npx на Mac, where npx на Windows.

«Unsupported engine» или падение при старте

Старая версия Node.js. Нужна 18 или новее, проверить: node --version.

Codex: сервер не успевает запуститься

Codex ждёт запуска 10 секунд, а первый запуск npx скачивает пакет дольше. Во вкладке Codex уже стоит startup_timeout_sec = 30, возьми фрагмент оттуда.

Безопасность и данные

Кто сделал: Chakra Systems (команда Ark UI) (официальный). Исходный код: github.com/chakra-ui/ark/tree/main/packages/mcp, лицензия MIT.
Что видит агент: Только то, что агент передаёт в вызов: фреймворк, имя компонента, номер примера, адрес страницы и слова поиска. Всё это уходит на ark-ui.com в адресе запроса. Файлы проекта и разговор сервер не читает. Если агент напишет в поиск что-то личное, оно тоже уйдёт на сайт, поэтому ключи и данные клиентов в такие запросы не вставляй.
Куда уходят данные: Данные уходят: Chakra Systems, сайт ark-ui.com на хостинге Vercel, страна обработки не указана сервисом.
Что может изменить: Все семь инструментов только читают справку Ark UI с сайта, на диск сервер не пишет. Правки в код проекта агент делает своими средствами.
Наша проверка: Пакет @ark-ui/mcp выпускает команда Ark UI: в package.json он назван официальным сервером Ark UI, лежит в репозитории chakra-ui/ark под лицензией MIT, на него ссылается страница MCP на ark-ui.com. Версию 1.3.0 загрузил в npm сборщик GitHub Actions. Мы прочитали код: сервер не запускает команды, не трогает файлы и обращается только к ark-ui.com/api, скриптов при установке нет. Инструкций и подсказок у сервера нет, скрытых указаний в описаниях семи инструментов мы не нашли. В одноразовой песочнице Ubuntu 24.04.5 было 16 вызовов всех семи инструментов, ответы пришли за 10-493 мс. Путь ../../../etc/passwd получил от сайта отказ 403. В журнале соединений только ark-ui.com (76.76.21.21 по getent в том же прогоне) и реестр npm, к которому обращается npx. Установленный пакет, запущенный без npx, соединялся только с ark-ui.com. По самому пакету в базе OSV записей нет. У зависимости @modelcontextprotocol/sdk 1.29.0 есть GHSA-6qxp-vccf-f47h про вход OAuth в клиентах по HTTP. В тексте записи сказано, что серверы на этой библиотеке и подключения через stdio уязвимость не задевает. Ark UI MCP - сервер, и подключается он через stdio. Версия в команде закреплена.
Версия: В командах закреплена версия 1.3.0: ставится ровно то, что мы проверили.
Проверить самому: агент прочитает код подключения как недоверенный

Полезные материалы

Журнал проверок

14.10.2026·1.3.0·Claude Code, Linux·работает6de82234750350d5

Отпечаток - контрольная сумма того, что сервер отдаёт агенту. Поменялся при той же версии - поменялось поведение.

Подключения делают их авторы. Мы проверяем установку и описываем, что они умеют, но код и сервис остаются чужими. Перед установкой посмотри, какие данные получит агент.