Mozaic MCP Server

npm version npm downloads License: MIT Documentation

Eigenständige Claude Code Skills und MCP-Server für das Mozaic Design System von ADEO.

📚 Dokumentation • 🎮 MCP Playground

Übersicht

Dieses Paket bietet zwei ergänzende Tools für die Arbeit mit dem Mozaic Design System in KI-Assistenten:

🤖 Claude Code Skills - 7 interaktive Skills für die geführte Komponentenentwicklung und die Nutzung von Design-Tokens
🔌 MCP Server - Model Context Protocol Server mit 17 Tools für den programmatischen Zugriff auf Mozaic-Ressourcen

Was ist enthalten

Ressourcentyp	Anzahl	Beschreibung
Design Tokens	586	Farben, Typografie, Abstände, Schatten, Rahmen, Breakpoints
Komponenten	131+	Vue 3, React, Web Components und Freemarker-Makros mit vollständiger Dokumentation
Icons	1.473	SVG-Icons in 15 Kategorien
CSS Utilities	6	Flexy Grid, Container, Margin, Padding, Ratio, Scroll
Dokumentation	281	Durchsuchbare Anleitungen und Best Practices
MCP Tools	17	Programmatischer Zugriff auf alle Ressourcen
Claude Skills	7	Interaktive Workflows für Vue, React, Web Components, Freemarker und agnostische Nutzung

Schnellstart

Interaktive Installation (Empfohlen)

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

Verwenden Sie die Pfeiltasten und die Leertaste, um Komponenten auszuwählen, und drücken Sie dann die Eingabetaste zur Installation.

Installation mit einem Befehl

# 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

Installationsstatus prüfen

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

Vor der Installation ausprobieren

Testen Sie die MCP-Tools direkt in Ihrem Browser ohne Installation:

🎮 MCP Playground öffnen

Der Playground ermöglicht Ihnen:

Alle 11 MCP-Tools interaktiv zu testen
Komponenten, Tokens und Icons zu durchsuchen
Code-Snippets zu generieren
Die Dokumentation zu durchsuchen

Claude Code Skills

6 eigenständige Skills, die interaktive Workflows für die Entwicklung mit Mozaic bieten.

Verfügbare Skills

Skill	Beschreibung	Anwendungsfall
mozaic-vue-builder	Interaktiver Vue 3 Komponentengenerator	Erstellen von Vue-Apps mit Mozaic
mozaic-react-builder	Interaktiver React/TSX Komponentengenerator	Erstellen von React-Apps mit Mozaic
mozaic-webcomponents-builder	Interaktiver Web Components Generator	Erstellen framework-agnostischer Apps mit nativen Web Components
mozaic-freemarker-builder	Interaktiver Freemarker-Makro-Generator	Erstellen serverseitiger Templates mit Freemarker
mozaic-design-tokens	Experte für Design-Tokens und Styling	Zugriff auf Farben, Typografie, Abstände
mozaic-css-utilities	CSS-Utility-Klassen und Layouts	Erstellen responsiver Layouts
mozaic-icons	Icon-Suche und Integration	Finden und Verwenden von Mozaic-Icons

Wie Skills funktionieren

Skills werden in Claude Code basierend auf dem Kontext automatisch aktiviert, oder Sie können sie manuell aufrufen:

User: "I need a login form with Mozaic"

Claude Code aktiviert automatisch den passenden Skill (Vue- oder React-Builder) und führt Sie durch:

Komponentenauswahl
Props-Konfiguration
Code-Generierung
Installationsanweisungen

Siehe SKILLS.md für eine detaillierte Dokumentation.

MCP Server Tools

14 programmatische Tools für den Zugriff auf Mozaic-Ressourcen über das Model Context Protocol.

Verfügbare Tools

