Lottie Creator MCP

resmi

Lottie Creator MCP menghadirkan asisten AI Anda langsung ke dalam alur kerja animasi — memberinya akses penuh ke LottieFiles Creator sehingga dapat membuat dan mengedit animasi Lottie atas nama Anda melalui bahasa alami.

Lihat di lottie.link

Apa yang bisa Anda lakukan dengan Lottie Creator MCP?

  • Create animations from scratch — describe an animation like a loading spinner or character motion and the AI builds it in Lottie Creator layer by layer.
  • Edit existing animations — ask the AI to change colors, adjust timing, swap easing curves, rename layers, or refactor a scene using the current file state.
  • Batch generate animation variants — produce multiple versions at once, such as dark/light themes, different sizes, or brand color variations.
  • Inspect animations for accessibility and brand — request analysis for contrast issues, motion speed, color consistency, or brand alignment, then apply fixes.
  • Manage scenes and layers — create and switch scenes, set visibility and blend modes, apply masks and mattes, and animate transforms like position, rotation, and scale.
  • Animate with keyframes and easing — add, read, or remove keyframes on properties such as opacity, color, and path, and set linear or cubic-bezier easing.

Dokumentasi

Lottie Creator MCP

undefined

Lottie Creator MCP

Lottie Creator MCP menghadirkan asisten AI Anda langsung ke dalam alur kerja animasi — memberinya akses penuh ke LottieFiles Creator sehingga ia dapat membuat dan mengedit animasi Lottie atas nama Anda melalui bahasa alami. Anda dapat melihat panduan instalasi di bagian bawah.

Server MCP adalah bagian dari antarmuka standar bagi agen AI untuk berinteraksi dengan sumber data menggunakan Model Context Protocol. Lottie Creator MCP menghubungkan asisten AI seperti Claude, Cursor, dan Windsurf ke API Creator melalui jembatan lokal — artinya AI Anda mendapatkan akses penuh yang sama ke Creator seperti yang Anda miliki.

Dengan MCP yang diaktifkan, Anda dapat:

✦ Membuat animasi dari awal

Jelaskan apa yang Anda inginkan — spinner pemuatan, bilah kemajuan, animasi karakter — dan AI Anda akan membangunnya langsung di Creator, lapis demi lapis.

✦ Mengedit dan memodifikasi animasi yang sudah ada

Ubah warna, sesuaikan waktu, tukar kurva easing, ganti nama lapisan, atau refaktor seluruh adegan. AI Anda membaca status terkini dari berkas Anda dan mengeditnya secara real time.

✦ Menghasilkan varian animasi secara massal

Secara otomatis menghasilkan beberapa versi animasi sekaligus — tema gelap dan terang, ukuran berbeda, variasi warna merek.

✦ Menganalisis animasi untuk aksesibilitas dan merek

Minta AI Anda untuk memeriksa animasi terkait masalah kontras, kecepatan gerakan, konsistensi warna, atau keselarasan dengan panduan merek Anda — dan perbaiki apa yang ditemukannya.

✦ Integrasikan ke dalam alur kerja proyek Anda

Hasilkan aset animasi dengan cepat saat mengerjakan proyek yang lebih luas.

Untuk menggunakan MCP, instal di klien AI Anda dan aktifkan di LottieFiles Creator. Bagian di bawah ini memandu setiap langkahnya.

Prasyarat

Sebelum menginstal, pastikan Anda telah menyiapkan hal-hal berikut:

✅ 📦 Node.js 18+: Diperlukan untuk menjalankan paket MCP melalui npx. Unduh Node.js →

✅ 🎬 LottieFiles Creator: Buka creator.lottiefiles.com di peramban Anda dan biarkan tab ini tetap terbuka.

✅ 🤖 AI yang kompatibel dengan MCP: Claude, Cursor, Windsurf, VS Code Copilot, atau asisten lain yang mendukung MCP.

Pertama, buka berkas README Creator MCP tempat Anda dapat mengakses string dan perintah MCP.

