Produktmaskottchen in Codex mit dem svgapp MCP generieren

Kurzantwort

Füge svgapp als Remote-MCP-Server in Codex hinzu, richte ihn auf https://web.svgapp.ai/mcp aus und speichere dein MCP-Token in der Umgebungsvariablen SVGAPP_MCP_TOKEN. Danach kann Codex ein wiederverwendbares Maskottchen erstellen, konsistente Posen für bestimmte Komponenten generieren, asynchrone Jobs abfragen und freigegebene Assets in das Repository integrieren.

Codex mit svgapp verbinden

Erstelle in svgapp unter Einstellungen → Integrationen → MCP ein Token. In der Shell, in der du Codex ausführst:

export SVGAPP_MCP_TOKEN="YOUR_SVGAPP_MCP_TOKEN"
codex mcp add svgapp \
  --url https://web.svgapp.ai/mcp \
  --bearer-token-env-var SVGAPP_MCP_TOKEN

Du kannst den Server auch direkt zu ~/.codex/config.toml hinzufügen:

[mcp_servers.svgapp]
url = "https://web.svgapp.ai/mcp"
bearer_token_env_var = "SVGAPP_MCP_TOKEN"

Halte die Umgebungsvariable für den Prozess verfügbar, der Codex startet. Lege das Token weder im Repository noch in svgapp.conf.json ab.

Der Live-Endpunkt akzeptiert MCP-Anfragen über Streamable HTTP. Wenn du ihn in einem Browser öffnest, erscheint 405 Method Not Allowed, weil ein Browser GET sendet; Codex sendet authentifizierte POST-Anfragen.

Gib Codex eine sichere erste Aufgabe

Beginne mit Erkundung und Planung statt mit der Generierung:

Use the svgapp MCP for this repository.

Check the project root for svgapp.conf.json. Read it when valid; otherwise call
init_svgapp_config and save the result. Never write credentials to that file.

Inspect the frontend and identify three screens where a mascot would clarify an
action or state. Summarize the current palette and visual style. Propose a mascot
role and asset plan, but do not generate or edit files yet.

So bleibt der anfängliche Codex-Diff leer, während du die Rolle und Platzierungen der Figur freigibst.

Ein wiederverwendbares Maskottchen erstellen

Nach der Freigabe des Plans:

Read svgapp.conf.json. If it lacks a suitable colorPaletteId, call
create_color_palette using the application's real design tokens and merge the
returned configPatch.

Call create_mascot for a reusable product character that fits this codebase's UI.
Use a simple silhouette, no text or third-party logos, and enough clear space for
small interface placements.

Merge configPatch.activeMascotId into svgapp.conf.json. Poll
get_generation_status until completed. Return the stable URL and wait for review;
do not edit UI code yet.

Assets anhand echter Komponenten generieren

Sobald die Grundfigur freigegeben ist, lass Codex die Komponente prüfen, bevor die Pose generiert wird:

Review the empty-state component in this repository. Explain the user goal, the
primary action, the available image dimensions, and whether transparency is needed.

Then read activeMascotId from svgapp.conf.json and call generate_mascot_pose for
that exact state. The pose should guide attention toward the real action without
containing text or recreating the UI.

Poll get_generation_status. If necessary, call remove_image_background and poll
again. Show the completed URL and proposed component diff before editing.

So basiert der Prompt auf dem Layout, das Codex tatsächlich sehen kann. Dadurch entsteht ein nützlicheres Asset als bei einer allgemeinen Anfrage nach einem „fröhlichen Maskottchen“.

Einen prüfbaren Workflow über mehrere Bildschirme ausführen

Bitte Codex bei mehreren Bildschirmen darum, Planung, Generierung und Integration zu trennen:

Audit onboarding, empty, recoverable error, success, and help surfaces.

Phase 1: return a table of component paths, user needs, pose directions, target
sizes, and transparency requirements. Make no changes.

Phase 2: after approval, generate one pose at a time with activeMascotId and poll
each generation until completed. Show every result.

Phase 3: after asset approval, integrate the stable URLs, preserve accessible text
and controls, run the relevant build/tests, and summarize the changed files.

Codex kann die Arbeit im Repository übernehmen, während svgapp für die Kontinuität der Figur und die Asset-Generierung zuständig ist.

Generierungen wiederherstellen und das System erweitern

Verwende list_recent_generations, wenn eine Aufgabe ihre Generierungs-ID verliert. Verwende list_mascots, wenn in der Konfiguration kein aktives Maskottchen vorhanden ist. Wähle generate_composition für eigenständige Landingpage-Illustrationen, die das Maskottchen nicht wiederverwenden, und create_mascot_animation nur dann, wenn die Benutzeroberfläche tatsächlich von Bewegung profitiert.

Jedes Erstellungstool gibt sofort eine stabile URL zurück, die zunächst auf einen Platzhalter verweist. Frage get_generation_status so lange ab, bis der Job abgeschlossen ist, bevor du das Asset herunterlädst oder als final behandelst.

Fehlerbehebung

Codex kann den Server nicht erkennen

Bestätige den MCP-Eintrag in ~/.codex/config.toml, starte Codex nach Änderungen neu und stelle sicher, dass SVGAPP_MCP_TOKEN in der Umgebung vorhanden ist, in der Codex gestartet wird.

Der Endpunkt gibt im Browser 405 zurück

Das ist für GET erwartungsgemäß. Der MCP-Server ist unter der richtigen URL verfügbar und erwartet authentifizierte POST-Anfragen vom MCP-Client.

Eine Pose sieht wie ein anderes Maskottchen aus

Prüfe, ob svgapp.conf.json das freigegebene activeMascotId enthält und Codex generate_mascot_pose statt create_mascot aufgerufen hat.

Codex lädt einen Platzhalter herunter

Die Erstellung erfolgt asynchron. Frage get_generation_status mit dem zurückgegebenen generationId wiederholt ab, bis der Status completed lautet.

Zugehörige Einrichtungsanleitungen

• svgapp MCP mit Cursor verwenden
• svgapp MCP mit Claude Code verwenden
• Das gemeinsame Maskottchensystem gestalten