API & MCP Integrationsanleitung

Möchten Sie Ihrem KI-Agenten eine künstlerische Superkraft verleihen?

Stellen Sie sich vor, Ihr KI-Agent kann Ideen sofort in professionelle Grafiken verwandeln — Poster, Infografiken, Visitenkarten, Social-Media-Visuals — alles in Sekunden, direkt in Ihrem Gesprächsfluss.

Genau das macht das Mew Design MCP-Tool.

Warum wir dieses Tool entwickelt haben

OpenClaw und KI-Agenten werden schnell zur Standardschnittstelle für unsere Interaktion mit Software. Aber hier ist das Problem: Die meisten Agenten heute sind nur textbasiert. Sie können brillant schreiben, analysieren und denken — aber sie können Ihnen keine visuell ansprechenden Inhalte zeigen.

Mit der MCP-Integration von Mew Design erhält Ihr Agent die Fähigkeit:

✨ Text in Visuals verwandeln — Besprechungsnotizen in Präsentationsfolien, Daten in Infografiken, Ideen in Poster verwandeln 🎨 Präzise gestalten — Logos, QR-Codes und Fotos genau dort platzieren, wo sie hingehören ⚡ Mit Agent-Geschwindigkeit arbeiten — Professionelle Designs in Sekunden generieren, nicht in Stunden 🔄 Natürlich iterieren — Designs durch Konversation verfeinern, genau wie bei der Arbeit mit einem menschlichen Designer

Egal, ob Sie OpenClaw, OpenCode, Claude Code, GeminiCli, Antigravvity, Codex, Cursor oder Cherry Studio verwenden, diese Anleitung zeigt Ihnen, wie Sie visuelle Kreativität in Ihren KI-Workflows freischalten.

Was ist MCP?

Das Model Context Protocol (MCP) ist ein offener Standard, der es KI-Agenten ermöglicht, sicher mit externen Tools und Diensten zu verbinden. Stellen Sie es sich als universelle Sprache vor, die Ihrem Agenten ermöglicht, mit spezialisierten Tools zu kommunizieren — wie Mew Design für Grafiken, Datenbanken für Daten oder APIs für Echtzeitinformationen.

Mit MCP kann Ihr KI-Agent:

Professionelle Designs direkt aus Gesprächen generieren
Auf externe Datenquellen und Dienste zugreifen
Komplexe Workflows über mehrere Tools hinweg automatisieren
Seine Fähigkeiten über reine Textgenerierung hinaus erweitern

Schritt 1. API-Schlüssel generieren

API-Schlüssel ermöglichen externen Anwendungen den Zugriff auf Mew Design in Ihrem Namen.

Zu den Kontoeinstellungen navigieren
- Gehen Sie zu Kontoeinstellungen
- Scrollen Sie zum Abschnitt “API-Schlüssel”
Neuen API-Schlüssel erstellen
- Klicken Sie auf “API-Schlüssel erstellen”
- Geben Sie ihm einen beschreibenden Namen (z.B. “Claude Desktop”, “Cline Integration”)
- Kopieren Sie den Schlüssel sofort – er wird nicht erneut angezeigt
Ihre Schlüssel verwalten
- Nutzungsstatistiken für jeden Schlüssel anzeigen
- Nicht mehr benötigte Schlüssel widerrufen
- Credits-Verbrauch pro Schlüssel verfolgen

Schritt 2. MCP-Server einrichten

Mew Design bietet einen Cloud-basierten MCP-Dienst, den Sie über HTTP/SSE (Server-Sent Events) direkt verbinden können, ohne lokale Installation.

Für OpenClaw / OpenCode / Antigravvity / Codex

Diese Tools sind leistungsstarke KI-Agenten-Plattformen, die nativ MCP-Integration unterstützen.

Einstellungen öffnen
- Öffnen Sie die Tool-Einstellungen
- Navigieren Sie zur MCP Servers Konfiguration
Neuen MCP-Server hinzufügen
- Wählen Sie den Verbindungstyp HTTP oder SSE (Remote)
- URL: https://api.mew.design/mcp
- Header:
  - Key: X-Api-Key
  - Value: Ihr-API-Schlüssel-hier
