Lottie Creator MCP

Lottie Creator MCP

undefined

Lottie Creator MCP

Der Lottie Creator MCP bringt Ihren KI-Assistenten direkt in Ihren Animations-Workflow – mit vollem Zugriff auf den LottieFiles Creator, sodass er Lottie-Animationen in Ihrem Auftrag per natürlicher Sprache erstellen und bearbeiten kann. Die Installation finden Sie weiter unten.

MCP-Server sind Teil einer standardisierten Schnittstelle, über die KI-Agenten mithilfe des Model Context Protocol mit Datenquellen interagieren. Der Lottie Creator MCP verbindet KI-Assistenten wie Claude, Cursor und Windsurf über eine lokale Brücke mit der Creator-API – Ihre KI erhält damit denselben vollständigen Zugriff auf Creator wie Sie.

Mit aktiviertem MCP können Sie:

✦ Animationen von Grund auf neu erstellen

Beschreiben Sie, was Sie möchten – einen Lade-Spinner, einen Fortschrittsbalken, eine Charakteranimation – und Ihre KI erstellt sie direkt in Creator, Ebene für Ebene.

✦ Vorhandene Animationen bearbeiten und ändern

Ändern Sie Farben, passen Sie das Timing an, tauschen Sie Easing-Kurven aus, benennen Sie Ebenen um oder überarbeiten Sie eine ganze Szene. Ihre KI liest den aktuellen Zustand Ihrer Datei und bearbeitet sie in Echtzeit.

✦ Animationsvarianten stapelweise generieren

Erstellen Sie automatisch mehrere Versionen einer Animation auf einmal – dunkle und helle Themen, verschiedene Größen, Markenfarbvarianten.

✦ Animationen auf Barrierefreiheit und Markenkonformität analysieren

Bitten Sie Ihre KI, Animationen auf Kontrastprobleme, Bewegungsgeschwindigkeit, Farbkonsistenz oder die Übereinstimmung mit Ihren Markenrichtlinien zu überprüfen – und zu beheben, was sie findet.

✦ In Ihren Projekt-Workflow integrieren

Generieren Sie Animations-Assets spontan während der Arbeit an einem größeren Projekt.

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

Voraussetzungen

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

✅ 📦 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 MCP-unterstützender Assistent.

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

MCP installieren

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 in der folgenden Liste:

Unterstützte MCP-Clients

Befolgen Sie die Anweisungen für Ihren spezifischen 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 gezieltere, 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 **"Config bearbeiten"**. Dies öffnet eine JSON-Konfigurationsdatei auf Ihrem Computer, 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. 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. Verbindung überprüfen**

Klicken Sie in einem Chat auf die Schaltfläche **"+"**, navigieren Sie zu **Connectors** und bestätigen Sie, dass der Schalter `lottiefiles-creator` 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 ist alles. Claude Code installiert und registriert den MCP automatisch.

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

#### **Verwendung 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-Einstellungen"**
2. Gehen Sie in der Seitenleiste zu **Tools & MCPs**
3. Klicken Sie auf **"Benutzerdefinierten MCP hinzufügen"**

<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)

