Что сможет агент
- Агент получает список компонентов 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
- Документация
- ark-ui.com/react/docs/ai/mcp-server
Подключить
Промпт собран из паспорта: команды в нём те же, что во вкладках Claude Code и Codex.
Подключи MCP-сервер «Ark UI» версии 1.3.0. Работай по шагам и после каждого коротко говори, что сделал.
Данные сервера (каталог code.tarasovweb.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://code.tarasovweb.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 нет, компоненты приходят без стилей, поэтому для сайта, который надо собрать быстро и сразу красиво, лучше подойдёт библиотека с готовыми стилями.
Частые проблемы
7Ответ «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: ставится ровно то, что мы проверили.
- Проверить самому
- агент прочитает код подключения как недоверенный
Полезные материалы
- Инструкция · на английскомMCP-сервер Ark UIОфициальная страница: команда для Claude Code и настройки для Cursor, VS Code, Windsurf и Zed.
- Инструкция · на английскомИсходный код сервераПакет в репозитории Ark UI: список инструментов и код, по которому видно, куда сервер ходит.
- Инструкция · на английскомФормы в Ark UIField и Fieldset, подписи и ошибки полей, связка с React Hook Form и TanStack Form.
- Инструкция · на английскомСтили в Ark UIКак оформлять компоненты через data-атрибуты.
- Инструкция · на английскомМодальное окно DialogЧасти окна, свойства и примеры, которые сервер отдаёт агенту.
Журнал проверок
- 14.10.2026·1.3.0·Claude Code, Linux·работает6de82234750350d5
Отпечаток - контрольная сумма того, что сервер отдаёт агенту. Поменялся при той же версии - поменялось поведение.
Подключения делают их авторы. Мы проверяем установку и описываем, что они умеют, но код и сервис остаются чужими. Перед установкой посмотри, какие данные получит агент.
