Lottie Creator MCP

Lottie Creator MCP

Connectez un assistant IA à Lottie Creator via le pont MCP local pour créer, modifier et animer à l'aide d'invites.

[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp) permet à un assistant navigateur compatible d'utiliser Creator directement, sans ce pont local. Il est activé par défaut dans les navigateurs pris en charge. Suivez ce guide si vous souhaitez vous connecter via le serveur MCP Creator local.

Le Lottie Creator MCP intègre votre assistant IA directement dans votre flux de travail d'animation — en lui donnant les outils pour inspecter, construire et modifier des animations Lottie dans LottieFiles Creator grâce au langage naturel. Vous pouvez consulter l'installation plus bas.

Les serveurs MCP font partie d'une interface standardisée permettant aux agents IA d'interagir avec des sources de données via le Model Context Protocol. Le Lottie Creator MCP connecte des assistants IA comme Claude, Cursor et Windsurf aux outils d'édition de Creator via un pont local.

Avec le MCP activé, vous pouvez :

✦ Créer des animations de A à Z

Décrivez ce que vous voulez — un indicateur de chargement, une barre de progression, une animation de personnage — et votre IA la construira directement dans Creator, couche par couche.

✦ Modifier et ajuster des animations existantes

Changez les couleurs, ajustez le timing, remplacez les courbes d'accélération, renommez les couches ou refactorisez une scène entière. Votre IA lit l'état actuel de votre fichier et le modifie en temps réel.

✦ Générer des variantes d'animations en lot

Produisez automatiquement plusieurs versions d'une animation en une fois — thèmes sombres et clairs, différentes tailles, variations de couleurs de marque.

✦ Analyser les animations pour l'accessibilité et la marque

Demandez à votre IA d'inspecter les animations pour détecter les problèmes de contraste, la vitesse de mouvement, la cohérence des couleurs ou la conformité avec vos directives de marque — et de corriger ce qu'elle trouve.

✦ Intégrer dans votre flux de travail de projet

Générez des ressources d'animation à la volée tout en travaillant sur un projet plus vaste.

Pour utiliser le MCP, installez-le dans votre client IA et activez-le dans LottieFiles Creator. Les sections ci-dessous détaillent chaque étape.

Prérequis

Avant l'installation, assurez-vous d'avoir les éléments suivants :

✅ 📦 Node.js 18+ : Requis pour exécuter le package MCP via npx. Télécharger Node.js →

✅ 🎬 LottieFiles Creator : Ouvrez creator.lottiefiles.com dans votre navigateur et gardez cet onglet ouvert.

✅ 🤖 Une IA compatible MCP : Claude, Cursor, Windsurf, VS Code Copilot, ou tout autre assistant prenant en charge MCP.

Tout d'abord, consultez le fichier README du MCP Creator où vous pouvez accéder aux chaînes et commandes MCP.

Installation du MCP

Pour tous vos outils IA, vous pouvez utiliser la configuration suivante :

{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}

Cette documentation couvre les étapes d'installation pour certains de nos clients MCP pris en charge. Pour une liste des guides d'installation des clients MCP pris en charge, voir la liste ci-dessous :

Clients MCP pris en charge

Suivez les instructions pour votre client spécifique afin d'installer et de connecter le Lottie Creator MCP. Certains clients prennent également en charge les compétences, qui ajoutent des connaissances en design de mouvement afin que votre IA puisse produire des animations plus intentionnelles et soignées. 🖇️ Voici la compétence en design de mouvement de LottieFiles.

Suivez les étapes pour votre client MCP :

---

**1. Ouvrir les paramètres de Claude Desktop**

Accédez à **Paramètres → Développeur** et cliquez sur **« Modifier la configuration »**. Cela ouvre un fichier de configuration JSON sur votre ordinateur que vous pouvez modifier dans VS Code, Cursor ou tout éditeur de texte.

<Image src="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp" alt="Claude Desktop Settings → Developer, Edit Config" caption="Claude Desktop Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp 640w, https://assets.docs.lottiefiles.com/static/cbcf2779e6-1024.webp 1024w" width="1490" height="1070" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAIAAABxZ0isAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAXklEQVR4nGWNSwqAMAxEc/8DiXgXF4rgp41pTNNWuxGpFEGYxcCbDwgjO5tPVaEUJZ9aBLtdinNkhFGFhPEBhOuVfA0G79DML6gL49B3bSOMMRxQin+B3Sb1+L0t4AYM8YjEckZSmwAAAABJRU5ErkJggg==" />

