SVGator MCP

Server MCP SVGator — Dokumentasi

Server MCP menghubungkan asisten AI Anda langsung ke SVGator, alat animasi SVG online. Dari sana, asisten Anda dapat bekerja di dalam proyek Anda untuk menelusuri, memeriksa, mengedit, membuat, dan mengekspor proyek tersebut untuk Anda, menangani semuanya mulai dari "edit warna sesuai brand kit ini" hingga "buatkan saya animasi logo reveal dan ekspor sebagai file khusus CSS."

• Endpoint: https://mcp.svgator.com/mcp
• Protokol: Model Context Protocol melalui HTTP Streamable
• Autentikasi: OAuth 2.1 (masuk dengan akun SVGator Anda — lihat Memulai)

Yang dapat Anda lakukan

Kemampuan	Alat	Contoh prompt
Menelusuri proyek Anda	list_projects, get_project, get_profile	"Daftar proyek SVGator saya"
Memeriksa struktur proyek	get_skeleton, read_part	"Elemen apa saja yang ada di proyek X, dan mana yang dianimasikan?"
Mengedit proyek secara bertahap	edit_part	"Buat lingkaran menjadi merah dan ulangi pantulannya selamanya"
Membuat atau mengganti seluruh proyek	create_project, replace_project	"Buatkan saya spinner loading animasi baru"
Menduplikasi, memindahkan & mengganti nama proyek	duplicate_project, move_project	"Salin proyek X ke folder 'Draf' saya"
Mengelola aset yang dapat digunakan kembali	list_assets, get_asset, create_asset, update_asset	"Simpan ikon ini sebagai aset yang dapat digunakan kembali"
Mengatur proyek ke dalam folder	list_folders, get_folder, create_folder, update_folder	"Buat folder 'Pemasaran' dan masukkan proyek ini ke dalamnya"
Mencari referensi authoring	describe_shape	(digunakan oleh asisten untuk mendapatkan bentuk JSON yang tepat)
Mengekspor ke format yang dapat dikirimkan	export_project, get_render	"Ekspor proyek X sebagai video MP4"
Mendapatkan panduan desain gerak	sumber daya skill + prompt	"Art-direct logo reveal, lalu buat"

Setiap proyek yang dikembalikan server menyertakan editor_url — tautan langsung yang membuka proyek di editor SVGator, sehingga Anda selalu dapat melanjutkan secara manual dari bagian yang ditinggalkan asisten.

Alat

Server menyediakan 22 alat. Lihat Referensi alat untuk tabel parameter dan output lengkap.

Proyek

• list_projects — Mencantumkan proyek SVGator pengguna yang diautentikasi (terbaru terlebih dahulu), dengan tautan langsung editor_url per baris dan jumlah total untuk paginasi.
• get_project — Mendapatkan ringkasan proyek tunggal: judul, pratinjau, folder, stempel waktu, ukuran kanvas, warna latar belakang, timeline animasi, dan pengaturan ekspor yang disimpan.
• create_project — Membuat proyek SVGator baru dari JSON proyek lengkap, dimiliki oleh pengguna yang diautentikasi.
• replace_project — Mengganti seluruh JSON proyek yang ada dengan proyek lengkap yang disediakan (validasi berjalan sebelum mutasi apa pun).
• duplicate_project — Membuat salinan proyek yang ada, secara opsional ke folder lain atau dengan judul baru.
• move_project — Memindahkan proyek ke folder lain dan/atau mengganti namanya.

Memeriksa & mengedit proyek

• get_skeleton — Mendapatkan peta struktur proyek yang ringan dan hemat token (pohon elemen hanya dengan nama dan jumlah keyframe, tidak pernah nilainya) — langkah 1 dari loop pengeditan.
• read_part — Membaca nilai atau elemen tepat di jalur yang ditautkan id — langkah 2 dari loop pengeditan.
• edit_part — Menerapkan satu edit yang divalidasi (perbarui, sisipkan, pindahkan, atau hapus) di suatu jalur dan menyimpannya — langkah 3 dari loop pengeditan.
• describe_shape — Mendapatkan bentuk JSON yang tepat dari satu blok penyusun (elemen atau animator) sebelum authoring, sehingga nama bidang tidak pernah ditebak.

Aset

• list_assets — Mencantumkan aset yang dapat digunakan kembali milik pengguna yang diautentikasi (item SVG statis atau animasi), terbaru terlebih dahulu.
• get_asset — Mendapatkan satu aset termasuk payload data ({document, definitions}) lengkapnya.
• create_asset — Membuat aset baru yang dapat digunakan kembali dari dokumen aset.
• update_asset — Mengganti seluruh dokumen aset yang ada.

Folder

• list_folders — Mencantumkan folder pengguna yang diautentikasi (label tempat proyek disimpan).
• get_folder — Mendapatkan satu folder (id, judul, stempel waktu) berdasarkan id-nya.
• create_folder — Membuat folder baru untuk mengatur proyek.
• update_folder — Mengganti nama folder yang ada.

