Mozaic MCP Server

npm version npm downloads License: MIT Documentation

Автономные навыки для Claude Code и MCP-сервер для Mozaic Design System от ADEO.

📚 Документация • 🎮 MCP Playground

Обзор

Этот пакет предоставляет два взаимодополняющих инструмента для работы с системой дизайна Mozaic в ИИ-ассистентах:

🤖 Навыки Claude Code — 7 интерактивных навыков для пошаговой сборки компонентов и использования дизайн-токенов
🔌 MCP-сервер — сервер протокола Model Context Protocol с 17 инструментами для программного доступа к ресурсам Mozaic

Что включено

Тип ресурса	Количество	Описание
Дизайн-токены	586	Цвета, типографика, отступы, тени, границы, брейкпоинты
Компоненты	131+	Vue 3, React, Web Components и макросы Freemarker с полной документацией
Иконки	1,473	SVG-иконки в 15 категориях
CSS-утилиты	6	Flexy grid, Container, Margin, Padding, Ratio, Scroll
Документация	281	Руководства по использованию и лучшие практики с поиском
Инструменты MCP	17	Программный доступ ко всем ресурсам
Навыки Claude	7	Интерактивные рабочие процессы для Vue, React, Web Components, Freemarker и универсального использования

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

Интерактивная установка (рекомендуется)

npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools

Используйте клавиши со стрелками и пробел для выбора компонентов, затем нажмите Enter для установки.

Установка одной командой

# Install everything (skills + MCP server)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools all

# Install only skills (for Claude Code)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools skills

# Install only MCP server (for Claude Desktop)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools mcp

Проверка статуса установки

npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools list

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

Протестируйте инструменты MCP прямо в браузере без установки:

🎮 Открыть MCP Playground

Playground позволяет:

Интерактивно тестировать все 11 инструментов MCP
Просматривать компоненты, токены и иконки
Генерировать фрагменты кода
Искать по документации

Навыки Claude Code

6 автономных навыков, предоставляющих интерактивные рабочие процессы для сборки с использованием Mozaic.

Доступные навыки

Навык	Описание	Вариант использования
mozaic-vue-builder	Интерактивный генератор компонентов Vue 3	Создание Vue-приложений с Mozaic
mozaic-react-builder	Интерактивный генератор компонентов React/TSX	Создание React-приложений с Mozaic
mozaic-webcomponents-builder	Интерактивный генератор Web Components	Создание фреймворк-независимых приложений с нативными веб-компонентами
mozaic-freemarker-builder	Интерактивный генератор макросов Freemarker	Создание серверных шаблонов на Freemarker
mozaic-design-tokens	Эксперт по дизайн-токенам и стилям	Доступ к цветам, типографике, отступам
mozaic-css-utilities	CSS-утилиты и макеты	Создание адаптивных макетов
mozaic-icons	Поиск и интеграция иконок	Поиск и использование иконок Mozaic

Как работают навыки

Навыки активируются в Claude Code автоматически в зависимости от контекста, либо вы можете вызвать их вручную:

User: "I need a login form with Mozaic"

Claude Code автоматически активирует подходящий навык (генератор Vue или React) и проведет вас через:

Выбор компонента
Настройку пропсов
Генерацию кода
Инструкции по установке

Подробную документацию см. в SKILLS.md.

Инструменты MCP-сервера

14 программных инструментов для доступа к ресурсам Mozaic через протокол Model Context Protocol.

Доступные инструменты

