Générez des mascottes d’application dans Cursor avec le MCP de svgapp

Réponse rapide

Connectez Cursor à https://web.svgapp.ai/mcp, ajoutez votre token MCP svgapp comme en-tête Bearer, et Cursor pourra créer une mascotte de produit réutilisable tout en développant votre application. La même intégration peut générer des poses cohérentes pour le parcours d’intégration, les états vides, les erreurs, les écrans de succès, la documentation et les pages de lancement.

Le point de terminaison MCP utilise Streamable HTTP et accepte les requêtes POST. Une requête GET effectuée depuis un navigateur renvoie 405 Method Not Allowed ; c’est normal et cela confirme que le point de terminaison n’est pas une page web.

Ajouter svgapp à Cursor

Créez .cursor/mcp.json dans le projet pour une connexion spécifique au dépôt, ou ~/.cursor/mcp.json pour une connexion globale :

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

Générez un token depuis Paramètres → Intégrations → MCP dans svgapp, remplacez la valeur temporaire et ne commitez pas le token dans Git. Utilisez le fichier global si vous ne voulez pas qu’une configuration de projet contienne des informations d’identification.

Après avoir enregistré le fichier :

1. Ouvrez les paramètres de Cursor et sélectionnez Outils et MCP.
2. Vérifiez que svgapp est activé.
3. Approuvez le serveur du projet si Cursor vous demande une confirmation.
4. Dans Cursor Agent, demandez-lui de lister les outils svgapp avant de générer quoi que ce soit.

La CLI de Cursor utilise la même configuration mcp.json. Vous pouvez vérifier la connexion avec :

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

Laissez Cursor initialiser le projet

Le MCP de svgapp conserve les choix visuels au niveau du projet dans svgapp.conf.json. Ce fichier stocke les ID du style graphique sélectionné, de la palette de couleurs et de la mascotte active, mais pas le token MCP.

Commencez par ce 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.

Cursor dispose ainsi de suffisamment de contexte pour planifier les ressources avant de lancer une génération.

Générez une mascotte réutilisable

Demandez à Cursor de créer un personnage qui appartient à l’application qu’il est en train de modifier :

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.

Générez des poses pour les écrans que Cursor est en train de créer

La mascotte de base établit l’identité visuelle. Les écrans produit nécessitent généralement une pose spécifique. Demandez à Cursor d’inspecter le composant et de générer la ressource en fonction du rôle de l’écran :

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.

Examinez les ressources générées avant d’autoriser l’agent à modifier l’interface en production. Les mascottes doivent accompagner les contrôles réels, et non remplacer les libellés, la validation ou le texte d’état accessible.

Récupérer et réutiliser un travail existant

Si le projet a perdu un ID, demandez à Cursor d’utiliser list_recent_generations ou list_mascots. Une fois qu’il dispose de l’ID correct de la mascotte, il peut mettre à jour activeMascotId et continuer à générer des poses cohérentes au lieu de créer un deuxième personnage.

Pour un visuel principal ou un diagramme autonome qui ne nécessite pas de continuité avec la mascotte, utilisez generate_composition. Pour créer une animation à partir d’une mascotte existante, utilisez create_mascot_animation. Chaque création est asynchrone : conservez l’ID de génération renvoyé et utilisez get_generation_status jusqu’à la fin du traitement.

Dépannage

Cursor affiche une erreur d’authentification

Vérifiez que l’URL est exactement https://web.svgapp.ai/mcp et que l’en-tête commence par Bearer . Actualisez un jeton expiré dans mcp.json, puis redémarrez le serveur ou activez-le dans Tools & MCP.

Le serveur se connecte, mais aucun outil n’apparaît

Autorisez les serveurs MCP au niveau du projet, redémarrez Cursor après avoir modifié le JSON et exécutez cursor-agent mcp list-tools svgapp si vous utilisez Cursor CLI.

Cursor crée des personnages incohérents

Assurez-vous que l’agent lit svgapp.conf.json avant chaque génération et utilise activeMascotId avec generate_mascot_pose. Appeler à nouveau create_mascot crée un nouveau personnage au lieu d’une nouvelle pose.

Guides de configuration associés

• Utiliser svgapp MCP avec Claude Code
• Utiliser svgapp MCP avec Codex
• Concevoir un système de mascottes réutilisable pour les développeurs