**2. Ajouter la configuration MCP**

Collez ce qui suit dans le fichier de configuration à l'intérieur de l'objet `mcpServers`. Vous devrez peut-être ajouter ou supprimer des crochets/virgules pour garder le JSON valide.

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

Voici à quoi pourrait ressembler le fichier de configuration après avoir collé la configuration ci-dessus :

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  },
  "preferences": {
    "quickEntryShortcut": "off",
    "coworkScheduledTasksEnabled": false,
    "ccdScheduledTasksEnabled": false,
    "sidebarMode": "chat",
    "coworkWebSearchEnabled": true,
    "floatingAtollActive": true
  }
}
```

**3. Vérifier la connexion**

Cliquez sur le bouton **« + »** dans une conversation, accédez à **Connecteurs**, et confirmez que l'interrupteur `lottiefiles-creator` est activé.

<Image src="https://assets.docs.lottiefiles.com/static/661d017685-640.webp" alt="Claude Desktop Connectors with lottiefiles-creator enabled" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/661d017685-640.webp 640w, https://assets.docs.lottiefiles.com/static/661d017685-1024.webp 1024w" width="1470" height="840" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAXUlEQVR4nE1NQQ7AIAjz/1/14CZGBJEu6JaMpGkobUmqioC7IybYfWGtgCEREUQEYzCuu6J1xZxnNzOkUgrMJoJzzhCdYO5QldNQiXZdJJh5i+eFvYYW4hH+h8/wAH2hnMwEoNxAAAAAAElFTkSuQmCC" />

**1. Exécutez la commande suivante dans votre terminal**

C'est tout. Claude Code installera et enregistrera le MCP automatiquement.

```
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

#### **Utilisation du Lottie Creator MCP pour Cursor**

1. Appuyez sur `Cmd + Shift + P` (Mac) ou `Ctrl + Shift + P` (Windows/Linux) → recherchez **« Paramètres de Cursor »**
2. Dans la barre latérale, allez dans **Outils et MCP**
3. Cliquez sur **« Ajouter un MCP personnalisé »**

<Image src="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp" alt="Cursor Settings → Tools & MCP, Add custom MCP" caption="Cursor Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp 640w, https://assets.docs.lottiefiles.com/static/1d779c5bf1-1024.webp 1024w" width="1724" height="1122" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYElEQVR4nD2OWQpFMQhDXUVnh1JKu/8N5qKPvg8hJPEoqSqYGbVWlFKQUkLO+T8kIhGOMXDvhZnFgpqGR27MOdF7j8JaC04VFbDyr/AoHuy9cc4JUmsN5BgXft9L75enP/5xNWNuTqnuAAAAAElFTkSuQmCC" />

4. Collez :

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

Enregistrez et **redémarrez complètement Cursor** (quittez et rouvrez — pas seulement un rechargement)

Après le redémarrage, allez dans **Paramètres → Outils et MCP** et vous devriez voir un point vert à côté de `lottiefiles-creator` confirmant la connexion.

<Image src="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp" alt="Cursor Settings → Tools & MCP, lottiefiles-creator connected" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp 640w, https://assets.docs.lottiefiles.com/static/d5e4c14c2c-1024.webp 1024w" width="1724" height="1118" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYUlEQVR4nD2NSw7AIAhEOYVfBHSlsfe/3jTY2MUEeDAMqSpEBKUUpJQQQkCM8Rf5MucMZsacE713tNagZoeRmR3ow1oLY4xzICoQU5BHOKhcsZ/9fWCGG5sKyJ033+vtr14GGTV0KRWZBgAAAABJRU5ErkJggg==" />

**Option A : Installation par lien profond**