Tool	Kategorie	Beschreibung
`get_design_tokens`	Tokens	Tokens nach Kategorie abfragen (Farben, Typografie, Abstände, etc.)
`get_component_info`	Komponenten	Komponenteneigenschaften (Props), Slots, Events und Dokumentation abrufen
`list_components`	Komponenten	Komponenten nach Kategorie oder Framework auflisten
`generate_vue_component`	Code Gen	Vue 3 SFC-Code mit Props generieren
`generate_react_component`	Code Gen	React/TSX-Code mit TypeScript generieren
`generate_webcomponent`	Code Gen	Nativen Web Component HTML mit Imports generieren
`get_webcomponent_info`	Web Components	Attribute, Slots, Events, CSS-Eigenschaften abrufen
`list_webcomponents`	Web Components	Web Components nach Kategorie auflisten
`generate_freemarker`	Code Gen	Freemarker-Makro-Code mit Konfiguration generieren
`get_freemarker_info`	Freemarker	Makro-Konfigurationsoptionen und Verwendung abrufen
`list_freemarker`	Freemarker	Freemarker-Makros nach Kategorie auflisten
`search_documentation`	Docs	Volltextsuche über 281 Dokumentationsseiten
`get_css_utility`	CSS	CSS-Utility-Klassen und Beispiele abrufen
`list_css_utilities`	CSS	Verfügbare CSS-Utilities auflisten
`search_icons`	Icons	1.473 Icons nach Name, Typ oder Kategorie suchen
`get_icon`	Icons	Icon-SVG und Framework-Code abrufen
`get_install_info`	Install	npm/yarn/pnpm Installationsbefehle abrufen

Konfiguration

Fügen Sie dies zu Ihren Claude Code- oder Claude Desktop-Einstellungen hinzu:

Für Claude Code (in .claude/settings.json):

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

Für Claude Desktop (in ~/Library/Application Support/Claude/claude_desktop_config.json):

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

Anwendungsbeispiele

Skills in Claude Code verwenden

Skills aktivieren sich automatisch basierend auf Ihrer Anfrage:

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-Tools programmatisch verwenden

Nach der Konfiguration kann Claude MCP-Tools direkt verwenden:

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-Befehle

Das adeo-mozaic-install-tools CLI bietet mehrere Befehle:

# 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

Architektur

┌─────────────────────────────────────┐
│   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              │
    └──────────────────────────┘

Dateispeicherorte

Nach der Installation:

~/.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

Entwicklung

Voraussetzungen

Node.js ≥25.2.0
pnpm (empfohlen)

Einrichtung

# 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

Projektstruktur

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

Datenbank erstellen

Die SQLite-Datenbank wird aus den Mozaic Design System Repositories erstellt:

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

# Build database
pnpm build

Dies indiziert:

Design-Tokens aus mozaic-design-system/packages/tokens
Komponenten aus mozaic-vue und mozaic-react
Icons aus mozaic-design-system/packages/icons
Dokumentation aus allen Repositories

Mitwirken

Beiträge sind willkommen! Bitte befolgen Sie diese Richtlinien:

Forken Sie das Repository
Erstellen Sie einen Feature-Branch (git checkout -b feature/amazing-feature)
Committen Sie Ihre Änderungen unter Verwendung von Conventional Commits
Pushen Sie auf den Branch (git push origin feature/amazing-feature)
Öffnen Sie einen Pull Request

Commit-Konvention

Wir verwenden semantische Versionierung mit Conventional Commits:

feat: - Neues Feature (Minor-Version-Update)
fix: - Bugfix (Patch-Version-Update)
feat!: oder BREAKING CHANGE: - Breaking Change (Major-Version-Update)
chore:, docs:, style:, refactor:, test: - Kein Versions-Update

Ressourcen

Dokumentation & Tools

📚 Dokumentation: 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

Lizenz

MIT-Lizenz - siehe LICENSE Datei für Details.

Support

Bei Problemen oder Fragen:

📚 Lesen Sie die Online-Dokumentation
🎮 Testen Sie den MCP Playground
🐛 Öffnen Sie ein Issue auf GitHub
📖 Prüfen Sie die Skills-Dokumentation
🎨 Überprüfen Sie die Mozaic Design System Dokumentation

Mit ❤️ für die ADEO-Community entwickelt

Das Mozaic Design System wird von ADEO gepflegt

Mozaic MCP Server

Mozaic MCP Server

Übersicht

Was ist enthalten

Schnellstart

Interaktive Installation (Empfohlen)

Installation mit einem Befehl

Installationsstatus prüfen

Vor der Installation ausprobieren

Claude Code Skills

Verfügbare Skills

Wie Skills funktionieren

MCP Server Tools

Verfügbare Tools

Konfiguration

Anwendungsbeispiele

Skills in Claude Code verwenden

MCP-Tools programmatisch verwenden

CLI-Befehle

Architektur

Dateispeicherorte

Entwicklung

Voraussetzungen

Einrichtung

Projektstruktur

Datenbank erstellen

Mitwirken

Commit-Konvention

Ressourcen

Dokumentation & Tools

Verwandte Ressourcen

Lizenz

Support

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API