Maskottchen in Claude Code mit dem svgapp MCP generieren

Kurzantwort

Claude Code kann svgapp als Remote-MCP-Server nutzen, um visuelle Assets zu generieren, während es in deinem Repository arbeitet. Verbinde https://web.svgapp.ai/mcp mit deinem Bearer-Token und bitte Claude anschließend, svgapp.conf.json zu initialisieren, ein wiederverwendbares Maskottchen zu erstellen, bildschirmspezifische Posen zu generieren und die fertigen Assets in deine App zu integrieren.

Der Endpunkt verwendet Streamable HTTP. Ein Browser GET gibt 405 Method Not Allowed zurück, weil MCP-Clients über authentifizierte POST-Anfragen mit ihm kommunizieren.

Claude Code mit svgapp verbinden

Generiere in svgapp unter Settings → Integrations → MCP ein MCP-Token und führe anschließend Folgendes aus:

claude mcp add --transport http svgapp https://web.svgapp.ai/mcp \
  --header "Authorization: Bearer YOUR_SVGAPP_MCP_TOKEN"

Der Standardbereich ist auf das aktuelle Projekt beschränkt. Verwende --scope user, wenn die Verbindung projektübergreifend verfügbar sein soll. Für eine gemeinsame Projektkonfiguration verwendest du --scope project; speichere das eigentliche Token in einer Umgebungsvariable, statt es zu committen.

Überprüfe die Verbindung:

claude mcp list
claude mcp get svgapp

In Claude Code öffnet /mcp den Serverstatus und die Authentifizierungseinstellungen.

Visuelle Konfiguration initialisieren

Starte Claude Code im Repository und gib ihm zunächst eine klar abgegrenzte erste Aufgabe:

Use the svgapp MCP. Before generating anything, check the project root for
svgapp.conf.json and read it when present. If it is missing or invalid, call
init_svgapp_config and save the returned config in the project root.

Inspect the application's colors, typography, border radius, and illustration
style. Recommend a mascot role and three useful UI placements. Do not generate yet.

Die Konfigurationsdatei sollte wiederverwendbare visuelle IDs wie artStyleId, colorPaletteId und activeMascotId enthalten. Das MCP-Token darf niemals darin enthalten sein.

Das Maskottchen im Terminal erstellen

Sobald die Richtung feststeht, bitte Claude, daraus eine wiederverwendbare Figur zu machen:

Read svgapp.conf.json. Create a color palette from the existing product theme if
the config does not already have a suitable colorPaletteId, then merge the
returned configPatch.

Call create_mascot for an original product guide that fits the app's current UI.
It should use simple geometric forms, remain readable at 64px, have no text or
logos, and work on light and dark surfaces.

Merge configPatch.activeMascotId into svgapp.conf.json. Poll
get_generation_status until completed, then show me the stable asset URL before
editing any component.

Claude kann das gespeicherte Maskottchen jetzt wiederverwenden, anstatt in jeder Sitzung eine andere Figur zu erzeugen.

Posen generieren und integrieren

Verwende generate_mascot_pose, wenn dieselbe Figur einen neuen Zustand vermitteln soll:

Read svgapp.conf.json and use activeMascotId with generate_mascot_pose.

Create an onboarding pose that welcomes the user and points toward the real
primary action. Poll get_generation_status until completed. If the image needs a
transparent background, call remove_image_background and poll that generation.

After I approve the asset, add its stable URL to the onboarding component with
descriptive alt text. Preserve the button label, heading hierarchy, and accessible
status text.

Wiederhole den Ablauf für leere Zustände sowie Fehler-, Lade-, Erfolgs-, Upgrade- oder Dokumentationszustände. Claude sollte pro Pose eine klare Aktion wählen und dekorative Details vermeiden, die mit der Benutzeroberfläche konkurrieren.

Claude Code um einen vollständigen Durchlauf für UI-Assets bitten

Halte die Arbeit bei einem umfassenderen Durchlauf gut überprüfbar:

Audit this repository for onboarding, empty, error, success, and help states.
Return a table with the component path, user need, recommended mascot pose, and
whether the asset needs transparency. Do not edit files yet.

After approval, generate one pose at a time from activeMascotId. Poll every job,
show me the result, and only then integrate it into the named component.

So werden Produktentscheidungen, Generierung und Codeänderungen voneinander getrennt, wodurch sich der resultierende Diff leichter überprüfen lässt.

Weitere svgapp-MCP-Tools

• list_mascots stellt eine vorhandene Figur wieder her, wenn activeMascotId fehlt.
• list_recent_generations findet eine verlorene Generierungs-ID oder ein unfertiges Asset.
• generate_composition erstellt eine eigenständige Hero-, Diagramm- oder Feature-Illustration.
• create_mascot_animation fügt einer vorhandenen Figur Bewegung sowie optionale Start- und Endposen hinzu.
• get_generated_asset gibt die stabile URL und Metadaten zur Generierung zurück.

Alle Erstellungstools arbeiten asynchron. Bewahre generationId auf, frage den Status mit get_generation_status ab und warte auf completed, bevor du die fertige Datei herunterlädst.

Fehlerbehebung

Claude Code meldet „401 Unauthorized“

Ersetze ein abgelaufenes Token, bestätige den Authorization: Bearer ...-Header und überprüfe die Verbindung mit claude mcp get svgapp.

Die Figur verändert sich zwischen den Posen

Claude muss svgapp.conf.json lesen und den darin enthaltenen activeMascotId an generate_mascot_pose übergeben. Rufe create_mascot nicht für jeden Zustand einzeln auf.

Claude bearbeitet die Benutzeroberfläche, bevor das Asset fertig ist

Weise Claude an, get_generation_status abzufragen, die fertige URL anzuzeigen und vor Änderungen an den Komponenten auf deine Freigabe zu warten.

Passende Einrichtungsanleitungen

• svgapp MCP mit Cursor verwenden
• svgapp MCP mit Codex verwenden
• Ein wiederverwendbares System zur Figurenproduktion entwickeln