Инструмент	Категория	Описание
`get_design_tokens`	Токены	Запрос токенов по категории (цвета, типографика, отступы и т.д.)
`get_component_info`	Компоненты	Получение пропсов, слотов, событий и документации компонента
`list_components`	Компоненты	Список компонентов по категории или фреймворку
`generate_vue_component`	Генерация кода	Генерация кода Vue 3 SFC с пропсами
`generate_react_component`	Генерация кода	Генерация кода React/TSX с TypeScript
`generate_webcomponent`	Генерация кода	Генерация HTML нативного Web Component с импортами
`get_webcomponent_info`	Web Components	Получение атрибутов, слотов, событий, CSS-свойств
`list_webcomponents`	Web Components	Список веб-компонентов по категории
`generate_freemarker`	Генерация кода	Генерация кода макроса Freemarker с конфигурацией
`get_freemarker_info`	Freemarker	Получение опций конфигурации макроса и его использования
`list_freemarker`	Freemarker	Список макросов Freemarker по категории
`search_documentation`	Документация	Полнотекстовый поиск по 281 странице документации
`get_css_utility`	CSS	Получение CSS-утилит и примеров
`list_css_utilities`	CSS	Список доступных CSS-утилит
`search_icons`	Иконки	Поиск по 1473 иконкам по имени, типу или категории
`get_icon`	Иконки	Получение SVG иконки и кода для фреймворка
`get_install_info`	Установка	Получение команд установки npm/yarn/pnpm

Конфигурация

Добавьте в настройки Claude Code или Claude Desktop:

Для Claude Code (в .claude/settings.json):

{
  "mcpServers": {
    "mozaic": {
      "command": "npx",
      "args": ["-y", "mozaic-mcp-server"]
    }
  }
}

Для Claude Desktop (в ~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "mozaic": {
      "command": "npx",
      "args": ["-y", "mozaic-mcp-server"]
    }
  }
}

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

Использование навыков в Claude Code

Навыки активируются автоматически на основе вашего запроса:

You: "I need a responsive grid with 3 columns"
Claude: [activates mozaic-css-utilities skill]
        Here's the Flexy grid solution...

You: "Add a shopping cart icon"
Claude: [activates mozaic-icons skill]
        I found these cart icons...

Программное использование инструментов MCP

После настройки Claude может использовать инструменты MCP напрямую:

You: "What design tokens are available?"
Claude: [calls get_design_tokens tool]
        Found 586 tokens across 7 categories...

You: "Generate a React button component"
Claude: [calls get_component_info, then generate_react_component]
        Here's your Button component with TypeScript...

CLI-команды

CLI adeo-mozaic-install-tools предоставляет несколько команд:

# Interactive mode (default)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools

# Install all components
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools all

# Install skills only
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools skills

# Install MCP server only
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools mcp

# Check status
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools list

# Remove components
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools remove skills
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools remove mcp
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools remove all

# Show help
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools --help

Архитектура

┌─────────────────────────────────────┐
│   Claude Code / Claude Desktop      │
│                                     │
│   ┌─────────────┐  ┌─────────────┐ │
│   │   Skills    │  │ MCP Server  │ │
│   │  (5 total)  │  │ (11 tools)  │ │
│   └─────────────┘  └─────────────┘ │
│          │                │         │
└──────────┼────────────────┼─────────┘
           │                │
           ▼                ▼
    ┌──────────────────────────┐
    │  Shell Scripts (14)      │
    │  ↓ sqlite3 queries       │
    └──────────────────────────┘
               ▼
    ┌──────────────────────────┐
    │  SQLite Database         │
    │  ~/.claude/mozaic.db     │
    │                          │
    │  • 586 tokens            │
    │  • 91 components         │
    │  • 1,473 icons           │
    │  • 281 docs              │
    └──────────────────────────┘

Расположение файлов

После установки:

~/.claude/
├── mozaic.db                      # SQLite database (all Mozaic data)
├── skills/                        # Claude Code skills
│   ├── mozaic-vue-builder/
│   ├── mozaic-react-builder/
│   ├── mozaic-design-tokens/
│   ├── mozaic-css-utilities/
│   └── mozaic-icons/
└── (Claude Code settings.json)    # MCP server config

~/Library/Application Support/Claude/
└── claude_desktop_config.json     # Claude Desktop MCP config

Разработка

Предварительные требования

Node.js ≥25.2.0
pnpm (рекомендуется)

Настройка