1. Cliquez sur le [lien profond du serveur MCP LottieFiles.](https://vscode.dev/redirect/mcp/install?name=%40lottiefiles%2Fcreator-mcp\&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40lottiefiles%2Fcreator-mcp%22%5D%7D) Cela ouvrira la configuration MCP dans VS Code.
2. Appuyez sur le bouton **Installer**.

<Image src="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp" alt="VS Code Install MCP Server prompt for Lottie Creator" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp 640w, https://assets.docs.lottiefiles.com/static/215df2a202-1024.webp 1024w" width="1720" height="736" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAIAAAAhqtkfAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAANUlEQVR4nGNQ19TW0NFX0tCSlVcQk5AUFBaFIAYJKRlxSSlhUXG4EFRCSkZOUlpWXFIKTQIAGEcGwVfSfA0AAAAASUVORK5CYII=" />

**Option B : CLI ou fichier de configuration**

Ou via CLI :

Terminal

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

Ou ajoutez à votre `.vscode/mcp.json` :

JSON — .vscode/mcp.json

```
{
  "servers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

ℹ️ Vous aurez besoin de [GitHub Copilot](https://github.com/features/copilot) activé sur votre compte pour utiliser les outils MCP dans VS Code.

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Suivez la documentation de configuration MCP d'Antigravity et utilisez la configuration ci-dessus. Suivez la documentation de configuration MCP de Cline et utilisez la configuration ci-dessus. Suivez le [guide de configuration MCP](https://github.com/openai/codex/blob/main/docs/config.md) en utilisant :

```
[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]
```

Ou ajoutez via CLI :

```
codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

1. Démarrez `copilot` 2. Exécutez `/mcp add` 3. Configurez : - Nom du serveur : `lottiefiles-creator` - Type de serveur : `Local` - Commande : `npx -y @lottiefiles/creator-mcp@latest` Suivez la documentation de configuration MCP de VS Code et utilisez la configuration ci-dessus. Ou via CLI :

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

``` gh copilot mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` ``` droid mcp add lottiefiles-creator "npx -y @lottiefiles/creator-mcp@latest" ``` ``` gemini mcp add lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest gemini mcp add -s user lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest ``` Suivez la documentation de configuration MCP de Gemini Code Assist et utilisez la configuration ci-dessus. Suivez la documentation de configuration MCP de JetBrains et utilisez la configuration ci-dessus. Suivez la documentation de configuration MCP de Kiro et utilisez la configuration ci-dessus. Suivez la documentation de configuration MCP de Qoder et utilisez la configuration ci-dessus. Ajoutez un serveur MCP local avec :

- Nom : `lottiefiles-creator`
- Commande : `npx`
- Arguments : `y @lottiefiles/creator-mcp@latest`

Suivez la documentation de configuration MCP de Warp et utilisez la configuration ci-dessus. Suivez la documentation de configuration MCP de Windsurf et utilisez la configuration ci-dessus.

Connexion à Lottie Creator

1. Ouvrez Lottie Creator

Accédez à creator.lottiefiles.com dans votre navigateur et gardez cet onglet ouvert pendant toute votre session. Le MCP communique avec Creator via cet onglet de navigateur.

1. Activez le MCP local dans Creator

Dans Creator, allez dans Paramètres → Paramètres MCP → Activer le MCP local.

1. Confirmez la connexion

Vous devriez voir une notification dans Creator : Pont MCP local connecté

Si vous voyez cela, vous êtes prêt à commencer à utiliser les invites ! Gardez à l'esprit que la qualité de l'animation dépend fortement du modèle que vous utilisez, alors assurez-vous d'utiliser le meilleur modèle disponible.

À propos des compétences

Les compétences fournissent des conseils sur la manière dont un agent doit aborder les tâches d'animation — en utilisant une combinaison d'appels d'outils MCP et de connaissances approfondies en design de mouvement intégrées sous forme d'instructions réutilisables.

Alors que le Lottie Creator MCP expose des outils individuels (créer une couche, définir une image clé, ajuster un remplissage), les compétences aident votre IA à comprendre comment les utiliser correctement. Des choses comme savoir quelle courbe d'accélération convient à un rebond par rapport à un fondu, comment séquencer une entrée multi-éléments, ou comment structurer le timing pour qu'une animation semble intentionnelle plutôt que mécanique.

Les compétences ne remplacent pas la connexion MCP et n'ajoutent pas de nouveaux outils. Elles réduisent les conjectures en regroupant l'expertise en design de mouvement dans des instructions sur lesquelles votre IA s'appuie automatiquement chaque fois qu'elle travaille sur des animations.

Installer la compétence en design de mouvement

Exécutez cette commande une fois dans votre terminal. Elle fonctionne avec plus de 40 agents, y compris Claude Code, Cursor, Codex et GitHub Copilot.

Terminal

npx skills add LottieFiles/motion-design-skill

✨ Hautement recommandé. La différence entre une IA qui produit des animations rigides et mécaniques et une qui produit un mouvement soigné et intentionnel repose presque entièrement sur la présence de ce contexte. Installez-la une fois et elle s'applique à chaque session d'animation.

Voir la compétence complète sur GitHub → LottieFiles/motion-design-skill

Capacités

Lottie Creator MCP, Motion Copilot et Lottie Creator WebMCP offrent les mêmes capacités d'édition dans Creator. Leur configuration et leurs interfaces d'assistant diffèrent.

Domaine	Ce que vous pouvez demander
Scènes et couches	Inspecter et créer des scènes ; modifier la taille, la fréquence d'images, la durée ou l'arrière-plan d'aperçu ; renommer, dupliquer, grouper, aligner, réorganiser, masquer ou verrouiller des couches.
Formes et texte	Créer et modifier des rectangles, ellipses, polygones, étoiles, tracés et texte ; changer les polices et les styles de texte ; diviser le texte en parties pour l'animation.
Style et effets	Ajuster les remplissages et contours unis ou dégradés ; utiliser les modes de fusion, ombres, flou, effets de couleur, masques et caches.
Animation et timing	Ajouter, inspecter, modifier, copier ou supprimer des images clés ; ajuster l'accélération ; animer les transformations, l'opacité et la couleur ; utiliser des tracés de mouvement, des entrées échelonnées et un re-timing.
Ressources et inspection de scène	Importer des SVG, des animations Lottie et des images ; convertir des couches d'images PNG ou JPG en vecteurs ; inspecter la scène et déplacer la tête de lecture vers une image spécifique.
Thèmes et mouvement réutilisable	Créer et lier des emplacements de jetons de mouvement, mettre à jour leurs valeurs, et créer ou changer de thèmes. Trouver et appliquer des styles enregistrés et des préréglages de mouvement depuis le système de mouvement de votre espace de travail.
Segments et interactivité	Créer des segments d'animation nommés, des machines à états, des états, des transitions et des entrées ; connecter des événements de clic, de survol et d'état à des actions.

L'accès aux fonctionnalités suit votre espace de travail et votre plan Creator. Lorsque l'animation est prête, utilisez les commandes d'exportation de Creator pour enregistrer le résultat.

Bonnes pratiques

• Installez le skill de motion design pour une meilleure qualité : Le MCP donne à votre IA les outils. Le skill de motion design lui donne le jugement pour bien les utiliser — courbes d’easing, principes de timing, chorégraphie. Une seule commande, un résultat nettement meilleur. Le skill de motion design se trouve ici.
• Commencez avec vos propres SVG, puis animez : L’IA peut être imprévisible lorsqu’elle génère des formes d’illustration de zéro. Pour de meilleurs résultats, importez d’abord vos assets SVG existants dans Creator, puis demandez à votre IA de les animer. Cela maintient votre style visuel cohérent et permet à l’IA de se concentrer sur ce qu’elle fait le mieux — le mouvement, le timing et le séquençage.
  • Testez ces liens de remix
    • Médaille : https://lottie.link/metal
    • Météo : https://lottie.link/weather
    • Graphique : https://lottie.link/graph
    • Boîte aux lettres : https://lottie.link/mailbox1
• Utilisez toujours le meilleur modèle disponible : La qualité de l’animation évolue directement avec le modèle. Si vous avez accès à Claude Sonnet ou Opus, utilisez-le plutôt qu’un modèle plus petit — la différence dans la gestion du timing, du séquençage et du raisonnement spatial est perceptible.
• Nommez vos calques avant de donner vos instructions : L’IA lit les noms de vos calques pour comprendre la structure de votre animation. Des calques bien nommés comme left_arm, right_leg, bg_circle et text_headline l’aident à cibler les bons éléments, éviter les erreurs et rester organisée dans des scènes complexes. Des noms génériques comme Shape 1 ou Group 4 rendent plus difficile pour l’IA de construire précisément sur votre travail.
• Décomposez les animations complexes en étapes : Au lieu de « construis-moi une animation d’onboarding complète », procédez scène par scène. Créez la scène → ajoutez les formes → ajoutez les keyframes → affinez le timing. Des étapes plus petites vous donnent plus de contrôle et rendent les erreurs plus faciles à repérer et à corriger.
• Soyez précis sur le timing et la sensation : « Un fondu fluide » est vague. « Un fondu d’entrée de 400 ms avec ease-out » donne à votre IA quelque chose de concret. Plus vous décrivez la sensation — vif, rebondissant, lent et cinématographique — plus le premier résultat sera proche de ce que vous imaginez.