Lottie Creator MCP

Lottie Creator MCP

Verbinden Sie einen KI-Assistenten über die lokale MCP-Brücke mit Lottie Creator, um Animationen per Eingabeaufforderung zu erstellen, zu bearbeiten und zu animieren.

[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp) ermöglicht einem kompatiblen Browser-Assistenten die direkte Nutzung von Creator, ohne diese lokale Brücke. In unterstützten Browsern ist es standardmäßig aktiviert. Folgen Sie dieser Anleitung, wenn Sie eine Verbindung über den lokalen Creator-MCP-Server herstellen möchten.

Der Lottie Creator MCP bringt Ihren KI-Assistenten direkt in Ihren Animations-Workflow – und gibt ihm Werkzeuge, um Lottie-Animationen in LottieFiles Creator über natürliche Sprache zu untersuchen, zu erstellen und zu bearbeiten. Die Installation finden Sie weiter unten.

MCP-Server sind Teil einer standardisierten Schnittstelle, über die KI-Agenten mit Datenquellen über das Model Context Protocol interagieren. Der Lottie Creator MCP verbindet KI-Assistenten wie Claude, Cursor und Windsurf über eine lokale Brücke mit den Bearbeitungswerkzeugen von Creator.

Mit aktiviertem MCP können Sie:

✦ Animationen von Grund auf erstellen

Beschreiben Sie, was Sie möchten – einen Lade-Spinner, eine Fortschrittsleiste, eine Charakter-Animation – und Ihre KI erstellt es direkt in Creator, Schicht für Schicht.

✦ Vorhandene Animationen bearbeiten und ändern

Farben ändern, Timing anpassen, Easing-Kurven austauschen, Ebenen umbenennen oder eine gesamte Szene umstrukturieren. Ihre KI liest den aktuellen Zustand Ihrer Datei und bearbeitet ihn in Echtzeit.

✦ Animationsvarianten in Stapeln generieren

Automatisch mehrere Versionen einer Animation gleichzeitig erstellen – dunkle und helle Designs, verschiedene Größen, Markenfarbvarianten.

✦ Animationen auf Barrierefreiheit und Marke analysieren

Bitten Sie Ihre KI, Animationen auf Kontrastprobleme, Bewegungsgeschwindigkeit, Farbkonsistenz oder Übereinstimmung mit Ihren Markenrichtlinien zu prüfen – und das Gefundene zu beheben.

✦ In Ihren Projekt-Workflow integrieren

Animations-Assets spontan generieren, während Sie an einem größeren Projekt arbeiten.

Um den MCP zu nutzen, installieren Sie ihn in Ihrem KI-Client und aktivieren Sie ihn in LottieFiles Creator. Die folgenden Abschnitte führen Sie durch jeden Schritt.

Voraussetzungen

Stellen Sie vor der Installation sicher, dass Folgendes eingerichtet ist:

✅ 📦 Node.js 18+: Erforderlich, um das MCP-Paket über npx auszuführen. Node.js herunterladen →

✅ 🎬 LottieFiles Creator: Öffnen Sie creator.lottiefiles.com in Ihrem Browser und lassen Sie diesen Tab geöffnet.

✅ 🤖 Eine MCP-kompatible KI: Claude, Cursor, Windsurf, VS Code Copilot oder ein anderer Assistent mit MCP-Unterstützung.

Gehen Sie zunächst zur Creator-MCP-README-Datei, wo Sie auf die MCP-Strings und -Befehle zugreifen können.

Installieren des MCP

Für alle Ihre KI-Tools können Sie die folgende Konfiguration verwenden:

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

Diese Dokumentation behandelt die Installationsschritte für einige unserer unterstützten MCP-Clients. Eine Liste der Installationsanleitungen für unterstützte MCP-Clients finden Sie unten:

Unterstützte MCP-Clients

Befolgen Sie die Anweisungen für Ihren jeweiligen Client, um den Lottie Creator MCP zu installieren und zu verbinden. Einige Clients unterstützen auch Skills, die Motion-Design-Wissen hinzufügen, damit Ihre KI absichtsvollere, ausgefeiltere Animationen erstellen kann. 🖇️ Hier ist der LottieFiles Motion-Design-Skill.

