Lottie Creator MCP

Lottie Creator MCP

Bir yapay zeka asistanını, yerel MCP köprüsü aracılığıyla Lottie Creator'a bağlayarak komutlarla oluşturma, düzenleme ve animasyon yapma imkanı sağlar.

[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp), uyumlu bir tarayıcı asistanının Creator'ı bu yerel köprü olmadan doğrudan kullanmasını sağlar. Desteklenen tarayıcılarda varsayılan olarak açıktır. Yerel Creator MCP sunucusu üzerinden bağlanmak istiyorsanız bu kılavuzu izleyin.

Lottie Creator MCP, yapay zeka asistanınızı doğrudan animasyon iş akışınıza dahil eder — LottieFiles Creator içinde doğal dil aracılığıyla Lottie animasyonlarını inceleme, oluşturma ve düzenleme araçları sunar. Kurulumu aşağıda bulabilirsiniz.

MCP sunucuları, yapay zeka ajanlarının Model Context Protocol kullanarak veri kaynaklarıyla etkileşime girmesi için standartlaştırılmış bir arayüzün parçasıdır. Lottie Creator MCP, Claude, Cursor ve Windsurf gibi yapay zeka asistanlarını yerel bir köprü aracılığıyla Creator'ın düzenleme araçlarına bağlar.

MCP etkinleştirildiğinde şunları yapabilirsiniz:

✦ Sıfırdan animasyonlar oluşturun

Ne istediğinizi tanımlayın — bir yükleme animasyonu, bir ilerleme çubuğu, bir karakter animasyonu — ve yapay zekanız bunu doğrudan Creator'da katman katman oluştursun.

✦ Mevcut animasyonları düzenleyin ve değiştirin

Renkleri değiştirin, zamanlamayı ayarlayın, easing eğrilerini değiştirin, katmanları yeniden adlandırın veya tüm bir sahneyi yeniden düzenleyin. Yapay zekanız dosyanızın mevcut durumunu okur ve gerçek zamanlı olarak düzenler.

✦ Toplu olarak animasyon varyantları üretin

Aynı anda birden fazla animasyon versiyonu otomatik olarak oluşturun — koyu ve açık temalar, farklı boyutlar, marka renk varyasyonları.

✦ Erişilebilirlik ve marka için animasyonları analiz edin

Yapay zekanızdan animasyonları kontrast sorunları, hareket hızı, renk tutarlılığı veya marka yönergelerinize uygunluk açısından incelemesini ve bulduğu sorunları düzeltmesini isteyin.

✦ Proje iş akışınıza entegre edin

Daha geniş bir proje üzerinde çalışırken anında animasyon varlıkları oluşturun.

MCP'yi kullanmak için, onu yapay zeka istemcinize kurun ve LottieFiles Creator'da etkinleştirin. Aşağıdaki bölümler her adımı ayrıntılı olarak açıklar.

Ön Koşullar

Kurulumdan önce aşağıdakilerin hazır olduğundan emin olun:

✅ 📦 Node.js 18+: MCP paketini npx aracılığıyla çalıştırmak için gereklidir. Node.js'i İndirin →

✅ 🎬 LottieFiles Creator: Tarayıcınızda creator.lottiefiles.com adresini açın ve bu sekmeyi açık tutun.

✅ 🤖 MCP uyumlu bir yapay zeka: Claude, Cursor, Windsurf, VS Code Copilot veya MCP'yi destekleyen başka bir asistan.

Öncelikle, MCP dizelerine ve komutlarına erişebileceğiniz Creator MCP README dosyasına gidin.

MCP'yi Kurma

Tüm yapay zeka araçlarınız için aşağıdaki yapılandırmayı kullanabilirsiniz:

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

Bu dokümantasyon, desteklenen MCP istemcilerimizden bazıları için kurulum adımlarını kapsar. Desteklenen MCP istemcileri için kurulum kılavuzlarının listesini aşağıda bulabilirsiniz:

Desteklenen MCP İstemcileri