Menginstal MCP

Untuk semua perangkat AI Anda, Anda dapat menggunakan konfigurasi berikut:

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

Dokumentasi ini mencakup langkah-langkah instalasi untuk beberapa klien MCP yang didukung. Untuk daftar panduan instalasi bagi klien MCP yang didukung, lihat daftar di bawah ini:

Klien MCP yang Didukung

Ikuti instruksi untuk klien spesifik Anda untuk menginstal dan menghubungkan Lottie Creator MCP. Beberapa klien juga mendukung skills, yang menambahkan pengetahuan desain gerak sehingga AI Anda dapat menghasilkan animasi yang lebih terarah dan halus. 🖇️ Berikut adalah skill desain gerak LottieFiles.

Ikuti langkah-langkah untuk klien MCP Anda:

**1. Buka Pengaturan Claude Desktop** 
Arahkan ke **Settings → Developer** dan klik **"Edit Config"**. Ini akan membuka berkas konfigurasi JSON di komputer Anda yang dapat diedit di VS Code, Cursor, atau editor teks apa pun.

<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. Tambahkan konfigurasi MCP**

Tempelkan yang berikut ini ke dalam berkas konfigurasi di dalam objek `mcpServers`. Anda mungkin perlu menambah atau menghapus tanda kurung/koma agar JSON tetap valid.

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

Berikut adalah tampilan berkas konfigurasi setelah menempelkan konfigurasi di atas:

```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. Verifikasi koneksi**

Klik tombol **"+"** dalam obrolan, arahkan ke **Connectors**, dan konfirmasikan bahwa tombol `lottiefiles-creator` aktif.

<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. Jalankan perintah berikut di terminal Anda** 
Selesai. Claude Code akan menginstal dan mendaftarkan MCP secara otomatis.

```
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```
#### **Menggunakan Lottie Creator MCP untuk Cursor** 
1. Tekan `Cmd + Shift + P` (Mac) atau `Ctrl + Shift + P` (Windows/Linux) → cari **"Cursor Settings"**
2. Di bilah sisi, buka **Tools & MCPs**
3. Klik **"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. Tempelkan:

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

Simpan dan **mulai ulang Cursor sepenuhnya** (keluar dan buka kembali - bukan hanya muat ulang)

Setelah mulai ulang, buka **Settings → Tools & MCP** dan Anda akan melihat titik hijau di samping `lottiefiles-creator` yang mengonfirmasi koneksi.

<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==" />
**Opsi A: Instalasi tautan langsung** 
1. Klik [tautan langsung server 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) Ini akan membuka konfigurasi MCP di VS Code.
2. Tekan tombol **Install**.

<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=" />

**Opsi B: CLI atau berkas konfigurasi**

Atau melalui CLI:

Terminal

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

Atau tambahkan ke `.vscode/mcp.json` Anda:

JSON — .vscode/mcp.json

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

ℹ️ Anda memerlukan [GitHub Copilot](https://github.com/features/copilot) yang diaktifkan di akun Anda untuk menggunakan alat MCP di VS Code.
``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Ikuti dokumen pengaturan MCP Antigravity dan gunakan konfigurasi di atas. Ikuti dokumen pengaturan MCP Cline dan gunakan konfigurasi di atas. Ikuti [panduan konfigurasi MCP](https://github.com/openai/codex/blob/main/docs/config.md) menggunakan: 
```
[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]
```

Atau tambahkan melalui CLI:

```
codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```
1. Mulai `copilot` 2. Jalankan `/mcp add` 3. Konfigurasikan: - Nama server: `lottiefiles-creator` - Tipe server: `Local` - Perintah: `npx -y @lottiefiles/creator-mcp@latest` Ikuti dokumen pengaturan MCP VS Code dan gunakan konfigurasi di atas. Atau melalui 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 ``` Ikuti dokumen pengaturan MCP Gemini Code Assist dan gunakan konfigurasi di atas. Ikuti dokumen pengaturan MCP JetBrains dan gunakan konfigurasi di atas. Ikuti dokumen pengaturan MCP Kiro dan gunakan konfigurasi di atas. Ikuti dokumen pengaturan MCP Qoder dan gunakan konfigurasi di atas. Tambahkan server MCP lokal dengan: 
- Nama: `lottiefiles-creator`
- Perintah: `npx`
- Argumen: `y @lottiefiles/creator-mcp@latest`
Ikuti dokumen pengaturan MCP Warp dan gunakan konfigurasi di atas. Ikuti dokumen pengaturan MCP Windsurf dan gunakan konfigurasi di atas.

