Comment configurer le serveur ExodeUI MCP dans Cursor
Configuration étape par étape pour le serveur ExodeUI MCP dans Cursor (et Claude Code) : l'entrée mcp.json, vérification des outils, premières invites et examen sécurisé.
À retenir
Ajoutez une entrée au .cursor/mcp.json de votre projet qui exécute le package claude-exode-mcp avec npx, rechargez Cursor et vérifiez que le serveur exode et ses outils apparaissent dans les paramètres MCP de Cursor. Demandez ensuite à l'agent de Cursor de créer ou d'éditer une animation en langage clair, et examinez le résultat dans l'éditeur ExodeUI avant l'expédition.
Ce dont vous avez besoin
Cursor, Node.js (donc npx est disponible) et un compte ExodeUI si vous souhaitez ouvrir les résultats dans l'éditeur. Le serveur ExodeUI MCP est publié sur npm sous le nom claude-exode-mcp ; il s'exécute localement via npx, il n'y a donc rien d'autre à installer à la main.
Étape 1 : ajouter le serveur à mcp.json
Cursor lit les serveurs MCP personnalisés à partir d'un fichier mcp.json ; un fichier au niveau du projet se trouve dans .cursor/mcp.json dans votre référentiel. Les serveurs de ligne de commande locaux utilisent le type « stdio » avec une commande et des arguments. L'entrée pour ExodeUI exécute npx avec le package claude-exode-mcp (voir le bloc de code ci-dessous).
Étape 2 : recharger et vérifier les outils
Rechargez Cursor, ouvrez ses paramètres MCP et confirmez que le serveur exode est en cours d'exécution et que ses outils sont répertoriés. S'il ne démarre pas, vérifiez que npx fonctionne dans votre terminal et que votre version de Node.js est à jour.
Étape 3 : invite
Demandez dans un langage simple et soyez précis sur les états et les ressentis :
- "Créez une bascule avec des états activés et désactivés et un ressort souple entre eux."
- "Ajoutez un état de chargement au bouton de sauvegarde qui clignote doucement, puis un contrôle de réussite."
- "Rendez l'animation de réussite plus rapide et réduisez le dépassement."
Utiliser Claude Code à la place
Dans Claude Code, ajoutez le même serveur avec une seule commande : claude mcp add exode npx -y claude-exode-mcp. Claude Code prend également en charge la configuration au niveau du projet dans un fichier .mcp.json.
Vérifiez avant d'expédier
Un agent capable de modifier des fichiers peut également commettre des erreurs. Conservez les fichiers .exode dans Git afin que les modifications soient différenciables, ouvrez les résultats dans l'éditeur ExodeUI pour vérifier le timing et chaque état, et testez le comportement de mouvement réduit.
Extrait d’implémentation en production
// .cursor/mcp.json
{
"mcpServers": {
"exode": {
"type": "stdio",
"command": "npx",
"args": ["-y", "claude-exode-mcp"]
}
}
}
# Claude Code alternative
claude mcp add exode npx -y claude-exode-mcpPrincipes clés à retenir
- Le serveur est le package npm claude-exode-mcp, exécuté avec npx
- Dans Cursor, ajoutez-le à .cursor/mcp.json en tant que serveur stdio
- Rechargez et confirmez que les outils apparaissent dans les paramètres MCP
- Invite avec les états et la sensation ; régler les numéros ensuite
- Conservez les fichiers dans Git et examinez les modifications dans l'éditeur
Questions fréquentes
Sources
- claude-exode-mcp — npm
- Model Context Protocol (MCP) — Documents Cursor
- Connect Claude Code to tools via MCP — Documents Claude Code