Lottie Creator MCP'yi kurmak ve bağlamak için belirli istemcinize yönelik talimatları izleyin. Bazı istemciler ayrıca, yapay zekanızın daha bilinçli ve cilalı animasyonlar üretmesi için hareket tasarımı bilgisi ekleyen becerileri de destekler. 🖇️ İşte LottieFiles hareket tasarım becerisi.

MCP istemciniz için adımları izleyin:

---

**1. Claude Desktop Ayarlarını Açın**

**Ayarlar → Geliştirici** bölümüne gidin ve **"Config'i Düzenle"** seçeneğine tıklayın. Bu, bilgisayarınızda VS Code, Cursor veya herhangi bir metin düzenleyicide düzenleyebileceğiniz bir JSON yapılandırma dosyası açar.

<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 yapılandırmasını ekleyin**

Aşağıdakini, yapılandırma dosyasındaki `mcpServers` nesnesinin içine yapıştırın. JSON'u geçerli tutmak için köşeli parantez/virgül eklemeniz veya çıkarmanız gerekebilir.

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

Yukarıdaki yapılandırmayı yapıştırdıktan sonra yapılandırma dosyasının nasıl görünebileceği aşağıda verilmiştir:

```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. Bağlı olduğunu doğrulayın**

Bir sohbette **"+"** düğmesine tıklayın, **Bağlayıcılar** bölümüne gidin ve `lottiefiles-creator` anahtarının açık olduğunu doğrulayın.

<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. Terminalinizde aşağıdaki komutu çalıştırın**

Bu kadar. Claude Code, MCP'yi otomatik olarak kuracak ve kaydedecektir.

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

#### **Cursor için Lottie Creator MCP'yi Kullanma**

1. `Cmd + Shift + P` (Mac) veya `Ctrl + Shift + P` (Windows/Linux) tuşlarına basın → **"Cursor Ayarları"** araması yapın
2. Kenar çubuğunda **Araçlar ve MCP'ler** bölümüne gidin
3. **"Özel MCP ekle"** seçeneğine tıklayın

<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. Aşağıdakini yapıştırın:

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

Kaydedin ve **Cursor'u tamamen yeniden başlatın** (kapatıp yeniden açın - sadece yeniden yüklemeyin)

Yeniden başlattıktan sonra, **Ayarlar → Araçlar ve MCP** bölümüne gidin ve `lottiefiles-creator` yanında bağlı olduğunu doğrulayan yeşil bir nokta görmelisiniz.

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

**Seçenek A: Derin bağlantı ile kurulum**

1. [LottieFiles MCP sunucusu derin bağlantısına](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) tıklayın. Bu, VS Code'da MCP yapılandırmasını açacaktır.
2. **Kur** düğmesine basın.

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

**Seçenek B: CLI veya yapılandırma dosyası**

Veya CLI üzerinden:

Terminal

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

Veya `.vscode/mcp.json` dosyanıza ekleyin:

JSON — .vscode/mcp.json

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

ℹ️ VS Code'da MCP araçlarını kullanmak için hesabınızda [GitHub Copilot](https://github.com/features/copilot) etkinleştirilmiş olmalıdır.

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Antigravity'nin MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Cline'ın MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. [MCP yapılandırma kılavuzunu](https://github.com/openai/codex/blob/main/docs/config.md) izleyerek şunu kullanın:

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

Veya CLI üzerinden ekleyin:

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

1. `copilot` başlatın 2. `/mcp add` çalıştırın 3. Yapılandırın: - Sunucu adı: `lottiefiles-creator` - Sunucu türü: `Local` - Komut: `npx -y @lottiefiles/creator-mcp@latest` VS Code MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Veya CLI üzerinden:

```
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 ``` Gemini Code Assist MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. JetBrains MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Kiro MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Qoder MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Aşağıdakilerle yerel bir MCP sunucusu ekleyin:

- Ad: `lottiefiles-creator`
- Komut: `npx`
- Bağımsız değişkenler: `y @lottiefiles/creator-mcp@latest`

Warp MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın. Windsurf MCP kurulum belgelerini izleyin ve yukarıdaki yapılandırmayı kullanın.

Lottie Creator'a Bağlanma

1. Lottie Creator'ı Açın

Tarayıcınızda creator.lottiefiles.com adresine gidin ve oturumunuz boyunca bu sekmeyi açık tutun. MCP, Creator ile bu tarayıcı sekmesi aracılığıyla iletişim kurar.

1. Creator'da yerel MCP'yi etkinleştirin

Creator'da Ayarlar → MCP Ayarları → Yerel MCP'yi etkinleştir bölümüne gidin.

1. Bağlantıyı doğrulayın

Creator'da bir bildirim görmelisiniz: Yerel MCP köprüsü bağlandı

Bunu görürseniz, her şey hazır demektir ve komut vermeye başlayabilirsiniz! Animasyon kalitesinin büyük ölçüde hangi modeli kullandığınıza bağlı olduğunu unutmayın, bu nedenle size sunulan en iyi modeli kullandığınızdan emin olun.

Beceriler Hakkında

Beceriler, bir ajanın animasyon görevlerine nasıl yaklaşması gerektiği konusunda rehberlik sağlar — MCP araç çağrılarının bir kombinasyonunu ve yeniden kullanılabilir talimatlar olarak yerleşik derin hareket tasarımı bilgisini kullanır.

Lottie Creator MCP tek tek araçları (katman oluşturma, anahtar kare ayarlama, dolgu ayarlama) sunarken, Beceriler yapay zekanızın bunları nasıl iyi kullanacağını anlamasına yardımcı olur. Bir zıplama ile bir solma için hangi easing eğrisinin uygun olduğunu bilmek, çok öğeli bir girişi nasıl sıralayacağını bilmek veya bir animasyonun mekanik değil de bilinçli hissettirmesi için zamanlamayı nasıl yapılandıracağını bilmek gibi şeyler.

Beceriler MCP bağlantısının yerini almaz veya yeni araçlar eklemez. Hareket tasarımı uzmanlığını, yapay zekanızın animasyonlar üzerinde çalışırken otomatik olarak yararlandığı talimatlara paketleyerek tahmin yürütmeyi azaltırlar.

Hareket tasarım becerisini kurun

Bu komutu terminalinizde bir kez çalıştırın. Claude Code, Cursor, Codex ve GitHub Copilot dahil 40'tan fazla ajanla çalışır.

Terminal

npx skills add LottieFiles/motion-design-skill

✨ Şiddetle önerilir. Sert, mekanik animasyonlar üreten bir yapay zeka ile cilalı, bilinçli hareket üreten bir yapay zeka arasındaki fark neredeyse tamamen bu bağlama sahip olup olmamasına bağlıdır. Bir kez kurun ve her animasyon oturumuna uygulanır.

Becerinin tamamını GitHub'da görüntüleyin → LottieFiles/motion-design-skill

Yetenekler

Lottie Creator MCP, Motion Copilot ve Lottie Creator WebMCP aynı Creator düzenleme yeteneklerini sunar. Kurulumları ve asistan arayüzleri farklıdır.

Alan	Ne isteyebilirsiniz
Sahneler ve katmanlar	Sahneleri inceleyin ve oluşturun; boyutu, kare hızını, süreyi veya önizleme arka planını değiştirin; katmanları yeniden adlandırın, çoğaltın, gruplayın, hizalayın, yeniden sıralayın, gizleyin veya kilitleyin.
Şekiller ve metin	Dikdörtgenler, elipsler, çokgenler, yıldızlar, yollar ve metin oluşturun ve düzenleyin; yazı tiplerini ve metin stillerini değiştirin; animasyon için metni parçalara bölün.
Stil ve efektler	Düz ve gradyan dolguları veya konturları ayarlayın; karışım modları, gölgeler, bulanıklık, renk efektleri, maskeler ve matlar kullanın.
Animasyon ve zamanlama	Anahtar kareler ekleyin, inceleyin, değiştirin, kopyalayın veya kaldırın; easing ayarlayın; dönüşümleri, opaklığı ve rengi canlandırın; hareket yolları, kademeli girişler ve yeniden zamanlama kullanın.
Varlıklar ve sahne incelemesi	SVG'ler, Lottie animasyonları ve görüntüler içe aktarın; PNG veya JPG görüntü katmanlarını vektörlere dönüştürün; sahneyi inceleyin ve oynatma kafasını belirli bir kareye taşıyın.
Temalar ve yeniden kullanılabilir hareket	Hareket belirteci yuvaları oluşturun ve bağlayın, değerlerini güncelleyin ve temalar oluşturun veya değiştirin. Çalışma alanınızın Motion System'inden kayıtlı stilleri ve hareket ön ayarlarını bulun ve uygulayın.
Segmentler ve etkileşim	Adlandırılmış animasyon segmentleri, durum makineleri, durumlar, geçişler ve girdiler oluşturun; tıklama, üzerine gelme ve durum olaylarını eylemlere bağlayın.

Özellik erişimi, Creator çalışma alanınızı ve planınızı takip eder. Animasyon hazır olduğunda, sonucu kaydetmek için Creator'ın dışa aktarma kontrollerini kullanın.

En iyi uygulamalar

• Daha iyi kalite için motion design becerisini yükleyin: MCP, yapay zekanıza araçlar verir. Motion design becerisi, bu araçları iyi kullanma yeteneğini verir — easing eğrileri, zamanlama ilkeleri, koreografi. Tek komutla, belirgin şekilde daha iyi çıktı. Motion design becerisini burada bulabilirsiniz.
• Kendi SVG'lerinizle başlayın, sonra animasyon ekleyin: Yapay zeka, sıfırdan illüstrasyon şekilleri oluştururken tahmin edilemez olabilir. En iyi sonuçlar için, mevcut SVG varlıklarınızı önce Creator'a aktarın, ardından yapay zekanızdan bunları animasyonlandırmasını isteyin. Bu, görsel stilinizi tutarlı tutar ve yapay zekanın en iyi yaptığı şeye — hareket, zamanlama ve sıralama — odaklanmasını sağlar.
  • Bu remix bağlantılarını deneyin
    • Madalya: https://lottie.link/metal
    • Hava durumu: https://lottie.link/weather
    • Grafik: https://lottie.link/graph
    • Posta kutusu: https://lottie.link/mailbox1
• Her zaman size sunulan en iyi modeli kullanın: Animasyon kalitesi doğrudan modelle ölçeklenir. Claude Sonnet veya Opus'a erişiminiz varsa, daha küçük bir model yerine bunları kullanın — zamanlama, sıralama ve mekansal akıl yürütme konusundaki fark belirgindir.
• İstek göndermeden önce katmanlarınızı adlandırın: Yapay zeka, animasyonunuzun yapısını anlamak için katman adlarınızı okur. left_arm, right_leg, bg_circle ve text_headline gibi iyi adlandırılmış katmanlar, doğru öğeleri hedeflemesine, hatalardan kaçınmasına ve karmaşık sahnelerde düzenli kalmasına yardımcı olur. Shape 1 veya Group 4 gibi genel adlar, yapay zekanın çalışmanız üzerinde doğru şekilde ilerlemesini zorlaştırır.
• Karmaşık animasyonları adımlara bölün: "Bana tam bir karşılama animasyonu oluştur" yerine, sahne sahne ilerleyin. Sahneyi oluşturun → şekiller ekleyin → anahtar kareler ekleyin → zamanlamayı iyileştirin. Daha küçük adımlar size daha fazla kontrol verir ve hataları yakalamayı ve düzeltmeyi kolaylaştırır.
• Zamanlama ve his konusunda spesifik olun: "Yumuşak bir geçiş" belirsizdir. "Ease-out ile 400ms'lik bir giriş geçişi" yapay zekanıza üzerinde çalışacak bir şey verir. Hissi ne kadar çok tanımlarsanız — hızlı, zıplayan, yavaş ve sinematik — ilk sonuç hayal ettiğinize o kadar yakın olur.