App-Maskottchen in Cursor mit dem svgapp MCP generieren

Kurzantwort

Verbinde Cursor mit https://web.svgapp.ai/mcp, füge dein svgapp-MCP-Token als Bearer-Header hinzu, und Cursor kann ein wiederverwendbares Produkt-Maskottchen erstellen, während deine Anwendung erstellt wird. Mit derselben Integration lassen sich konsistente Posen für Onboarding, leere Zustände, Fehler-, Erfolgs- und Dokumentationsseiten sowie Launch-Seiten generieren.

Der MCP-Endpunkt verwendet Streamable HTTP und akzeptiert POST-Anfragen. Eine normale Browser-Anfrage mit GET liefert 405 Method Not Allowed; das ist erwartbar und bestätigt, dass der Endpunkt keine Webseite ist.

svgapp zu Cursor hinzufügen

Erstelle .cursor/mcp.json im Projekt für eine repositoryspezifische Verbindung oder ~/.cursor/mcp.json für eine globale Verbindung:

{
  "mcpServers": {
    "svgapp": {
      "type": "http",
      "url": "https://web.svgapp.ai/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_SVGAPP_MCP_TOKEN"
      }
    }
  }
}

Generiere unter Settings → Integrations → MCP in svgapp ein Token, ersetze den Platzhalter und halte das Token aus Git heraus. Verwende die globale Datei, wenn deine Projektkonfiguration keine Zugangsdaten enthalten soll.

Nachdem du die Datei gespeichert hast:

1. Öffne die Cursor-Einstellungen und wähle Tools & MCP.
2. Vergewissere dich, dass svgapp aktiviert ist.
3. Bestätige den Projektserver, falls Cursor dich dazu auffordert.
4. Bitte Cursor Agent, die svgapp-Tools aufzulisten, bevor etwas generiert wird.

Die Cursor CLI verwendet dieselbe mcp.json-Konfiguration. Du kannst die Verbindung folgendermaßen überprüfen:

cursor-agent mcp list
cursor-agent mcp list-tools svgapp

Lass Cursor das Projekt initialisieren

Das svgapp-MCP speichert visuelle Entscheidungen auf Projektebene in svgapp.conf.json. Diese Datei enthält IDs für den ausgewählten Kunststil, die Farbpalette und das aktive Maskottchen – nicht das MCP-Token.

Starte mit diesem Prompt:

Use the svgapp MCP for this project.

Check the project root for svgapp.conf.json. If it is missing or invalid,
call init_svgapp_config and save the returned configuration there.
Do not store credentials in the file.

Inspect the current UI and summarize the visual style, brand colors, and the
three product moments where a mascot would be most useful. Do not generate yet.

Damit hat Cursor genügend Kontext, um die Assets zu planen, bevor eine Generierung gestartet wird.

Ein wiederverwendbares Maskottchen generieren

Bitte Cursor, eine Figur zu erstellen, die zur gerade bearbeiteten Anwendung gehört:

Read svgapp.conf.json and inspect the app's existing colors and visual language.
If the config has no suitable colorPaletteId, create a palette from the product's
actual brand colors and merge the returned configPatch into svgapp.conf.json.

Then call create_mascot for a friendly geometric guide used in this app's
onboarding and empty states. Keep it readable at small UI sizes, use simple
shapes, avoid text and logos, and match the current interface.

Merge configPatch.activeMascotId into svgapp.conf.json. Poll
get_generation_status until the mascot is completed, then report the stable URL.

Posen für die von Cursor erstellten Screens generieren

Das Basismaskottchen legt die Identität fest. Für Produktscreens wird normalerweise eine bestimmte Pose benötigt. Bitte Cursor, die Komponente zu untersuchen und das Asset passend zur Aufgabe des Screens zu generieren:

Read svgapp.conf.json and use activeMascotId.
Generate three consistent mascot poses with generate_mascot_pose:

1. Empty state: calmly points toward the primary create button.
2. Recoverable error: acknowledges the problem and guides attention to Retry.
3. Success: confirms completion without overpowering the next action.

Poll each generation with get_generation_status. If an asset needs to sit on
arbitrary card backgrounds, remove its background and poll that generation too.
Then add the completed stable URLs to the appropriate components with useful alt text.

Prüfe die generierten Assets, bevor du dem Agent erlaubst, die produktive UI zu ändern. Maskottchen sollten die tatsächlichen Bedienelemente unterstützen und nicht Beschriftungen, Validierung oder barrierefreie Statustexte ersetzen.

Vorhandene Arbeit wiederherstellen und wiederverwenden

Wenn das Projekt eine ID verloren hat, bitte Cursor, list_recent_generations oder list_mascots zu verwenden. Sobald die richtige Maskottchen-ID vorliegt, kann Cursor activeMascotId aktualisieren und weiterhin konsistente Posen generieren, statt eine zweite Figur zu erstellen.

Für ein eigenständiges Hero-Element oder Diagramm, das keine Kontinuität des Maskottchens benötigt, verwende generate_composition. Für Bewegungen auf Basis eines vorhandenen Maskottchens verwende create_mascot_animation. Jede Erstellung läuft asynchron ab. Bewahre daher die zurückgegebene Generierungs-ID auf und verwende get_generation_status, bis der Vorgang abgeschlossen ist.

Fehlerbehebung

Cursor zeigt einen Authentifizierungsfehler an

Vergewissere dich, dass die URL genau https://web.svgapp.ai/mcp lautet und der Header mit Bearer beginnt. Aktualisiere ein abgelaufenes Token in mcp.json und starte den Server anschließend neu oder aktiviere ihn unter Tools & MCP erneut.

Der Server verbindet sich, aber es werden keine Tools angezeigt

Genehmige MCP-Server auf Projektebene, starte Cursor nach Änderungen an der JSON-Datei neu und führe cursor-agent mcp list-tools svgapp aus, wenn du die Cursor CLI verwendest.

Cursor erstellt uneinheitliche Figuren

Achte darauf, dass der Agent vor jeder Generierung svgapp.conf.json liest und activeMascotId zusammen mit generate_mascot_pose verwendet. Ein erneuter Aufruf von create_mascot erstellt eine neue Figur statt einer neuen Pose.

Verwandte Einrichtungsanleitungen

• svgapp MCP mit Claude Code verwenden
• svgapp MCP mit Codex verwenden
• Ein wiederverwendbares Entwicklermaskottchen-System planen