Connecter des agents IA aux animations UI via MCP (Claude Code et Cursor)
Découvrez comment relier Claude Code, Cursor et des agents IA à ExodeUI via Model Context Protocol (MCP) pour créer du mouvement UI par commandes textuelles.
À retenir
ExodeUI intègre un serveur Model Context Protocol (MCP) officiel permettant à des assistants de programmation comme Claude Code et Cursor de concevoir, auditer et ajuster des animations interactives. Grâce à des outils dédiés aux images-clés, aux machines à états et aux liaisons de variables, vos agents IA génèrent des animations prêtes pour la production à partir de simples prompts.
Pourquoi le mouvement d'interface a besoin du protocole MCP
Des assistants comme Cursor ou Claude Code rédigent facilement du code React et CSS, mais sont aveugles face aux formats graphiques fermés. Le format ouvert .exode et le serveur MCP transforment les animations en structures JSON transparentes que les modèles d'IA peuvent lire et éditer avec précision.
- Modification directe des fichiers : Les modèles créent des calques et modifient les ressorts par appels d'outils.
- Compréhension contextuelle : L'agent inspecte la hiérarchie des couches et les variables d'entrée.
- Passation automatisée : L'assistant relie directement l'état de votre application aux entrées de l'animation.
Configuration du serveur MCP ExodeUI
L'ajout du serveur MCP à votre environnement local nécessite moins de deux minutes via claude_desktop_config.json ou les paramètres MCP de Cursor.
Piloter des agents IA pour générer des micro-interactions
Une fois connecté, guidez votre assistant en langage naturel : 'Génère un bouton de favori avec état Actif et Inactif, propulsé par des ressorts de raideur 300 et d'amortissement 20'. L'agent crée le fichier et le composant React correspondant.
Extrait d’implémentation en production
{
"mcpServers": {
"exode": {
"command": "npx",
"args": ["-y", "@exodeui/mcp-server"]
}
}
}