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?

  • Buat dan kelola artboards — tambah, ganti nama, ubah ukuran, atur, dan fokuskan artboards di file Rive saat ini.
  • Periksa dan edit scene graph — kueri hierarki objek, pilih elemen, perbarui properti, ganti nama, duplikasi, urutkan ulang, ubah induk, atau hapus node.
  • Bangun elemen desain — buat bentuk, jalur, tata letak, instance komponen, daftar komponen, dan elemen berbasis aset.
  • Buat state machines dan animasi — edit animasi linear, state machines, state, transisi, kondisi, keyframe, dan interpolasi.
  • Siapkan data binding — buat view model, properti, instance, binding, dan grup properti kustom.
  • Edit 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

export const YouTube = ({id, timestamp}) => { const videoSrc = timestamp ? https://www.youtube.com/embed/${id}?start=${timestamp} : https://www.youtube.com/embed/${id}; return ; }; <Note> Integrasi MCP saat ini hanya tersedia di Editor desktop untuk Windows dan macOS.

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

Fitur yang Didukung

  • Membuat dan mengelola file Rive — menambah, mengganti nama, mengubah ukuran, mengatur, dan memfokuskan artboard.
  • Memeriksa dan mengedit scene — mencari hierarki, memilih objek, memperbarui properti, mengganti nama, menduplikasi, mengurutkan ulang, mengubah induk, atau menghapus elemen.
  • Membangun desain — membuat shape, path, layout, instance komponen, daftar komponen, dan elemen berbasis aset.
  • Membuat animasi dan interaksi — mengedit animasi linear, state machine, state, 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.
Daftar fitur ini akan berkembang seiring waktu seiring penambahan lebih banyak 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 potongan 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" />

<Note>
  Agar server Rive tersedia, Anda harus membuka aplikasi Rive Early Access.
</Note>

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 dilakukannya?

Setelah Cursor terinstal dan semuanya diatur dengan benar, saatnya mulai memberikan prompt ke AI.

Buka File Rive dan buat Artboard. Ketik prompt Anda ke UI chat dan tekan enter. AI akan memproses permintaan sejenak. 
Contoh prompt:

```
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.