Befolgen Sie die Schritte für Ihren MCP-Client:

---

**1. Claude-Desktop-Einstellungen öffnen**

Navigieren Sie zu **Einstellungen → Entwickler** und klicken Sie auf **"Konfiguration bearbeiten"**. Dadurch wird eine JSON-Konfigurationsdatei auf Ihrem Computer geöffnet, die Sie in VS Code, Cursor oder einem beliebigen Texteditor bearbeiten können.

<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. Die MCP-Konfiguration hinzufügen**

Fügen Sie Folgendes in die Konfigurationsdatei innerhalb des `mcpServers`-Objekts ein. Möglicherweise müssen Sie Klammern/Kommas hinzufügen oder entfernen, um das JSON gültig zu halten.

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

So könnte die Konfigurationsdatei nach dem Einfügen der obigen Konfiguration aussehen:

```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. Überprüfen, ob die Verbindung hergestellt ist**

Klicken Sie in einem Chat auf die Schaltfläche **"+"**, navigieren Sie zu **Connectors**, und bestätigen Sie, dass der `lottiefiles-creator`-Schalter aktiviert ist.

<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. Führen Sie den folgenden Befehl in Ihrem Terminal aus**

Das war's. Claude Code installiert und registriert den MCP automatisch.

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

#### **Verwenden des Lottie Creator MCP für Cursor**

1. Drücken Sie `Cmd + Shift + P` (Mac) oder `Ctrl + Shift + P` (Windows/Linux) → suchen Sie nach **"Cursor Settings"**
2. Gehen Sie in der Seitenleiste zu **Tools & MCPs**
3. Klicken Sie auf **"Add custom MCP"**

<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. Fügen Sie Folgendes ein:

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

Speichern Sie und **starten Sie Cursor vollständig neu** (beenden und erneut öffnen – nicht nur neu laden)

Nach dem Neustart gehen Sie zu **Einstellungen → Tools & MCP** und Sie sollten einen grünen Punkt neben `lottiefiles-creator` sehen, der die Verbindung bestätigt.

<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: Deep-Link-Installation**

1. Klicken Sie auf den [LottieFiles-MCP-Server-Deep-Link.](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) Dadurch wird die MCP-Konfiguration in VS Code geöffnet.
2. Drücken Sie die Schaltfläche **Installieren**.

<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 oder Konfigurationsdatei**

Oder über die CLI:

Terminal

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

Oder fügen Sie es zu Ihrer `.vscode/mcp.json` hinzu:

JSON — .vscode/mcp.json

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

ℹ️ Sie benötigen [GitHub Copilot](https://github.com/features/copilot), das auf Ihrem Konto aktiviert ist, um MCP-Tools in VS Code zu verwenden.

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Befolgen Sie die MCP-Setup-Dokumentation von Antigravity und verwenden Sie die obige Konfiguration. Befolgen Sie die MCP-Setup-Dokumentation von Cline und verwenden Sie die obige Konfiguration. Befolgen Sie die [Anleitung zum Konfigurieren von MCP](https://github.com/openai/codex/blob/main/docs/config.md) mit:

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

Oder fügen Sie es über die CLI hinzu:

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

1. Starten Sie `copilot` 2. Führen Sie `/mcp add` aus 3. Konfigurieren Sie: - Servername: `lottiefiles-creator` - Servertyp: `Local` - Befehl: `npx -y @lottiefiles/creator-mcp@latest` Befolgen Sie die VS-Code-MCP-Setup-Dokumentation und verwenden Sie die obige Konfiguration. Oder über die 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 ``` Befolgen Sie die MCP-Setup-Dokumentation von Gemini Code Assist und verwenden Sie die obige Konfiguration. Befolgen Sie die MCP-Setup-Dokumentation von JetBrains und verwenden Sie die obige Konfiguration. Befolgen Sie die MCP-Setup-Dokumentation von Kiro und verwenden Sie die obige Konfiguration. Befolgen Sie die MCP-Setup-Dokumentation von Qoder und verwenden Sie die obige Konfiguration. Fügen Sie einen lokalen MCP-Server hinzu mit:

- Name: `lottiefiles-creator`
- Befehl: `npx`
- Argumente: `y @lottiefiles/creator-mcp@latest`

Befolgen Sie die MCP-Setup-Dokumentation von Warp und verwenden Sie die obige Konfiguration. Befolgen Sie die MCP-Setup-Dokumentation von Windsurf und verwenden Sie die obige Konfiguration.

Verbinden mit Lottie Creator

1. Lottie Creator öffnen

Navigieren Sie in Ihrem Browser zu creator.lottiefiles.com und lassen Sie diesen Tab während Ihrer gesamten Sitzung geöffnet. Der MCP kommuniziert über diesen Browser-Tab mit Creator.

1. Lokalen MCP in Creator aktivieren

Gehen Sie in Creator zu Einstellungen → MCP-Einstellungen → Lokalen MCP aktivieren.

1. Die Verbindung bestätigen

Sie sollten eine Benachrichtigung in Creator sehen: Lokale MCP-Brücke verbunden

Wenn Sie dies sehen, sind Sie bereit und können mit der Eingabeaufforderung beginnen! Beachten Sie, dass die Animationsqualität stark vom verwendeten Modell abhängt. Verwenden Sie daher unbedingt das beste Ihnen verfügbare Modell.

Über Skills

Skills bieten Anleitungen, wie ein Agent Animationsaufgaben angehen sollte – durch eine Kombination aus MCP-Tool-Aufrufen und tiefem Motion-Design-Wissen, das als wiederverwendbare Anweisungen eingebettet ist.

Während der Lottie Creator MCP einzelne Tools bereitstellt (Ebene erstellen, Keyframe setzen, Füllung anpassen), helfen Skills Ihrer KI zu verstehen, wie man sie gut einsetzt. Zum Beispiel, welche Easing-Kurve zu einem Bounce im Gegensatz zu einem Fade passt, wie man einen Multi-Element-Eingang sequenziert oder wie man Timing strukturiert, damit sich eine Animation absichtsvoll und nicht mechanisch anfühlt.

Skills ersetzen nicht die MCP-Verbindung und fügen keine neuen Tools hinzu. Sie reduzieren Rätselraten, indem sie Motion-Design-Expertise in Anweisungen verpacken, auf die Ihre KI automatisch zurückgreift, wenn sie an Animationen arbeitet.

Den Motion-Design-Skill installieren

Führen Sie diesen Befehl einmal in Ihrem Terminal aus. Er funktioniert mit über 40 Agenten, einschließlich Claude Code, Cursor, Codex und GitHub Copilot.

Terminal

npx skills add LottieFiles/motion-design-skill

✨ Sehr empfehlenswert. Der Unterschied zwischen einer KI, die steife, mechanische Animationen erzeugt, und einer, die ausgefeilte, absichtsvolle Bewegung produziert, liegt fast vollständig darin, ob dieser Kontext vorhanden ist. Installieren Sie ihn einmal, und er gilt für jede Animationssitzung.

Den vollständigen Skill auf GitHub ansehen → LottieFiles/motion-design-skill

Funktionen

Lottie Creator MCP, Motion Copilot und Lottie Creator WebMCP bieten dieselben Creator-Bearbeitungsfunktionen. Ihre Einrichtung und Assistentenschnittstellen unterscheiden sich.