Ekspor & akun

• export_project — Mengekspor proyek ke format yang dapat dikirimkan (SVG, Lottie, React Native, Flutter, video, atau GIF), dengan penggantian per-ekspor opsional.
• get_render — Memeriksa status render raster (video/GIF) yang dimulai oleh export_project dan mendapatkan URL unduhan yang ditandatangani setelah selesai.
• get_profile — Mendapatkan profil pelanggan yang diautentikasi: nama, email, paket, dan tim.

Peta dokumentasi

Dokumen	Untuk	Mencakup
Memulai	Semua orang	Menghubungkan dari claude.ai, Claude Desktop, Claude Code, dan klien MCP lainnya; autentikasi; privasi
Referensi alat	Integrator / yang penasaran	Setiap alat dengan tabel parameter dan output lengkap
Mengedit proyek	Integrator / pengguna mahir	Loop navigasi → baca → edit → verifikasi, pengalamatan jalur, aturan authoring
Mengekspor proyek	Semua orang	Format, mode pengiriman, opsi ekspor, pemeriksaan render
Skill & sumber daya	Integrator	Skill desain gerak, sumber daya MCP, dan prompt
Pemecahan masalah	Semua orang	Masalah koneksi, kesalahan umum, dan artinya

Persyaratan

• Akun SVGator (daftar). Ekspor dihitung berdasarkan batas paket Anda persis seperti yang dilakukan di editor.
• Untuk terhubung dari claude.ai / Claude Desktop, konektor kustom memerlukan paket Claude Pro, Max, Team, atau Enterprise. Claude Code dan klien MCP lainnya terhubung langsung ke endpoint.

Cara kerjanya (satu paragraf)

Server adalah server MCP jarak jauh: klien MCP Anda (Claude, atau klien apa pun yang menggunakan HTTP Streamable) terhubung ke https://mcp.svgator.com/mcp dan memasukkan Anda melalui login OAuth reguler SVGator. Kredensial SVGator Anda tetap hanya di sisi server — model AI tidak pernah melihat token akses atau kunci rahasia Anda; model hanya menerima hasil alat (daftar proyek, peta struktur, file yang diekspor). Input alat divalidasi terhadap skema yang dipublikasikan, dan permintaan yang tidak valid mengembalikan kesalahan deskriptif yang dapat dibaca dan diperbaiki oleh asisten.

⚙️ Kemampuan

Server MCP mengubah SVGator menjadi sesuatu yang dapat Anda kendalikan dengan bahasa alami. Alih-alih mengklik melalui editor, Anda menjelaskan apa yang Anda inginkan dan asisten AI Anda melakukannya: membuka proyek, mengubah warna, menganimasikan logo, atau mengekspor file jadi.

Ini dibuat untuk desainer yang menginginkan asisten untuk menangani bagian animasi yang berulang, untuk tim pemasaran yang membutuhkan animasi siap-web tanpa menunggu desainer untuk setiap perubahan kecil, dan untuk pengembang yang menginginkan ekspor siap produksi (Lottie, React Native, Flutter, atau SVG) yang langsung masuk ke produk. Setiap proyek dilengkapi dengan tautan editor langsung, sehingga Anda selalu dapat membukanya dan menyelesaikannya secara manual, menghemat token.

Inilah yang dapat dilakukan asisten Anda setelah terhubung:

🗂️ Proyek dan Aset

• Mencantumkan proyek: terbaru terlebih dahulu, masing-masing dengan tautan editor langsung
• Mencari dan menelusuri halaman di perpustakaan besar
• Membaca pengaturan proyek: ukuran kanvas, latar belakang, timeline, dan pengaturan ekspor
• Membuat proyek dari definisi lengkap
• Menimpa proyek yang ada
• Menduplikasi proyek: ke dalam folder yang sama atau folder lain
• Memindahkan atau mengganti nama proyek
• Mengatur proyek ke dalam folder
• Mengelola aset yang dapat digunakan kembali: mencantumkan, membaca, membuat, dan memperbarui

🔍 Struktur dan Inspeksi

• Memetakan struktur proyek: pohon elemen dengan jumlah keyframe, tanpa data berat
• Melihat apa yang dianimasikan: saluran mana yang membawa keyframe pada setiap elemen
• Membaca nilai yang tepat: properti, keyframe, atau elemen apa pun
• Mencari bentuk authoring: JSON yang tepat untuk elemen atau konsep apa pun

🔷 Bentuk dan Elemen

• Persegi panjang
• Lingkaran dan elips
• Garis, polyline, dan poligon
• Path kustom
• Teks dan teks multi-baris
• Gambar
• Simbol dan instance yang digunakan kembali
• Grup
• Masker dan clip path

🎨 Isian, Goresan, dan Warna

• Isian warna solid: statis atau dianimasikan
• Isian gradien
• Goresan: solid atau gradien, statis atau dianimasikan
• Pengomposisian: mode campuran dan opasitas
• Efek filter seperti blur

