Générez des mascottes produit dans Codex avec le MCP de svgapp

Réponse rapide

Ajoutez svgapp comme serveur MCP distant dans Codex, pointez-le vers https://web.svgapp.ai/mcp et conservez votre jeton MCP dans la variable d’environnement SVGAPP_MCP_TOKEN. Codex peut ensuite créer une mascotte réutilisable, générer des poses cohérentes pour des composants spécifiques, interroger des tâches asynchrones et intégrer les ressources approuvées au dépôt.

Connecter Codex à svgapp

Générez un jeton depuis Paramètres → Intégrations → MCP dans svgapp. Dans le shell où vous exécutez Codex :

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

Vous pouvez également ajouter directement le serveur à ~/.codex/config.toml :

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

La variable d’environnement doit rester disponible pour le processus qui lance Codex. Ne placez pas le jeton dans le dépôt ni dans svgapp.conf.json.

Le point de terminaison actif accepte les requêtes MCP via HTTP Streamable. Si vous l’ouvrez dans un navigateur, il renvoie 405 Method Not Allowed, car un navigateur envoie GET ; Codex envoie des requêtes POST authentifiées.

Donner à Codex une première tâche sans risque

Commencez par l’exploration et la planification plutôt que par la génération :

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.

Ainsi, le diff initial de Codex reste vide pendant que vous validez le rôle du personnage et ses emplacements.

Créer une mascotte réutilisable

Après avoir validé le plan :

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.

Générer des ressources à partir de composants réels

Une fois le personnage de base approuvé, demandez à Codex d’inspecter le composant avant de générer la pose :

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.

Le prompt s’appuie ainsi sur la mise en page que Codex peut réellement voir, ce qui produit une ressource plus utile qu’une demande générique de « mascotte joyeuse ».

Exécuter un workflow soumis à revue sur plusieurs écrans

Pour plusieurs écrans, demandez à Codex de séparer la planification, la génération et l’intégration :

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 peut gérer le travail dans le dépôt, tandis que svgapp s’occupe de la continuité du personnage et de la génération des ressources.

Récupérer des générations et étendre le système

Utilisez list_recent_generations lorsqu’une tâche perd son identifiant de génération. Utilisez list_mascots lorsque la configuration ne contient pas de mascotte active. Choisissez generate_composition pour les illustrations autonomes d’une landing page qui ne réutilisent pas la mascotte, et create_mascot_animation uniquement lorsque l’interface tire réellement parti de l’animation.

Chaque outil de création renvoie immédiatement une URL stable reposant sur un placeholder. Interrogez get_generation_status jusqu’à la fin de la tâche avant de télécharger la ressource ou de la considérer comme définitive.

Dépannage

Codex ne voit pas le serveur

Vérifiez l’entrée MCP dans ~/.codex/config.toml, redémarrez Codex après toute modification et assurez-vous que SVGAPP_MCP_TOKEN existe dans l’environnement qui lance Codex.

Le point de terminaison renvoie 405 dans un navigateur

C’est normal pour GET. Le serveur MCP est disponible à l’URL correcte et attend des requêtes POST authentifiées de la part du client MCP.

Une pose ressemble à une autre mascotte

Vérifiez que svgapp.conf.json contient le activeMascotId approuvé et que Codex a appelé generate_mascot_pose, et non create_mascot.

Codex télécharge un espace réservé

La création est asynchrone. Interrogez get_generation_status à l’aide de la valeur generationId renvoyée jusqu’à ce que le statut soit completed.

Guides de configuration associés

• Utiliser svgapp MCP avec Cursor
• Utiliser svgapp MCP avec Claude Code
• Concevoir le système de mascotte partagé