Lottie Creator MCP

Lottie Creator MCP

undefined

Lottie Creator MCP

Le Lottie Creator MCP intègre votre assistant IA directement dans votre flux de travail d'animation — en lui donnant un accès complet à LottieFiles Creator afin qu'il puisse créer et modifier des animations Lottie en votre nom via le 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 en utilisant le Model Context Protocol. Le Lottie Creator MCP connecte les assistants IA comme Claude, Cursor et Windsurf à l'API Creator via un pont local — ce qui signifie que votre IA obtient le même accès complet à Creator que vous.

Avec le MCP activé, vous pouvez :

✦ Créer des animations à partir de zéro

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

✦ Modifier des animations existantes

Changez les couleurs, ajustez le timing, échangez les courbes d'accélération, renommez les calques 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'animation par lot

Produisez automatiquement plusieurs versions d'une animation à la 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 les problèmes de contraste, la vitesse de mouvement, la cohérence des couleurs ou l'alignement 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 large.

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 configuré les éléments suivants :

✅ 📦 Node.js 18+ : Nécessaire 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, allez dans le fichier README du Creator MCP où vous pouvez accéder aux chaînes et commandes MCP.

Installation du MCP

Pour tous vos outils d'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 pour les 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 conception de mouvement pour que votre IA puisse produire des animations plus intentionnelles et soignées. 🖇️ Voici la compétence de conception de mouvement LottieFiles.

Suivez les étapes pour votre client MCP :

---

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

Naviguez vers **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 n'importe quel é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 que le JSON reste valide.

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

Voici à quoi le fichier de configuration pourrait ressembler 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 qu'il est connecté**

Cliquez sur le bouton **"+"** dans un chat, naviguez vers **Connecteurs**, et confirmez que le bouton `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 Cursor"**
2. Dans la barre latérale, allez dans **Outils & MCPs**
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 recharger)

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

<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. Ouvrir Lottie Creator

Naviguez vers creator.lottiefiles.com dans votre navigateur et gardez cet onglet ouvert tout au long de votre session. Le MCP communique avec Creator via cet onglet du navigateur.

1. Activer le MCP dans Creator

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

1. Confirmer la connexion

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

Si vous voyez cela, vous êtes prêt à commencer à donner des instructions ! 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 pour vous.

À 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 conception de mouvement intégrées sous forme d'instructions réutilisables.

Alors que le Lottie Creator MCP expose des outils individuels (créer un calque, définir une image clé, ajuster un remplissage), les compétences aident votre IA à comprendre comment bien les utiliser. 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 ni n'ajoutent de nouveaux outils. Elles réduisent les conjectures en intégrant l'expertise en conception de mouvement dans des instructions que votre IA utilise automatiquement chaque fois qu'elle travaille sur des animations.

Installer la compétence de conception 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 dépend presque entièrement de la présence ou non 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

Le MCP donne à votre IA un accès complet à l'API Creator. Voici tout ce qu'il peut faire :

🎬 Gestion de scène

• Créer des scènes — définir le nom, la taille, la fréquence d'images, la durée
• Basculer entre les scènes
• Définir la couleur d'arrière-plan (aperçu uniquement, non exporté)
• Lire les propriétés de la scène — calques, taille, fréquence d'images
• Exporter des scènes en JSON Lottie
• Importer du JSON Lottie, dotLottie, SVG ou des images

🗂 Gestion des calques

• Définir la visibilité, l'état de verrouillage et la focalisation
• Contrôler le timing — image de début, image de fin, décalage
• Définir les modes de fusion (16 modes, y compris multiplier, écran, superposition)
• Appliquer et animer des masques et des caches
• Aligner et retourner les calques
• Animer les transformations — position, rotation, échelle, inclinaison

🔷 Création de formes

• Rectangle — position, taille, arrondi des coins
• Ellipse — position, taille
• Polygone — points, rayon, arrondi
• Étoile — rayon intérieur/extérieur, points
• Tracé — Bézier personnalisé avec contrôle total des tangentes
• Groupe — regrouper des formes existantes

🎨 Remplissages et contours

• Remplissage de couleur unie — RVB statique ou animé
• Remplissage en dégradé linéaire — points de début/fin personnalisés
• Remplissage en dégradé radial — angle et longueur de surbrillance
• Contours unis et en dégradé — avec largeur animable
• Tracés de découpe — animer le dessin (début %, fin %, décalage)

⏱️ Animation et images clés

• Ajouter des images clés à des images spécifiques avec des valeurs
• Définir des valeurs statiques (pas d'animation)
• Lire, inspecter et supprimer des images clés
• Définir l'accélération — Linéaire ou Bézier cubique (x1, y1, x2, y2)
• Animer : position, rotation, échelle, opacité, couleur, tracé, et plus

🖼 Ressources et lecture

• Lister, cloner et supprimer des ressources (scènes et images)
• Lire les propriétés de l'image — largeur, hauteur, URI base64
• Lire, mettre en pause et sauter à des images spécifiques
• Lire l'image actuelle et l'état de lecture
• Lire les nœuds et les images clés sélectionnés

Prochainement : Machines à états et Jetons de mouvement

Meilleures pratiques

• Installez la compétence de design de mouvement pour une meilleure qualité : Le MCP fournit à votre IA les outils. La compétence de design de mouvement lui donne le jugement nécessaire pour bien les utiliser — courbes d'assouplissement, principes de timing, chorégraphie. Une seule commande, un résultat nettement meilleur. La compétence de design de mouvement est disponible ici.
• Commencez avec vos propres SVG, puis animez : L'IA peut être imprévisible lorsqu'elle génère des formes d'illustration à partir de zéro. Pour de meilleurs résultats, importez d'abord vos éléments SVG existants dans Creator, puis demandez à votre IA de les animer. Cela préserve la cohérence de votre style visuel 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 à votre disposition : La qualité de l'animation est directement proportionnelle au 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 notable.
• Nommez vos calques avant de formuler votre requête : 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 les scènes complexes. Des noms génériques comme Shape 1 ou Group 4 rendent plus difficile pour l'IA de s'appuyer précisément sur votre travail.
• Décomposez les animations complexes en étapes : Au lieu de « construis-moi une animation d'intégration complète », procédez scène par scène. Créez la scène → ajoutez des formes → ajoutez des images clés → affinez le timing. Des étapes plus petites vous donnent plus de contrôle et facilitent la détection et la correction des erreurs.
• Soyez précis sur le timing et la sensation : « Un fondu en douceur » est vague. « Un fondu à l'ouverture de 400 ms avec une courbe d'assouplissement en fin d'animation » donne à votre IA une base de travail. Plus vous décrivez la sensation — vif, rebondissant, lent et cinématographique — plus le premier résultat sera proche de ce que vous imaginez.