# Clone the repository
git clone https://github.com/MerzoukeMansouri/adeo-mozaic-mcp.git
cd mozaic-mcp-server

# Install dependencies
pnpm install

# Build the project (compiles TypeScript + builds database)
pnpm build

# Run tests
pnpm test

# Start MCP server in debug mode
pnpm start:debug

Структура проекта

mozaic-mcp-server/
├── src/                    # TypeScript source code
│   ├── index.ts           # MCP server entry point
│   ├── tools/             # MCP tool implementations
│   └── database/          # Database utilities
├── skills/                # Claude Code skills
│   ├── mozaic-vue-builder/
│   │   ├── skill.md       # Skill instructions
│   │   └── scripts/       # Shell scripts (4)
│   └── ...                # Other skills
├── scripts/               # Build and utility scripts
│   ├── build-index.ts     # Database builder
│   └── generate-docs.ts   # Documentation generator
├── data/                  # Generated database
│   └── mozaic.db
├── repos/                 # Mozaic Design System repositories (git submodules)
│   ├── mozaic-design-system/
│   ├── mozaic-vue/
│   └── mozaic-react/
├── bin/                   # CLI entry points
│   └── install.js         # Installation CLI
└── website/               # Documentation website

Сборка базы данных

База данных SQLite собирается из репозиториев Mozaic Design System:

# Update submodules
git submodule update --init --recursive

# Build database
pnpm build

Это индексирует:

Дизайн-токены из mozaic-design-system/packages/tokens
Компоненты из mozaic-vue и mozaic-react
Иконки из mozaic-design-system/packages/icons
Документацию из всех репозиториев

Вклад в проект

Мы приветствуем ваш вклад! Пожалуйста, следуйте этим правилам:

Сделайте форк репозитория
Создайте ветку для функции (git checkout -b feature/amazing-feature)
Зафиксируйте изменения, используя Conventional Commits
Отправьте изменения в ветку (git push origin feature/amazing-feature)
Откройте Pull Request

Соглашение о коммитах

Мы используем семантическое версионирование с обычными коммитами:

feat: — Новая функция (минорное обновление версии)
fix: — Исправление ошибки (патч-обновление версии)
feat!: или BREAKING CHANGE: — Критическое изменение (мажорное обновление версии)
chore:, docs:, style:, refactor:, test: — Без обновления версии

Ресурсы

Документация и инструменты

📚 Документация: https://merzoukemansouri.github.io/adeo-mozaic-mcp/
🎮 MCP Playground: https://merzoukemansouri.github.io/adeo-mozaic-mcp/#/playground
GitHub: https://github.com/MerzoukeMansouri/adeo-mozaic-mcp
npm: https://www.npmjs.com/package/mozaic-mcp-server

Связанные ресурсы

Mozaic Design System: https://mozaic.adeo.cloud/
MCP Protocol: https://modelcontextprotocol.io/
Claude Code: https://code.claude.com/

Лицензия

Лицензия MIT — подробности см. в файле LICENSE.

Поддержка

По вопросам или проблемам:

📚 Прочитайте онлайн-документацию
🎮 Попробуйте MCP playground
🐛 Откройте issue на GitHub
📖 Проверьте документацию по навыкам
🎨 Ознакомьтесь с документацией Mozaic Design System

Создано с ❤️ для сообщества ADEO

Mozaic Design System поддерживается ADEO

Mozaic MCP Server

Mozaic MCP Server

Обзор

Что включено

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

Интерактивная установка (рекомендуется)

Установка одной командой

Проверка статуса установки

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

Навыки Claude Code

Доступные навыки

Как работают навыки

Инструменты MCP-сервера

Доступные инструменты

Конфигурация

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

Использование навыков в Claude Code

Программное использование инструментов MCP

CLI-команды

Архитектура

Расположение файлов

Разработка

Предварительные требования

Настройка

Структура проекта

Сборка базы данных

Вклад в проект

Соглашение о коммитах

Ресурсы

Документация и инструменты

Связанные ресурсы

Лицензия

Поддержка

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API