Menghubungkan ke Lottie Creator

  1. Buka Lottie Creator

Arahkan ke creator.lottiefiles.com di peramban Anda dan biarkan tab ini tetap terbuka selama sesi Anda. MCP berkomunikasi dengan Creator melalui tab peramban ini.

  1. Aktifkan MCP di Creator

Di Creator, buka Settings → MCP Settings → Enable MCP.

Lottie Creator Settings → MCP Settings with Enable MCP
  1. Konfirmasi koneksi

Anda akan melihat notifikasi di Creator: Local MCP bridge connected

Lottie Creator notification: Local MCP bridge connected

Jika Anda melihat ini, Anda sudah siap dan siap untuk mulai memberikan perintah! Perlu diingat, kualitas animasi sangat bergantung pada model yang Anda gunakan, jadi pastikan untuk menggunakan model terbaik yang tersedia untuk Anda.

Lottie Creator top bar with a blue MCP connection indicator next to the file name

Tentang Skills

Skills memberikan panduan tentang bagaimana agen harus mendekati tugas animasi — menggunakan kombinasi panggilan alat MCP dan pengetahuan desain gerak mendalam yang disematkan sebagai instruksi yang dapat digunakan kembali.

Sementara Lottie Creator MCP mengekspos alat individual (buat lapisan, atur keyframe, sesuaikan isian), Skills membantu AI Anda memahami cara menggunakannya dengan baik. Hal-hal seperti mengetahui kurva easing mana yang cocok untuk pantulan vs. pudar, cara mengurutkan masuknya multi-elemen, atau cara menyusun waktu sehingga animasi terasa terarah daripada mekanis.

Skills tidak menggantikan koneksi MCP atau menambahkan alat baru. Mereka mengurangi tebakan dengan mengemas keahlian desain gerak ke dalam instruksi yang digunakan AI Anda secara otomatis setiap kali bekerja pada animasi.

Instal skill desain gerak

Jalankan perintah ini sekali di terminal Anda. Ini berfungsi dengan 40+ agen termasuk Claude Code, Cursor, Codex, dan GitHub Copilot.

Terminal

npx skills add LottieFiles/motion-design-skill

✨ Sangat direkomendasikan. Perbedaan antara AI yang menghasilkan animasi kaku dan mekanis dengan yang menghasilkan gerakan halus dan terarah hampir seluruhnya bergantung pada apakah ia memiliki konteks ini. Instal sekali dan ini berlaku untuk setiap sesi animasi.

Lihat skill lengkap di GitHub → LottieFiles/motion-design-skill

Kemampuan

MCP memberikan AI Anda akses penuh ke API Creator. Berikut semua yang dapat dilakukannya:

🎬 Manajemen Adegan

  • Membuat adegan — atur nama, ukuran, framerate, durasi
  • Beralih antar adegan
  • Atur warna latar belakang (hanya pratinjau, tidak diekspor)
  • Baca properti adegan — lapisan, ukuran, framerate
  • Ekspor adegan ke Lottie JSON
  • Impor Lottie JSON, dotLottie, SVG, atau gambar

🗂 Manajemen Lapisan

  • Atur visibilitas, status kunci, dan fokus
  • Kontrol waktu — bingkai mulai, bingkai akhir, offset
  • Atur mode campuran (16 mode termasuk multiply, screen, overlay)
  • Terapkan dan animasikan masker dan matte
  • Sejajarkan dan balik lapisan
  • Animasikan transformasi — posisi, rotasi, skala, skew

