@sberbusiness/triplex-next-mcp-server

MCP-сервер для дизайн-системы Triplex. Предоставляет AI-агентам документацию компонентов, дизайн-токены и примеры использования через Model Context Protocol.

Быстрый старт

Подключение к Claude Code

Добавьте в .mcp.json вашего проекта:

{
  "mcpServers": {
    "triplex": {
      "command": "npx",
      "args": ["@sberbusiness/triplex-next-mcp-server"]
    }
  }
}

Подключение к Cursor

Добавьте в .cursor/mcp.json:

{
  "mcpServers": {
    "triplex": {
      "command": "npx",
      "args": ["@sberbusiness/triplex-next-mcp-server"]
    }
  }
}

После подключения AI-агент получает доступ к документации всех компонентов Triplex без необходимости клонировать репозиторий дизайн-системы.

Доступные tools

| Tool | Описание | | ----------------------------------- | ------------------------------------------------------------------------------------------------------------- | | list_components | Список всех компонентов с кратким описанием и флагом ai_ready | | get_component(name) | Полная документация компонента: props, токены, примеры, ограничения | | get_tokens(component?) | Дизайн-токены — все или для конкретного компонента | | list_icons(query?, size?, limit?) | Иконки из @sberbusiness/icons-next с фильтрами по подстроке в имени и размеру (защита от галлюцинаций имён) |

Флаг ai_ready: true означает, что у компонента есть полноценная AI-документация (*-AI.md с frontmatter, секциями и примерами). Для остальных компонентов сервер возвращает минимальный fallback — имя и путь к stories.

Примеры использования

После подключения сервера AI-агент может отвечать на запросы вроде:

• «Какие props есть у компонента Button?»
• «Покажи пример использования Alert с типом error»
• «Какие дизайн-токены использует Card?»
• «Какой компонент подойдёт для отображения уведомлений?»
• «Найди иконку со стрелкой размером 16px»

Разработка

# Установка зависимостей
npm install

# Сборка
npm run build

# Сборка в watch-режиме
npm run dev

# Запуск сервера
npm run start

# Отладка через MCP Inspector
npm run inspect

# Обновить bundle/ из последнего релиза triplex-next
npm run fetch-bundle

# Обновить bundle/icons.json из @sberbusiness/icons-next
npm run fetch-icons

# Проверка типов
npm run typecheck

# Тесты
npm run test

Источник данных

Сервер читает документацию из дерева bundle/ (авто-генерируется, руками не правим):

bundle/
  manifest.json       — schemaVersion, triplexVersion, списки компонентов,
                        гайдов и release notes
  components/         — *-AI.md по AI-ready компонентам
  guides/             — docs/ai/*.md (context, codestyle, tests, …)
  release-notes/      — stories/release-notes/v1/*.mdx
  icons.json          — список иконок @sberbusiness/icons-next для list_icons

Дерево генерируется командой npm run fetch-bundle: она скачивает mcp-data.json c последнего GitHub Release triplex-next (или из локального файла через --file <path>) и раскладывает содержимое в поддиректории выше. Транзиентный mcp-data.json удаляется после раскладки.

В triplex-next bundle собирается скриптом scripts/generateMcpData.ts (npm-команда generateMcpData) и автоматически прикладывается к релиз-ассетам через .github/workflows/release.yml.

bundle/icons.json генерируется отдельно — командой npm run fetch-icons, которая тянет @sberbusiness/icons-next с jsdelivr и собирает список имён экспортов с размерами.

Лицензия

MIT