Gehen Sie nach dem Neustart 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) Dies öffnet die MCP-Konfiguration in VS Code.
2. Klicken Sie auf 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) auf Ihrem Konto aktiviert, um MCP-Tools in VS Code zu verwenden.

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Befolgen Sie die MCP-Einrichtungsdokumentation von Antigravity und verwenden Sie die obige Konfiguration. Befolgen Sie die MCP-Einrichtungsdokumentation von Cline und verwenden Sie die obige Konfiguration. Befolgen Sie den [MCP-Konfigurationsleitfaden](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-Einrichtungsdokumentation 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 Gemini Code Assist MCP-Einrichtungsdokumentation und verwenden Sie die obige Konfiguration. Befolgen Sie die JetBrains MCP-Einrichtungsdokumentation und verwenden Sie die obige Konfiguration. Befolgen Sie die Kiro MCP-Einrichtungsdokumentation und verwenden Sie die obige Konfiguration. Befolgen Sie die Qoder MCP-Einrichtungsdokumentation 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 Warp MCP-Einrichtungsdokumentation und verwenden Sie die obige Konfiguration. Befolgen Sie die Windsurf MCP-Einrichtungsdokumentation und verwenden Sie die obige Konfiguration.

Mit Lottie Creator verbinden

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. MCP in Creator aktivieren

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

1. Verbindung bestätigen

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

Wenn Sie dies sehen, sind Sie startklar und können mit dem Prompten beginnen! Denken Sie daran, dass die Animationsqualität stark vom verwendeten Modell abhängt. Verwenden Sie daher unbedingt das beste Ihnen zur Verfügung stehende Modell.

Über Skills

Skills bieten eine Anleitung, wie ein Agent Animationsaufgaben angehen sollte – unter Verwendung einer Kombination aus MCP-Toolaufrufen und tiefgreifendem Motion-Design-Wissen, das als wiederverwendbare Anweisungen eingebettet ist.

Während der Lottie Creator MCP einzelne Werkzeuge bereitstellt (Ebene erstellen, Keyframe setzen, Füllung anpassen), helfen Skills Ihrer KI zu verstehen, wie sie diese gut einsetzt. Dinge wie zu wissen, welche Easing-Kurve zu einem Sprung im Vergleich zu einem Ausblenden passt, wie man einen mehrteiligen Eingang sequenziert oder wie man das Timing so strukturiert, dass eine Animation eher beabsichtigt als mechanisch wirkt.

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

Motion-Design-Skill installieren

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

Terminal

npx skills add LottieFiles/motion-design-skill

✨ Dringend empfohlen. Der Unterschied zwischen einer KI, die steife, mechanische Animationen produziert, und einer, die ausgefeilte, beabsichtigte Bewegung erzeugt, hängt fast ausschließlich davon ab, ob sie diesen Kontext hat. Installieren Sie ihn einmal, und er gilt für jede Animationssitzung.

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

Funktionen

Der MCP gibt Ihrer KI vollen Zugriff auf die Creator-API. Hier ist alles, was sie tun kann:

🎬 Szenenverwaltung

• Szenen erstellen – Name, Größe, Bildrate, Dauer festlegen
• Zwischen Szenen wechseln
• Hintergrundfarbe festlegen (nur Vorschau, nicht exportiert)
• Szeneneigenschaften lesen – Ebenen, Größe, Bildrate
• Szenen in Lottie-JSON exportieren
• Lottie-JSON, dotLottie, SVG oder Bilder importieren

🗂 Ebenenverwaltung

• Sichtbarkeit, Sperrzustand und Fokus festlegen
• Timing steuern – Startbild, Endbild, Versatz
• Füllmethoden festlegen (16 Modi, darunter multiplizieren, negativ multiplizieren, überlagern)
• Masken und Matten anwenden und animieren
• Ebenen ausrichten und spiegeln
• Transformationen animieren – Position, Drehung, Skalierung, Scherung

🔷 Formenerstellung

• Rechteck – Position, Größe, Eckenrundung
• Ellipse – Position, Größe
• Polygon – Punkte, Radius, Rundung
• Stern – Innen-/Außenradius, Punkte
• Pfad – benutzerdefinierte Bézierkurve mit vollständiger Tangentensteuerung
• Gruppe – vorhandene Formen gruppieren

🎨 Füllungen & Konturen

• Einfarbige Füllung – statisches oder animiertes RGB
• Lineare Verlaufsfüllung – benutzerdefinierte Start-/Endpunkte
• Radiale Verlaufsfüllung – Glanzlichwinkel und -länge
• Einfarbige und Verlaufskonturen – mit animierbarer Breite
• Pfade zuschneiden – Zeichnung animieren (Start-%, Ende-%, Versatz)

⏱️ Animation & Keyframes

• Keyframes an bestimmten Bildern mit Werten hinzufügen
• Statische Werte festlegen (keine Animation)
• Keyframes lesen, überprüfen und entfernen
• Easing festlegen – Linear oder kubische Bézierkurve (x1, y1, x2, y2)
• Animieren: Position, Drehung, Skalierung, Deckkraft, Farbe, Pfad und mehr

🖼 Assets & Wiedergabe

• Assets auflisten, klonen und entfernen (Szenen und Bilder)
• Bildeigenschaften lesen – Breite, Höhe, base64-URI
• Abspielen, pausieren und zu bestimmten Bildern springen
• Aktuelles Bild und Wiedergabestatus lesen
• Ausgewählte Knoten und Keyframes lesen

Demnächst: Zustandsautomaten und Motion Tokens

Bewährte Praktiken

• Installiere den Motion-Design-Skill für bessere Qualität: Der MCP stellt deiner KI die Werkzeuge zur Verfügung. Der Motion-Design-Skill verleiht ihr das Urteilsvermögen, sie gut einzusetzen – Easing-Kurven, Timing-Prinzipien, Choreografie. Ein Befehl, deutlich bessere Ergebnisse. Den Motion-Design-Skill findest du hier.
• Beginne mit deinen eigenen SVGs und animiere dann: KI kann unberechenbar sein, wenn sie Illustrationsformen von Grund auf generiert. Für die besten Ergebnisse importiere zuerst deine vorhandenen SVG-Assets in Creator und bitte dann deine KI, sie zu animieren. So bleibt dein visueller Stil konsistent und die KI kann sich auf das konzentrieren, was sie am besten kann – Bewegung, Timing und Abfolge.
  • Probiere diese Remix-Links aus
    • Medaille: https://lottie.link/metal
    • Wetter: https://lottie.link/weather
    • Diagramm: https://lottie.link/graph
    • Briefkasten: https://lottie.link/mailbox1
• Verwende immer das beste dir verfügbare Modell: Die Animationsqualität skaliert direkt mit dem Modell. Wenn du Zugriff auf Claude Sonnet oder Opus hast, nutze es anstelle eines kleineren Modells – der Unterschied im Umgang mit Timing, Abfolge und räumlichem Denken ist spürbar.
• Benenne deine Ebenen, bevor du die Eingabeaufforderung formulierst: Die KI liest deine Ebenennamen, um die Struktur deiner Animation zu verstehen. Gut benannte Ebenen wie left_arm, right_leg, bg_circle und text_headline helfen ihr, die richtigen Elemente anzuvisieren, Fehler zu vermeiden und in komplexen Szenen organisiert zu bleiben. Allgemeine Namen wie Shape 1 oder Group 4 erschweren es der KI, präzise auf deiner Arbeit aufzubauen.
• Unterteile komplexe Animationen in Schritte: Anstatt „Erstelle mir eine vollständige Onboarding-Animation“, gehe Szene für Szene vor. Erstelle die Szene → füge Formen hinzu → füge Keyframes hinzu → verfeinere das Timing. Kleinere Schritte geben dir mehr Kontrolle und machen Fehler leichter erkenn- und korrigierbar.
• Sei präzise bei Timing und Gefühl: „Eine sanfte Überblendung“ ist vage. „Eine 400ms Einblendung mit Ease-Out“ gibt deiner KI etwas, womit sie arbeiten kann. Je mehr du das Gefühl beschreibst – knackig, federnd, langsam und cineastisch – desto näher wird das erste Ergebnis an deiner Vorstellung sein.