KI Integration

Das Mate Design System lässt sich nahtlos in moderne KI-gestützte Entwicklungsworkflows integrieren. Über den MCP Server (Model Context Protocol) stehen KI-Assistenten alle Informationen des Design Systems – Dokumentationen, Komponentenspezifikationen, Designs und Codebeispiele – direkt zur Verfügung.

MCP

Was ist MCP?

MCP (Model Context Protocol) ist ein offenes Protokoll, das KI-Assistenten (wie Claude, Copilot oder Cursor) mit externen Datenquellen und Werkzeugen verbindet. Es ermöglicht einer KI, in Echtzeit auf strukturierte Informationen zuzugreifen, anstatt ausschließlich auf ihr Trainings-Wissen angewiesen zu sein.

Warum ist das relevant? Das Mate Design System ist ein AKDB-internes, nicht öffentlich im Internet verfügbares Design System. Ohne MCP kennt eine KI weder die Komponenten noch deren genaue APIs, Naming-Konventionen oder aktuellen Stände. Mit dem MCP Server kann eine KI:

• korrekte Komponentennamen und Importpfade liefern,
• vollständige Codebeispiele für alle Frameworks (Web Components, Vue, Flow/Java) generieren,
• Migrationsfragen zwischen Versionen beantworten,
• Design-Token-Werte nachschlagen,
• UX-Patterns und Seitentypen des Design Systems erklären.

---

MCP im Mate Design System

Der MCP Server des Mate Design Systems stellt alle Informationen des Design Systems für KI-Tools bereit. Er liest die Quelldaten live aus dem AKDB GitLab (akdb/ds) und liefert sie als strukturierte Tool-Antworten.

Endpoint:

https://mcp.mate-ds.de/mate-mcp

Bereitgestellte Informationen:

Tool	Inhalt
Primer	Grundlagen zu Mate DS, Vaadin, Frameworks, Theming
Komponenten	Vollständige Dokumentation inkl. Codebeispiele je Framework
Foundations	Farben, Typografie, Spacing, Icons, Design Tokens
Patterns & Pagetypes	UX-Muster, Seitenstrukturen
Changelogs	Versionsänderungen und Migrationshinweise
Themes	CSS-Architektur und Token-Struktur

Unterstützte Frameworks:

• web-components – Framework-agnostisch (React, Angular, Plain HTML, …)
• vue-components – Vue 3
• flow-components – Java / Vaadin Flow

---

Nutzung

Integriere den MCP Server in dein KI-Tool, indem du ihn als MCP-Server registrierst. Die Konfiguration unterscheidet sich je nach Tool.

Claude (claude.ai / Claude Desktop)

Öffne die Claude Desktop Einstellungen (Settings → Developer → Edit Config) und ergänze die claude_desktop_config.json:

{
  "mcpServers": {
    "mate-design-system": {
      "type": "http",
      "url": "https://mcp.mate-ds.de/mate-mcp"
    }
  }
}

Nach einem Neustart von Claude Desktop steht der Mate MCP Server in jedem Gespräch zur Verfügung.

---

Cursor

Erstelle oder ergänze die Datei .cursor/mcp.json im Projektverzeichnis (projektlokale Konfiguration) oder ~/.cursor/mcp.json (global):

{
  "mcpServers": {
    "mate-design-system": {
      "type": "http",
      "url": "https://mcp.mate-ds.de/mate-mcp"
    }
  }
}

Alternativ über die Cursor-Einstellungen: Cursor Settings → Features → MCP → Add new global MCP server.

---

GitHub Copilot (VS Code)

Erstelle die Datei .vscode/mcp.json im Projektverzeichnis:

{
  "servers": {
    "mate-design-system": {
      "type": "http",
      "url": "https://mcp.mate-ds.de/mate-mcp"
    }
  }
}

Aktiviere MCP in den VS Code Einstellungen unter GitHub Copilot → MCP.

---

OpenAI Codex CLI

Füge den Server zur Codex-Konfiguration hinzu (~/.codex/config.toml oder codex.yaml):

mcpServers:
  mate-design-system:
    type: http
    url: https://mcp.mate-ds.de/mate-mcp

---

Gemini (Google AI Studio / Gemini CLI)

Registriere den Server in der Konfigurationsdatei des jeweiligen Gemini-Clients. Für den Gemini CLI:

{
  "mcpServers": {
    "mate-design-system": {
      "type": "http",
      "url": "https://mcp.mate-ds.de/mate-mcp"
    }
  }
}

---

Cline / andere MCP-kompatible Clients

Für alle MCP-kompatiblen Clients (z. B. Cline, Windsurf, Continue.dev, Aider, OpenCode) gilt dieselbe Konfigurationsstruktur:

{
  "mcpServers": {
    "mate-design-system": {
      "type": "http",
      "url": "https://mcp.mate-ds.de/mate-mcp"
    }
  }
}

Schau in die Dokumentation deines jeweiligen Tools, wo die MCP-Konfigurationsdatei abgelegt wird (typischerweise .mcp.json, mcp.json oder eine settings.json des Tools).

---

Lokal generierte Agent Skills (ohne laufenden MCP Server)

Für Entwickler, die GitLab-Lesezugriff auf akdb/ds haben, kann der MCP Server auch als lokales Agent Skill repliziert werden – d. h. alle Informationen werden direkt über git/curl abgerufen, ohne dass der MCP Server erreichbar sein muss.

Frage deinen KI-Assistenten (der den Mate MCP bereits eingebunden hat):

„Generiere mir ein lokales Agent Skill für Mate DS für [dein Tool] im Scope [project/user]."

Der Assistent führt dann die Einrichtung automatisch durch.

---

Empfohlene Nutzung

Sobald der MCP Server konfiguriert ist, kannst du deinen KI-Assistenten direkt nach Mate DS fragen:

• „Wie binde ich den Mate Button ein (Vue)?"
• „Welche Design Tokens gibt es für Abstände?"
• „Zeig mir ein Beispiel für eine Listenseite nach Mate DS."
• „Was hat sich zwischen Mate v25.0.0-beta.14 und beta.15 geändert?"

Der Assistent ruft die jeweils aktuellen Informationen aus dem MCP Server ab und liefert korrekte, versionsgenaue Antworten – ohne Raten oder veraltete Trainingsdaten.