# Vlak

MCP-сервер дизайн-системы Vlak. Помогает ассистенту находить React-компоненты и читать документацию дизайн-токенов прямо в коде.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 33
- Автор: Noord-Ventures
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/Noord-Ventures/vlak
- Обновлён: 2026-10-15
- HTML: https://affpapa.org/nevibecode/mcp/vlak

## Что делает

Vlak открывает языковым моделям доступ к реестру интерфейсных компонентов, построенному на StyleX и нативных стандартах браузера вроде Popover API и `<dialog>`. Сервер передаёт агенту параметры элементов, правила доступности и примеры разметки. Документация работает локально или через удалённый адрес, поэтому внешние ключи доступа не требуются.

Система поддерживает три варианта интеграции: готовый пакет `@noorddev/vlak-react`, генерацию исходников через CLI в стиле shadcn или чистые CSS-классы. Тёмная тема включается атрибутом `data-theme="dark"` на корневом элементе. Важное ограничение: если вы решите затягивать исходники компонентов в свой репозиторий, сборщику проекта понадобится поддержка StyleX.

## Требования
- Удалённый сервер: `https://vlak.dev/mcp`

## Установка

### Claude Code (родная платформа)

**Командой платформы: удалённый сервер**
```bash
claude mcp add --transport http vlak https://vlak.dev/mcp
```

### Codex

**Командой платформы: удалённый сервер**
```bash
codex mcp add vlak --url https://vlak.dev/mcp
```

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "vlak": {
            "url": "https://vlak.dev/mcp"
        }
    }
}
```

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "vlak": {
            "type": "http",
            "url": "https://vlak.dev/mcp"
        }
    }
}
```

### Gemini CLI

**Командой платформы: удалённый сервер**
```bash
gemini mcp add -t http vlak https://vlak.dev/mcp
```

## Когда брать
- найти параметры и типы React-компонентов из реестра Vlak
- получить команды установки компонентов через CLI или shadcn
- внедрить интерфейсные элементы с готовой поддержкой APG и тестами axe
- настроить тёмную тему и поддержку RTL на уровне логических свойств CSS

## Примеры запросов агенту
- Найди в реестре Vlak компонент диалогового окна и покажи его свойства
- Как установить кнопку из Vlak в проект с настроенным shadcn?
- Покажи параметры дизайн-токенов Vlak для типографики и отступов

## Похожие
- [Front-End Checklist](https://affpapa.org/nevibecode/mcp/front-end-checklist.md) — MCP-сервер · ★ 74559
- [tldraw](https://affpapa.org/nevibecode/mcp/tldraw.md) — MCP-сервер · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/nevibecode/mcp/figma-context-mcp.md) — MCP-сервер · ★ 16062
- [mcp-server-chart](https://affpapa.org/nevibecode/mcp/mcp-server-chart.md) — MCP-сервер · ★ 4402
- [Dembrandt](https://affpapa.org/nevibecode/mcp/dembrandt.md) — MCP-сервер · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP-сервер · ★ 3450

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md