Vlak — MCP-сервер для Claude Code: что делает и как установить
MCP-сервер дизайн-системы Vlak. Помогает ассистенту находить React-компоненты и читать документацию дизайн-токенов прямо в коде.
claude mcp add --transport http vlak https://vlak.dev/mcpЧто делает Vlak
Vlak открывает языковым моделям доступ к реестру интерфейсных компонентов, построенному на StyleX и нативных стандартах браузера вроде Popover API и <dialog>. Сервер передаёт агенту параметры элементов, правила доступности и примеры разметки. Документация работает локально или через удалённый адрес, поэтому внешние ключи доступа не требуются.
Система поддерживает три варианта интеграции: готовый пакет @noorddev/vlak-react, генерацию исходников через CLI в стиле shadcn или чистые CSS-классы. Тёмная тема включается атрибутом data-theme="dark" на корневом элементе. Важное ограничение: если вы решите затягивать исходники компонентов в свой репозиторий, сборщику проекта понадобится поддержка StyleX.
Какие задачи решает
- найти параметры и типы React-компонентов из реестра Vlak
- получить команды установки компонентов через CLI или shadcn
- внедрить интерфейсные элементы с готовой поддержкой APG и тестами axe
- настроить тёмную тему и поддержку RTL на уровне логических свойств CSS
Примеры запросов агенту
- Найди в реестре Vlak компонент диалогового окна и покажи его свойства
- Как установить кнопку из Vlak в проект с настроенным shadcn?
- Покажи параметры дизайн-токенов Vlak для типографики и отступов
Как установить Vlak
Командой платформы: удалённый сервер
claude mcp add --transport http vlak https://vlak.dev/mcpКомандой платформы: удалённый сервер
codex mcp add vlak --url https://vlak.dev/mcpФайл настроек
{
"mcpServers": {
"vlak": {
"url": "https://vlak.dev/mcp"
}
}
}Файл настроек
{
"servers": {
"vlak": {
"type": "http",
"url": "https://vlak.dev/mcp"
}
}
}Командой платформы: удалённый сервер
gemini mcp add -t http vlak https://vlak.dev/mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Vlak
Как установить Vlak в Claude Code?
Выполните команду claude mcp add --transport http vlak https://vlak.dev/mcp в терминале. Никаких дополнительных ключей API сервер не требует.
Что делает MCP-сервер Vlak?
Он предоставляет модели структурированные данные о компонентах дизайн-системы, типах TypeScript, токенах и способах внедрения разметки.
Обязательно ли настраивать StyleX для использования Vlak?
Нет, компилятор StyleX нужен только при копировании исходных файлов компонентов. Вы можете подключить скомпилированный пакет @noorddev/vlak-react с готовым CSS или использовать только стили.
