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?

  • Mengelola file dan artboard Rive — Minta asisten Anda untuk menambah, mengganti nama, mengubah ukuran, mengatur, atau memfokuskan artboard dalam file Rive yang terbuka.
  • Memeriksa dan mengedit objek scene — Kueri hierarki objek, pilih elemen, dan perbarui properti, ganti nama, duplikat, urutkan ulang, ubah induk, atau hapus objek tersebut.
  • Membangun desain secara terprogram — Buat bentuk, jalur, tata letak, instance komponen, daftar komponen, dan elemen berbasis aset langsung di scene.
  • Membuat animasi dan interaksi — Edit animasi linear, state machine, state, transisi, kondisi, keyframe, dan nilai interpolasi.
  • Menyiapkan pengikatan data — Buat model tampilan, properti, instance, pengikatan, dan grup properti kustom untuk desain berbasis data yang kompleks.
  • Mengedit skrip dan shader — Kelola skrip Luau dan shader WGSL, perbarui kode sumber, jalankan diagnostik, kompilasi ulang, uji, cari kode, dan baca output konsol.

Dokumentasi

Integrasi Rive MCP

Catatan

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

Anda dapat menghubungkan Editor Rive ke alat AI melalui MCP (Model Context Protocol). Kumpulan alat pertama dirancang untuk memungkinkan AI menangani tugas-tugas berulang, seperti membuat View Model yang kompleks, State Machine dengan ratusan status/lapisan, Layout, Shapes, dan lainnya.

Fitur yang didukung

  • Membuat dan mengelola file Rive — menambah, mengganti nama, mengubah ukuran, mengatur, dan memfokuskan artboard.
  • Memeriksa dan mengedit scene — menanyakan hierarki, memilih objek, memperbarui properti, mengganti nama, menduplikasi, mengurutkan ulang, mengubah induk, atau menghapus elemen.
  • Membangun desain — membuat bentuk, jalur, tata letak, instance komponen, daftar komponen, dan elemen berbasis aset.
  • Membuat animasi dan interaksi — mengedit animasi linear, state machine, status, transisi, kondisi, keyframe, dan interpolasi.
  • Bekerja dengan data binding — 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.

Info

Daftar fitur ini akan terus berkembang seiring bertambahnya alat.

Instalasi

Menggunakan Cursor

Instal dan buka versi terbaru aplikasi desktop [Rive](https://rive.app/downloads) untuk Mac atau Windows. Buat akun [Cursor](https://www.cursor.com/) dan instal aplikasinya. Buka Cursor dan navigasikan ke panel pengaturan di pojok kanan atas. 
<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-settings-button.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=39bb9802e31872b2317fed055e5cf24b" alt="Open cursor settings" width="1660" height="1090" data-path="images/editor/cursor-settings-button.png" />
Buka tab Tools & MCPs dan klik Add Custom MCP. 
<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-mcp-settings.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=d82531f4741d02cdd01233d7517a5f25" alt="Open Cursor MCPs tab" width="1658" height="1080" data-path="images/editor/cursor-mcp-settings.png" />
Simpan cuplikan JSON berikut ke komputer Anda sebagai `mcp.json`. 
```json theme={null}
{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}
```
Aktifkan koneksi MCP `On` Jika semuanya terinstal dengan benar, Anda akan melihat Rive sebagai server MCP yang tersedia. 
<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-mcp-connection.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=59ca6c71d1cc1317320ab8272eae0e16" alt="Cursor verified" width="1660" height="1104" data-path="images/editor/cursor-mcp-connection.png" />

Catatan

Agar server Rive tersedia, Anda harus membuka aplikasi Rive Early Access.

Informasi tambahan tentang pengaturan MCP dapat ditemukan di sini.

Menggunakan Claude di Terminal

Instal dan buka versi terbaru [aplikasi desktop Rive](https://rive.app/downloads) untuk macOS atau Windows. Jalankan perintah berikut di terminal Anda: 
```shell theme={null}
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
```
Jalankan Claude dan ikuti petunjuknya: 
```shell theme={null}
claude
```

Apa yang bisa dilakukan?

Setelah Cursor terinstal dan semuanya diatur dengan benar, saatnya mulai memberikan perintah kepada AI.

Pastikan ada File Rive yang terbuka dan Artboard telah dibuat. Ketik perintah Anda ke antarmuka obrolan dan tekan enter. AI akan membutuhkan waktu sejenak untuk memproses permintaan. 
Contoh perintah:

```
Create a State Machine about birds with 20 states and 2 layers
```
Setelah permintaan diproses, ketik **End Prompt** untuk mengizinkan AI membuat perubahan pada file Rive.