Speichern und verbinden
- Speichern Sie die Konfiguration, die Plattform verbindet sich automatisch.

Für Claude Code / GeminiCli

Dies sind leistungsstarke Befehlszeilentools (CLI), die über Konfigurationsdateien verwaltet werden.

Konfiguration bearbeiten
- Suchen Sie die Konfigurationsdatei (normalerweise ~/.claude/config.json oder ~/.gemini/config.json)

Server-Konfiguration hinzufügen

{
  "mcpServers": {
    "mew-design": {
      "url": "https://api.mew.design/mcp",
      "headers": {
        "X-Api-Key": "Ihr-API-Schlüssel-hier"
      }
    }
  }
}

Tool neu starten
- Führen Sie den CLI-Befehl erneut aus, um die Änderungen zu übernehmen.

Für Cursor

Cursor ist ein KI-gestützter Code-Editor mit integrierter MCP-Unterstützung.

Cursor-Einstellungen öffnen
- Gehen Sie zu Settings → Features → MCP
HTTP-Server hinzufügen
- Klicken Sie auf “Add New MCP Server”
- Wählen Sie Typ: SSE (oder HTTP)
- URL: https://api.mew.design/mcp
API-Schlüssel konfigurieren
- Wenn die Cursor-Benutzeroberfläche noch keine Header-Konfiguration unterstützt, warten Sie bitte auf zukünftige Updates.

Für Cherry Studio

Cherry Studio ist eine vielseitige KI-Workbench, die verschiedene Modelle und Tools unterstützt.

Einstellungen öffnen
- Klicken Sie auf das Einstellungssymbol unten links
- Wählen Sie den Tab Tools oder Plugins
MCP-Tool hinzufügen
- Klicken Sie auf ”+” um ein neues Tool hinzuzufügen
- Wählen Sie den Typ MCP
- URL: https://api.mew.design/mcp
- Header: {"X-Api-Key": "Ihr-API-Schlüssel-hier"}
Speichern
- Speichern und aktivieren Sie das Tool.

Die meisten MCP-kompatiblen Tools unterstützen HTTP/SSE-Verbindungen. Verwenden Sie einfach folgende Details:

Server-URL: https://api.mew.design/mcp
Header: X-Api-Key: Ihr-API-Schlüssel-hier

Schritt 3. Design-Tool verwenden

Nach der Verbindung kann Ihr KI-Assistent Designs mit natürlicher Sprache generieren:

Beispiel-Prompts

Basis-Designgenerierung:

Erstelle ein Muttertags-Werbeposter für den Blumenladen Fleurish Co.,
mit 20% Rabatt-Angebot, Website https://fleurish.com,
Tel. 057 xxxx xx, Adresse: Lexington Ave, New York, NY 100xx

Mit Stilreferenz:

Generiere eine minimalistische Visitenkarte mit moderner Typografie.
Verwende die Farbpalette von [Bild-URL] als Referenz.

Mit Assets:

Entwirf einen Instagram-Post für unsere neue Produkteinführung.
Füge unser Logo [Logo-URL] und Produktfoto [Produkt-URL] hinzu.
Verwende lebendige Farben und fette Typografie.

Verfügbare Parameter

Das MCP-Tool unterstützt folgende Parameter:

Parameter	Typ	Beschreibung	Standard
`userQuery`	string	Vollständige Designanforderung (erforderlich)	-
`designConcept`	string	Visuelle Stilrichtung (optional)	-
`referenceImage`	object	Stilreferenz mit URL und Tag (optional)	-
`width`	number	Designbreite in Pixeln (1-5000)	1080
`height`	number	Designhöhe (-1 für auto-adaptiv, 100-5000)	-1
`assetImages`	array	Zu integrierende Assets (Logos, QR-Codes)	-

Schritt 4. Best Practices

Credits-Verwaltung

Nutzung überwachen: Überprüfen Sie die API-Schlüssel-Nutzung in den Kontoeinstellungen
Limits setzen: Jede Designgenerierung kostet 4 Credits
Prompts optimieren: Klare, spezifische Prompts reduzieren Iterationen