🔷 Pembuatan Bentuk

  • Persegi panjang — posisi, ukuran, kebulatan sudut
  • Elips — posisi, ukuran
  • Poligon — titik, radius, kebulatan
  • Bintang — radius dalam/luar, titik
  • Path — bezier kustom dengan kontrol tangen penuh
  • Grup — kelompokkan bentuk yang ada bersama-sama

🎨 Isian & Goresan

  • Isian warna solid — RGB statis atau animasi
  • Isian gradien linear — titik awal/akhir kustom
  • Isian gradien radial — sudut sorotan dan panjang
  • Goresan solid dan gradien — dengan lebar yang dapat dianimasikan
  • Trim path — animasikan gambar (mulai %, akhir %, offset)

⏱️ Animasi & Keyframe

  • Tambahkan keyframe pada bingkai tertentu dengan nilai
  • Atur nilai statis (tanpa animasi)
  • Baca, periksa, dan hapus keyframe
  • Atur easing — Linear atau Cubic Bezier (x1, y1, x2, y2)
  • Animasikan: posisi, rotasi, skala, opasitas, warna, path, dan lainnya

🖼 Aset & Pemutaran

  • Daftar, kloning, dan hapus aset (adegan dan gambar)
  • Baca properti gambar — lebar, tinggi, URI base64
  • Putar, jeda, dan lompat ke bingkai tertentu
  • Baca bingkai saat ini dan status pemutaran
  • Baca node dan keyframe yang dipilih

Segera hadir: State Machines dan Motion Tokens

Praktik terbaik

  • Pasang skill desain gerak untuk kualitas yang lebih baik: MCP memberi AI Anda alatnya. Skill desain gerak memberinya penilaian untuk menggunakannya dengan baik — kurva easing, prinsip timing, koreografi. Satu perintah, hasil yang jauh lebih baik. Skill desain gerak dapat ditemukan di sini.
  • Mulai dengan SVG Anda sendiri, lalu animasikan: AI bisa tidak terduga saat menghasilkan bentuk ilustrasi dari nol. Untuk hasil terbaik, impor aset SVG Anda yang sudah ada ke Creator terlebih dahulu, lalu minta AI Anda untuk menganimasikannya. Ini menjaga gaya visual Anda tetap konsisten dan membiarkan AI fokus pada keahliannya — gerak, timing, dan pengurutan.
  • Selalu gunakan model terbaik yang tersedia untuk Anda: Kualitas animasi berbanding lurus dengan modelnya. Jika Anda memiliki akses ke Claude Sonnet atau Opus, gunakan itu daripada model yang lebih kecil — perbedaannya dalam menangani timing, pengurutan, dan penalaran spasial sangat terasa.
  • Beri nama layer Anda sebelum memberi perintah: AI membaca nama layer Anda untuk memahami struktur animasi Anda. Layer dengan nama yang baik seperti left_arm, right_leg, bg_circle, dan text_headline membantunya menargetkan elemen yang tepat, menghindari kesalahan, dan tetap terorganisir di seluruh adegan yang kompleks. Nama generik seperti Shape 1 atau Group 4 mempersulit AI untuk melanjutkan pekerjaan Anda dengan akurat.
  • Pecah animasi kompleks menjadi langkah-langkah: Daripada "buatkan saya animasi onboarding lengkap," lakukan adegan demi adegan. Buat adegan → tambahkan bentuk → tambahkan keyframe → sempurnakan timing. Langkah-langkah kecil memberi Anda lebih banyak kendali dan membuat kesalahan lebih mudah ditemukan dan diperbaiki.
  • Spesifik tentang timing dan nuansa: "Fade yang halus" itu tidak jelas. "Fade-in 400ms dengan ease-out" memberi AI Anda sesuatu untuk dikerjakan. Semakin Anda mendeskripsikan nuansanya — cepat, memantul, lambat dan sinematik — semakin dekat hasil pertama dengan yang Anda bayangkan.