Bereich	Was Sie anfragen können
Szenen und Ebenen	Szenen untersuchen und erstellen; Größe, Bildrate, Dauer oder Vorschauhintergrund ändern; Ebenen umbenennen, duplizieren, gruppieren, ausrichten, neu anordnen, ausblenden oder sperren.
Formen und Text	Rechtecke, Ellipsen, Polygone, Sterne, Pfade und Text erstellen und bearbeiten; Schriftarten und Textstile ändern; Text für Animationen in Teile aufteilen.
Styling und Effekte	Solide und Verlaufsfüllungen oder Konturen anpassen; Mischmodi, Schatten, Unschärfe, Farbeffekte, Masken und Mattes verwenden.
Animation und Timing	Keyframes hinzufügen, untersuchen, ändern, kopieren oder entfernen; Easing anpassen; Transformationen, Deckkraft und Farbe animieren; Bewegungspfade, gestaffelte Eingänge und Neubemessung des Timings verwenden.
Assets und Szenenuntersuchung	SVGs, Lottie-Animationen und Bilder importieren; PNG- oder JPG-Bildebenen in Vektoren konvertieren; die Szene untersuchen und den Abspielkopf zu einem bestimmten Frame bewegen.
Designs und wiederverwendbare Bewegung	Motion-Token-Slots erstellen und verknüpfen, deren Werte aktualisieren und Designs erstellen oder wechseln. Gespeicherte Stile und Bewegungsvoreinstellungen aus dem Motion-System Ihres Workspace finden und anwenden.
Segmente und Interaktivität	Benannte Animationssegmente, Zustandsmaschinen, Zustände, Übergänge und Eingaben erstellen; Klick-, Hover- und Zustandsereignisse mit Aktionen verbinden.

Der Funktionszugriff folgt Ihrem Creator-Workspace und -Plan. Wenn die Animation fertig ist, verwenden Sie die Exportsteuerung von Creator, um das Ergebnis zu speichern.

Best Practices

• Installieren Sie die Motion-Design-Fähigkeit für bessere Qualität: Der MCP gibt Ihrer KI die Werkzeuge. Die Motion-Design-Fähigkeit gibt ihr das Urteilsvermögen, sie gut einzusetzen – Easing-Kurven, Timing-Prinzipien, Choreografie. Ein Befehl, deutlich bessere Ergebnisse. Die Motion-Design-Fähigkeit finden Sie hier.
• Beginnen Sie mit Ihren eigenen SVGs und animieren Sie dann: KI kann unberechenbar sein, wenn sie Illustrationsformen von Grund auf generiert. Für die besten Ergebnisse importieren Sie zuerst Ihre vorhandenen SVG-Assets in Creator und bitten Sie dann Ihre KI, sie zu animieren. So bleibt Ihr visueller Stil konsistent und die KI kann sich auf das konzentrieren, was sie am besten kann – Bewegung, Timing und Sequenzierung.
  • Testen Sie diese Remix-Links
    • Medaille: https://lottie.link/metal
    • Wetter: https://lottie.link/weather
    • Diagramm: https://lottie.link/graph
    • Briefkasten: https://lottie.link/mailbox1
• Verwenden Sie immer das beste verfügbare Modell: Die Animationsqualität skaliert direkt mit dem Modell. Wenn Sie Zugriff auf Claude Sonnet oder Opus haben, verwenden Sie es anstelle eines kleineren Modells – der Unterschied in der Handhabung von Timing, Sequenzierung und räumlichem Denken ist spürbar.
• Benennen Sie Ihre Ebenen, bevor Sie eine Eingabeaufforderung erstellen: Die KI liest Ihre Ebenennamen, um die Struktur Ihrer Animation zu verstehen. Gut benannte Ebenen wie left_arm, right_leg, bg_circle und text_headline helfen ihr, die richtigen Elemente anzusprechen, Fehler zu vermeiden und bei komplexen Szenen organisiert zu bleiben. Generische Namen wie Shape 1 oder Group 4 erschweren es der KI, präzise auf Ihrer Arbeit aufzubauen.
• Teilen Sie komplexe Animationen in Schritte auf: Anstatt „Erstellen Sie mir eine vollständige Onboarding-Animation“, gehen Sie Szene für Szene vor. Szene erstellen → Formen hinzufügen → Keyframes hinzufügen → Timing verfeinern. Kleinere Schritte geben Ihnen mehr Kontrolle und machen Fehler leichter erkennbar und korrigierbar.
• Seien Sie spezifisch bei Timing und Gefühl: „Ein sanftes Einblenden“ ist vage. „Ein 400 ms Einblenden mit Ease-Out“ gibt Ihrer KI etwas, womit sie arbeiten kann. Je mehr Sie das Gefühl beschreiben – knackig, federnd, langsam und filmisch – desto näher kommt das erste Ergebnis an das, was Sie sich vorstellen.