Tipps zum Schreiben von Prompts

Seien Sie spezifisch: Fügen Sie alle Textinhalte, Layout-Anforderungen und Stilpräferenzen hinzu
Kontext bereitstellen: Erwähnen Sie den Designzweck (Poster, Flyer, Social Media)
Echte URLs verwenden: Geben Sie immer gültige Bild-URLs für Assets und Referenzen an
Schrittweise iterieren: Beginnen Sie einfach, verfeinern Sie dann mit Folge-Prompts

Sicherheits-Best-Practices

Schlüssel regelmäßig rotieren: Generieren Sie regelmäßig neue Schlüssel
Separate Schlüssel verwenden: Verschiedene Schlüssel für verschiedene Anwendungen
Ungenutzte Schlüssel widerrufen: Entfernen Sie nicht mehr benötigte Schlüssel
Aktivität überwachen: Prüfen Sie auf unerwartete Nutzungsmuster

Fehlerbehebung

Verbindungsprobleme

Problem: MCP-Server verbindet sich nicht

Lösungen:

Überprüfen Sie, ob der API-Schlüssel korrekt und aktiv ist
Prüfen Sie die claude_desktop_config.json Syntax (gültiges JSON)
Stellen Sie sicher, dass absolute Pfade verwendet werden (nicht relativ)
Starten Sie Claude Desktop nach Konfigurationsänderungen neu
Überprüfen Sie Claude Desktop-Logs auf Fehlermeldungen

Generierungsfehler

Problem: Designgenerierung schlägt fehl oder läuft in Timeout

Lösungen:

Vereinfachen Sie Ihren Prompt (Komplexität reduzieren)
Prüfen Sie, ob Bild-URLs zugänglich sind
Überprüfen Sie, ob Sie genügend Credits haben
Versuchen Sie kleinere Abmessungen bei fester Höhe
Warten Sie 2 Minuten auf Timeout (komplexe Designs brauchen Zeit)

Ungültige URLs

Problem: “Ungültige URL”-Fehler für Assets

Lösungen:

Stellen Sie sicher, dass URLs öffentlich zugänglich sind
Verwenden Sie direkte Bild-URLs (keine Webseiten-URLs)
Überprüfen Sie, ob URLs Bildinhalte zurückgeben (PNG, JPG, etc.)
Verwenden Sie niemals Platzhalter-URLs wie “placeholder.jpg”

API-Referenz

Für Entwickler, die benutzerdefinierte Integrationen erstellen, siehe unsere API-Dokumentation:

Basis-URL: https://api.mew.design
Endpunkt: /mcp
Authentifizierung: x-api-key Header
Rate Limits: 60 Anfragen pro Minute
Timeout: 120 Sekunden pro Anfrage

Beispiel-API-Aufruf

curl -X POST https://api.mew.design/mcp \
  -H "x-api-key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "userQuery": "Erstelle eine moderne Visitenkarte",
    "width": 1080,
    "height": -1
  }'

Antwortformat

Erfolgreiche Antwort (200 OK):

{
  "success": true,
  "designUrl": "https://cdn.mew.design/designs/abc123.png",
  "message": "Design erfolgreich generiert."
}

Fehlerantwort (4xx/5xx):

{
  "success": false,
  "message": "Fehlerbeschreibung"
}

API & MCP Integrationsanleitung

Möchten Sie Ihrem KI-Agenten eine künstlerische Superkraft verleihen?

Warum wir dieses Tool entwickelt haben

Was ist MCP?

Schritt 1. API-Schlüssel generieren

Schritt 2. MCP-Server einrichten

Für OpenClaw / OpenCode / Antigravvity / Codex

Für Claude Code / GeminiCli

Für Cursor

Für Cherry Studio

Schritt 3. Design-Tool verwenden

Beispiel-Prompts

Verfügbare Parameter

Schritt 4. Best Practices

Credits-Verwaltung

Tipps zum Schreiben von Prompts

Sicherheits-Best-Practices

Fehlerbehebung

Verbindungsprobleme

Generierungsfehler

Ungültige URLs

API-Referenz

Beispiel-API-Aufruf

Antwortformat

Ressourcen