Générez des mascottes dans Claude Code avec le MCP de svgapp

Réponse rapide

Claude Code peut utiliser svgapp comme serveur MCP distant pour générer des éléments visuels tout en travaillant dans votre dépôt. Connectez https://web.svgapp.ai/mcp avec votre jeton bearer, puis demandez à Claude d’initialiser svgapp.conf.json, de créer une mascotte réutilisable, de générer des poses adaptées à chaque écran et d’intégrer les éléments finalisés dans votre application.

Le point de terminaison utilise Streamable HTTP. Un navigateur GET renvoie 405 Method Not Allowed, car les clients MCP communiquent avec lui au moyen de requêtes POST authentifiées.

Connecter Claude Code à svgapp

Générez un jeton MCP depuis Paramètres → Intégrations → MCP dans svgapp, puis exécutez :

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

La portée par défaut est limitée au projet actuel. Utilisez --scope user si vous souhaitez que la connexion soit disponible pour tous les projets. Pour une configuration de projet partagée, utilisez --scope project ; conservez le jeton dans une variable d’environnement au lieu de l’enregistrer dans le dépôt.

Vérifiez la connexion :

claude mcp list
claude mcp get svgapp

Dans Claude Code, /mcp ouvre l’état du serveur et les contrôles d’authentification.

Initialiser la configuration visuelle

Lancez Claude Code dans le dépôt et confiez-lui une première tâche clairement délimitée :

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.

Le fichier de configuration doit contenir des identifiants visuels réutilisables tels que artStyleId, colorPaletteId et activeMascotId. Il ne doit jamais contenir le jeton MCP.

Créer la mascotte depuis le terminal

Une fois la direction validée, demandez à Claude de la transformer en personnage réutilisable :

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 peut désormais réutiliser la mascotte enregistrée au lieu de produire un personnage différent à chaque session.

Générer les poses et les intégrer

Utilisez generate_mascot_pose chaque fois que le même personnage doit communiquer un nouvel état :

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.

Répétez le workflow pour les états vide, erreur, chargement, réussite, mise à niveau ou documentation. Claude doit choisir une action claire par pose et éviter les détails décoratifs qui entrent en concurrence avec l’interface.

Demander à Claude Code de réaliser une passe complète sur les éléments d’interface

Pour une passe plus large, veillez à ce que le travail reste facile à examiner :

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.

Cela sépare les décisions produit de la génération et des modifications du code, ce qui facilite l’examen du diff obtenu.

Autres outils MCP de svgapp

• list_mascots récupère un personnage existant lorsque activeMascotId est manquant.
• list_recent_generations retrouve un ID de génération perdu ou un asset inachevé.
• generate_composition crée un héros autonome, un diagramme ou une illustration de fonctionnalité.
• create_mascot_animation ajoute du mouvement à une mascotte existante, avec des poses initiale et finale facultatives.
• get_generated_asset renvoie l’URL stable et les métadonnées de génération.

Tous les outils de création sont asynchrones. Conservez le generationId, interrogez avec get_generation_status et attendez completed avant de télécharger le fichier final.

Dépannage

Claude Code signale 401 Unauthorized

Remplacez le jeton expiré, vérifiez l’en-tête Authorization: Bearer ... et inspectez la connexion avec claude mcp get svgapp.

La mascotte change entre les poses

Claude doit lire svgapp.conf.json et transmettre son activeMascotId à generate_mascot_pose. N’appelez pas create_mascot pour chaque état.

Claude modifie l’interface avant que l’asset soit prêt

Demandez-lui d’interroger get_generation_status, d’afficher l’URL une fois prête et d’attendre votre approbation avant de modifier les composants.

Guides de configuration associés

• Utiliser svgapp MCP avec Cursor
• Utiliser svgapp MCP avec Codex
• Créer un système de production de mascottes réutilisable