🎞️ Animasi dan Keyframe

• Menambahkan keyframe pada waktu tertentu, dengan nilai
• Mengatur nilai statis di mana tidak diperlukan gerakan
• Membaca, memeriksa, dan menghapus keyframe
• Mengatur easing per keyframe: cubic bezier
• Menganimasikan transformasi: posisi, rotasi, skala, dan skew
• Menganimasikan saluran isian, goresan, pengomposisian, dan filter
• Morph satu bentuk ke bentuk lainnya

📤 Ekspor dan Pengiriman

• Mengekspor SVG animasi: digerakkan oleh JavaScript atau CSS
• Mengatur pemicu mulai: load, hover, click, scroll, atau programatik
• Mengatur perilaku klik dan hover: freeze, restart, reverse, atau reset
• Mengekspor ke Lottie
• Mengekspor ke sumber React Native atau Flutter
• Merender video: MP4, MOV, AVI, MKV, atau WebM
• Merender GIF, WebP, urutan PNG, atau ZIP
• Mengontrol perulangan: iterasi, arah, ping-pong, dan kecepatan
• Mengatur frame rate, resolusi, dan kualitas
• Menangani transparansi dan warna latar belakang

✅ Praktik terbaik

Instal skill desain gerak SVGator, lalu panggil berdasarkan namanya: Ini adalah panduan kerajinan yang membantu asisten Anda membuat pilihan yang disengaja tentang timing, easing, dan kepribadian alih-alih gerakan datar dan generik. Unduh dari repositori skill SVGator, lalu picu langsung di prompt Anda dengan memulai sesuatu seperti "gunakan skill gerak SVGator untuk menganimasikan logo ini." Anda memanggilnya secara manual dengan sengaja: dengan begitu skill tersebut tidak menggunakan token Anda saat Anda hanya mengekspor atau melakukan edit kecil, dan hanya dimuat saat Anda benar-benar menginginkan arahan seni tambahan.

Mulai dari karya seni Anda sendiri, lalu animasikan: Menghasilkan bentuk orisinal dari awal adalah hal tersulit untuk dilakukan dengan benar di asisten AI mana pun. Untuk hasil terbaik, buat atau bawa SVG Anda di editor SVGator terlebih dahulu, lalu minta asisten Anda untuk menganimasikannya. Itu menjaga gaya visual Anda tetap konsisten dan membiarkan AI fokus pada keahliannya: gerakan, timing, dan pengurutan.

Beri nama elemen Anda sebelum Anda memberikan prompt: Asisten Anda membaca nama elemen untuk memahami struktur proyek. Nama yang jelas seperti "lengan_kiri", "lingkaran_bg", atau "judul" membantunya menargetkan elemen yang tepat, menghindari kesalahan, dan tetap teratur di seluruh adegan yang kompleks. Nama generik membuat tugasnya lebih sulit, dan mungkin akhirnya menghabiskan lebih banyak token (tergantung model).

Pecah animasi kompleks menjadi beberapa langkah: Alih-alih "buatkan saya animasi onboarding lengkap," lakukan satu per satu: buat elemen, tambahkan keyframe, lalu sempurnakan timing. Server menerapkan satu perubahan yang divalidasi per edit, jadi langkah-langkah yang lebih kecil memberi Anda lebih banyak kendali dan membuat kesalahan apa pun mudah ditangkap dan diperbaiki.

Spesifik tentang timing dan nuansa: "Fade yang halus" agak kabur. "Fade-in 400ms dengan ease-out" memberi asisten Anda sesuatu yang konkret untuk dikerjakan. Semakin banyak Anda mendeskripsikan nuansanya, apakah snappy, bouncy, lambat, atau halus, semakin dekat hasil pertama dengan apa yang Anda bayangkan.

Sesuaikan format ekspor dengan tempatnya akan ditampilkan: SVG adalah pilihan yang tepat untuk web, dengan pilihan JavaScript atau khusus CSS (untuk performa yang lebih baik). Lottie, React Native, dan Flutter diserahkan dengan bersih ke proyek aplikasi dan seluler. Video dan GIF siap untuk sosial dan email, di mana SVG animasi tidak akan diputar. Memilih format di awal menghemat satu putaran ekspor ulang.

Duplikasi proyek sebelum eksperimen besar: Jika Anda ingin AI membangun ulang sesuatu dari awal, minta untuk menduplikasi proyek terlebih dahulu, lalu buat perubahan pada salinannya. Yang asli tetap persis seperti semula, sehingga eksperimen yang berani tidak akan pernah menghilangkan versi yang berfungsi. Selesaikan di editor: Setiap proyek dilengkapi dengan tautan editor langsung. Setelah asisten membantu Anda sebagian besar proses, buka proyek dan lakukan penyempurnaan akhir secara manual. AI menangani pekerjaan berat, dan Anda tetap memegang kendali atas detailnya. Ini juga menghemat token, karena penyesuaian kecil secara manual lebih cepat dan lebih murah daripada meminta asisten melakukannya satu per satu.