Lottie Creator MCP

Lottie Creator MCP

Hubungkan asisten AI ke Lottie Creator melalui jembatan MCP lokal untuk membuat, mengedit, dan menganimasikan menggunakan perintah.

[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp) memungkinkan asisten browser yang kompatibel menggunakan Creator secara langsung, tanpa jembatan lokal ini. Fitur ini aktif secara default di browser yang didukung. Ikuti panduan ini jika Anda ingin terhubung melalui server MCP Creator lokal.

Lottie Creator MCP membawa asisten AI Anda langsung ke alur kerja animasi Anda — memberinya alat untuk memeriksa, membangun, dan mengedit animasi Lottie di LottieFiles Creator melalui bahasa alami. Anda dapat melihat petunjuk pemasangan lebih lanjut di 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 alat pengeditan Creator melalui jembatan lokal.

Dengan MCP yang diaktifkan, Anda dapat:

✦ Membuat animasi dari awal

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

✦ Mengedit dan memodifikasi animasi yang ada

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

✦ Membuat variasi animasi secara batch

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 untuk masalah kontras, kecepatan gerakan, konsistensi warna, atau keselarasan dengan pedoman merek Anda — dan perbaiki apa yang ditemukannya.

✦ Mengintegrasikan 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 langkah.

Prasyarat

Sebelum menginstal, pastikan Anda memiliki hal berikut:

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

✅ 🎬 LottieFiles Creator: Buka creator.lottiefiles.com di browser 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 file README Creator MCP di mana Anda dapat mengakses string dan perintah MCP.

Menginstal MCP

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

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

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

Klien MCP yang Didukung

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

Ikuti langkah-langkah untuk klien MCP Anda:

---

**1. Buka Pengaturan Claude Desktop**

Navigasikan ke **Settings → Developer** dan klik **"Edit Config"**. Ini membuka file konfigurasi JSON di komputer Anda yang dapat Anda edit 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**

Tempel berikut ini ke dalam file 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 ini tampilan file 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 bahwa itu terhubung**

Klik tombol **"+"** di obrolan, navigasikan ke **Connectors**, dan konfirmasikan bahwa toggle `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**

Itu saja. 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 sidebar, 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. Tempel:

```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 memulai ulang, buka **Settings → Tools & MCP** dan Anda akan melihat titik hijau di sebelah `lottiefiles-creator` yang mengonfirmasi bahwa itu terhubung.

<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: Instal tautan dalam**

1. Klik [tautan dalam 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 file 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

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

1. Aktifkan MCP lokal di Creator

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

1. Konfirmasikan koneksi

Anda akan melihat notifikasi di Creator: Local MCP bridge connected

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

Tentang Skills

Skills memberikan panduan tentang bagaimana agen harus mendekati tugas animasi — menggunakan kombinasi panggilan alat MCP dan pengetahuan desain gerakan mendalam yang tertanam 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. fade, cara mengurutkan masuknya multi-elemen, atau cara menyusun waktu sehingga animasi terasa disengaja daripada mekanis.

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

Instal skill desain gerakan

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 disarankan. Perbedaan antara AI yang menghasilkan animasi kaku dan mekanis dan yang menghasilkan gerakan halus dan disengaja hampir seluruhnya tergantung pada apakah ia memiliki konteks ini. Instal sekali dan itu berlaku untuk setiap sesi animasi.

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

Kemampuan

Lottie Creator MCP, Motion Copilot, dan Lottie Creator WebMCP menawarkan kemampuan pengeditan Creator yang sama. Pengaturan dan antarmuka asisten mereka berbeda.

Area	Apa yang dapat Anda minta
Adegan dan lapisan	Periksa dan buat adegan; ubah ukuran, frame rate, durasi, atau latar belakang pratinjau; ganti nama, duplikat, kelompokkan, ratakan, urutkan ulang, sembunyikan, atau kunci lapisan.
Bentuk dan teks	Buat dan edit persegi panjang, elips, poligon, bintang, jalur, dan teks; ubah font dan gaya teks; pisahkan teks menjadi bagian-bagian untuk animasi.
Gaya dan efek	Sesuaikan isian atau goresan solid dan gradien; gunakan mode campuran, bayangan, blur, efek warna, masker, dan matte.
Animasi dan waktu	Tambahkan, periksa, ubah, salin, atau hapus keyframe; sesuaikan easing; animasikan transformasi, opasitas, dan warna; gunakan jalur gerakan, masuk bertahap, dan pengaturan ulang waktu.
Aset dan inspeksi adegan	Impor SVG, animasi Lottie, dan gambar; konversi lapisan gambar PNG atau JPG menjadi vektor; periksa adegan dan pindahkan playhead ke bingkai tertentu.
Tema dan gerakan yang dapat digunakan kembali	Buat dan tautkan slot token gerakan, perbarui nilainya, dan buat atau ganti tema. Temukan dan terapkan gaya tersimpan dan preset gerakan dari Motion System ruang kerja Anda.
Segmen dan interaktivitas	Buat segmen animasi bernama, mesin status, status, transisi, dan input; hubungkan klik, hover, dan peristiwa status ke tindakan.

Akses fitur mengikuti ruang kerja dan paket Creator Anda. Saat animasi siap, gunakan kontrol ekspor Creator untuk menyimpan hasilnya.

Praktik terbaik

• Pasang skill desain motion untuk kualitas yang lebih baik: MCP memberi AI Anda alat-alatnya. Skill desain motion memberinya penilaian untuk menggunakannya dengan baik — kurva easing, prinsip timing, koreografi. Satu perintah, hasil yang jauh lebih baik. Skill desain motion dapat ditemukan di sini.
• Mulai dengan SVG Anda sendiri, lalu animasikan: AI bisa tidak dapat diprediksi saat membuat 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 memungkinkan AI fokus pada apa yang paling baik dilakukannya — motion, timing, dan pengurutan.
  • Coba tautan remix ini
    • Medali: https://lottie.link/metal
    • Cuaca: https://lottie.link/weather
    • Grafik: https://lottie.link/graph
    • Kotak surat: https://lottie.link/mailbox1
• Selalu gunakan model terbaik yang tersedia untuk Anda: Kualitas animasi berbanding lurus dengan model. Jika Anda memiliki akses ke Claude Sonnet atau Opus, gunakan itu daripada model yang lebih kecil — perbedaan dalam cara menangani timing, pengurutan, dan penalaran spasial sangat terlihat.
• Beri nama layer Anda sebelum memberi perintah: AI membaca nama layer Anda untuk memahami struktur animasi Anda. Nama layer yang baik seperti left_arm, right_leg, bg_circle, dan text_headline membantunya menargetkan elemen yang tepat, menghindari kesalahan, dan tetap terorganisir di seluruh scene yang kompleks. Nama generik seperti Shape 1 atau Group 4 membuat AI lebih sulit untuk membangun karya Anda secara akurat.
• Pecah animasi kompleks menjadi langkah-langkah: Alih-alih "buatkan saya animasi onboarding lengkap," lakukan scene demi scene. Buat scene → tambahkan bentuk → tambahkan keyframe → sempurnakan timing. Langkah yang lebih kecil memberi Anda lebih banyak kontrol dan membuat kesalahan lebih mudah ditemukan dan diperbaiki.
• Bersikaplah spesifik tentang timing dan nuansa: "Fade yang halus" itu ambigu. "Fade-in 400ms dengan ease-out" memberi AI Anda sesuatu untuk dikerjakan. Semakin banyak Anda mendeskripsikan nuansa — cepat, memantul, lambat dan sinematik — semakin dekat hasil pertama dengan apa yang Anda bayangkan.