Rive MCP

resmi

Rive MCP memungkinkan AI menangani tugas-tugas berulang, seperti membuat View Models yang kompleks, State Machines dengan ratusan status/lapisan, Layouts, Shapes, dan lainnya.

Lihat di rive.app

Apa yang bisa Anda lakukan dengan Rive MCP?

  • Kelola file Rive — Tambahkan, ganti nama, ubah ukuran, atur, dan fokuskan artboard dalam file Rive yang terbuka.
  • Edit adegan — Telusuri hierarki, pilih objek, perbarui properti, ganti nama, duplikasikan, susun ulang, ubah induk, atau hapus elemen.
  • Buat desain — Buat bentuk, path, tata letak, instans komponen, daftar komponen, dan elemen berbasis aset.
  • Buat rig dengan tulang — Buat tulang akar dan rantai tulang berdasarkan panjang dan rotasi atau titik kepala dan ekor, lalu ikat dan beri bobot.
  • Animasikan dan tambahkan interaksi — Edit animasi linear, mesin status, status, transisi, kondisi, keyframe, dan interpolasi.
  • Gunakan pengikatan data — Buat model tampilan, properti, instans, pengikatan, dan grup properti kustom.

Dokumentasi

Integrasi Rive MCP

[!NOTE]

Integrasi MCP saat ini hanya tersedia di Editor desktop untuk Windows dan macOS.

Anda dapat menghubungkan Rive Editor ke alat AI melalui MCP (Model Context Protocol). Kumpulan alat pertama dirancang agar AI dapat menangani tugas berulang, seperti membuat View Model yang kompleks, State Machine dengan ratusan state/layer, Layout, Shape, dan lainnya.

YouTube video player

Fitur yang didukung

  • Membuat dan mengelola file Rive — menambahkan, mengganti nama, mengubah ukuran, mengatur, dan memfokuskan artboard.
  • Memeriksa dan mengedit scene — menelusuri hierarki, memilih objek, memperbarui properti, mengganti nama, menduplikasi, mengurutkan ulang, mengubah parent, atau menghapus elemen.
  • Membangun desain — membuat shape, path, layout, instance komponen, daftar komponen, dan elemen berbasis aset.
  • Melakukan rig dengan bone — membuat bone root dan rangkaian bone, berdasarkan panjang dan rotasi atau titik head dan tail, lalu mengikat dan memberi bobot.
  • Membuat animasi dan interaksi — mengedit animasi linear, state machine, state, transisi, kondisi, keyframe, dan interpolasi.
  • Bekerja dengan pengikatan data — membuat view model, properti, instance, binding, dan grup properti kustom.
  • Mengedit skrip dan shader — mengelola skrip Luau dan shader WGSL, memperbarui kode sumber, menjalankan diagnostik, mengompilasi ulang, menguji, mencari kode, dan membaca output konsol.

[!NOTE]

Daftar fitur ini akan berkembang seiring waktu dengan penambahan alat lainnya.

Perubahan yang dapat menyebabkan runtime menolak atau mengalami crash saat membuka file, seperti dua warna pada satu fill atau gradien di luar fill atau stroke, akan ditolak dan dibatalkan. Warna dibaca dengan cara yang sama seperti pada kolom hex: #fff adalah putih, dan nama seperti red akan ditolak.

Instalasi

Menggunakan Cursor

1. Buka Rive

Instal dan buka versi terbaru aplikasi desktop Rive untuk Mac atau Windows.

2. Siapkan Cursor

Buat akun Cursor dan instal aplikasinya.

3. Buka pengaturan Cursor

Buka Cursor dan navigasikan ke panel pengaturan di pojok kanan atas.

Open cursor settings

4. Tambahkan MCP kustom

Buka tab Tools & MCPs, lalu klik Add Custom MCP.

Open Cursor MCPs tab

5. Simpan konfigurasi

Simpan cuplikan JSON berikut di komputer Anda sebagai mcp.json.

{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}

6. Aktifkan koneksi

Aktifkan koneksi MCP On

7. Verifikasi koneksi

Jika semuanya telah diinstal dengan benar, Rive akan muncul sebagai server MCP yang tersedia.

Cursor verified

[!NOTE]

Agar server Rive tersedia, aplikasi desktop Rive harus terbuka.

Informasi tambahan tentang penyiapan MCP dapat ditemukan di sini.

Menggunakan Claude di Terminal

YouTube video player

1. Buka Rive

Instal dan buka versi terbaru aplikasi desktop Rive untuk macOS atau Windows.

2. Tambahkan server MCP

Jalankan perintah berikut di terminal Anda:

claude mcp add --transport http rive http://127.0.0.1:9791/mcp

3. Mulai Claude

Jalankan Claude dan ikuti petunjuknya:

claude

Apa yang bisa dilakukan?

Setelah alat AI Anda terhubung, saatnya mulai memberikan prompt kepada AI.

1. Buka file Rive Anda

Buka File Rive dan buat Artboard.

2. Masukkan prompt Anda

Ketik prompt Anda di UI chat, lalu tekan enter. AI akan memerlukan waktu sejenak untuk memproses permintaan, dan perubahannya akan muncul di file Rive yang terbuka.

Contoh prompt:

Create a State Machine about birds with 20 states and 2 layers