Rive MCP: Cara Menghubungkan Claude Code, Cursor dan Codex ke Rive
Cara kerja server Rive MCP, cara menghubungkan Claude Code dan Cursor ke editor Rive, apa yang bisa dan tidak bisa dilakukan AI, dan bagaimana perbandingannya dengan agen bawaan Rive dan Rive CLI.
Pengambilan Inti
Server Rive MCP dibangun ke dalam editor desktop Rive untuk Mac dan Windows. Meskipun Rive terbuka, ia berjalan di http://127.0.0.1:9791/mcp, dan alat pengkodean AI seperti Claude Code dan Cursor dapat terhubung dengannya untuk membuat artboard, bentuk, animasi, mesin status, model tampilan, dan skrip dalam file yang terbuka. Di Claude Code, sambungkan dengan satu perintah: claude mcp add --transport http rive http://127.0.0.1:9791/mcp.
Tentang panduan ini
ExodeUI tidak berafiliasi dengan Rive atau Anthropic. Panduan ini didasarkan pada dokumentasi Rive sendiri per Oktober 2026. Fitur AI Rive berubah dengan cepat, jadi periksa halaman resmi MCP jika suatu langkah tidak sesuai dengan yang Anda lihat. Kami membuat ExodeUI, yang memiliki server MCP sendiri, dan kami membandingkan keduanya di bagian akhir.
Apa yang dapat dilakukan server Rive MCP
Rive mengatakan alat pertama ditujukan untuk pekerjaan berulang, seperti membuat model tampilan atau mesin status dengan ratusan status dan lapisan. Menurut dokumen Rive, alat AI yang terhubung dapat:
- Membuat dan mengelola file: menambah, mengganti nama, mengubah ukuran, mengatur, dan memfokuskan artboard
- Periksa dan edit adegan: kueri hierarki, pilih objek, perbarui properti, duplikat, susun ulang, reparent, atau hapus elemen
- Bangun desain: bentuk, jalur, tata letak, contoh komponen, dan daftar
- Membuat animasi dan interaksi: animasi linier, mesin status, status, transisi, kondisi, bingkai utama, dan interpolasi
- Bekerja dengan pengikatan data: melihat model, properti, instance, dan pengikatan
- Edit skrip Luau dan shader WGSL: perbarui kode, jalankan diagnostik, kompilasi ulang, uji dan baca keluaran konsol
Cara mengatur Rive MCP dengan Claude Code
MCP hanya berfungsi dengan editor desktop, bukan versi browser. Buka Rive terlebih dahulu, lalu sambungkan alat AI Anda.
1. Buka aplikasi desktop Rive
Instal editor desktop Rive terbaru untuk macOS atau Windows dari rive.app/downloads dan buka file yang ingin Anda kerjakan.
2. Tambahkan server MCP
Di terminal, jalankan: claude mcp add --transport http rive http://127.0.0.1:9791/mcp
3. Mulai Claude Code
Jalankan claude. Mulai setelah Rive terbuka, sehingga dapat menemukan alat Rive.
4. Prompt dalam fitur, bukan kode
Jelaskan apa yang ingin Anda lihat dan apa yang tidak boleh diubah, misalnya "tambahkan status hover ke tombol yang skalanya menjadi 1,05 dengan pegas, dan pertahankan status ditekan seperti apa adanya".
Cara mengatur Rive MCP dengan Cursor dan Codex
Di Cursor, buka Pengaturan, buka Tools & MCPs, pilih Add Custom MCP, dan tambahkan server bernama rive dengan URL http://127.0.0.1:9791/mcp, lalu hidupkan koneksi. Rive mendokumentasikan Claude Code dan Cursor. Karena servernya adalah server HTTP MCP lokal, klien lain yang mendukung server HTTP MCP, seperti Codex, dapat terhubung dengan URL yang sama.
Rive MCP vs Agen AI bawaan Rive
Rive juga memiliki Agen AI di dalam editor. Keduanya dapat mengedit file Anda. Bedanya siapa yang membayar dan apa lagi yang bisa dilihat agen.
- Agen bawaan berjalan pada paket Rive: terbatas pada Gratis dan Kadet, dengan model canggih, kredit isi ulang, dan kunci API Anda sendiri di Voyager
- Dengan MCP, Anda menggunakan langganan AI yang sudah Anda bayar, seperti Claude atau Cursor
- Agen eksternal juga dapat membaca kode aplikasi, catatan, dan dokumen Anda, sehingga dapat mengedit file Rive dan mengirimkannya ke aplikasi Anda pada sesi yang sama
- Agen bawaan tidak memerlukan pengaturan dan berfungsi di editor browser
Rive MCP vs Rive CLI
CLI Rive yang lebih baru adalah rute yang berbeda. Daripada menggunakan editor terbuka, agen pengkodean Anda menulis adegan sebagai teks dalam Rive Markup Language (RML), dan CLI membuat file .riv untuk aplikasi Anda atau file .rev yang dibuka di editor. Ini menunjukkan pratinjau lokal, dapat merender bingkai dan menjalankan tes tanpa jendela, dan menyimpan proyek sebagai folder teks, sehingga dapat hidup dalam kontrol versi. Gunakan MCP untuk bekerja dengan desainer di editor; gunakan CLI ketika agen membuat atau mengedit grafik Rive dari kode.
Batasan yang perlu diketahui sebelum Anda mulai
Integrasi MCP Rive masih muda, dan memiliki beberapa batasan praktis.
- Hanya editor desktop, di macOS dan Windows, dan Rive harus terbuka dengan file Anda
- AI bekerja pada file yang terbuka, jadi periksa hasilnya di layar sebelum Anda mempercayainya
- Menerbitkan file .riv tanpa splash screen Rive masih memerlukan paket berbayar, dari Cadet seharga $9 per kursi per bulan ditagih setiap tahun
- Perintah yang menjelaskan hasil yang Anda inginkan bekerja lebih baik daripada perintah yang menjelaskan kode
Alternatifnya: server MCP ExodeUI
ExodeUI adalah browser dan alat desktop untuk UI dan animasi interaktif. Ia juga memiliki server MCP, sehingga Claude Code, Cursor, dan alat pengkodean AI lainnya dapat membuat dan mengedit animasi dari perintah bahasa sederhana. Hasilnya adalah satu file .exode JSON terbuka dengan mesin status, fisika pegas, serta input dan peristiwa yang dikontrol kode Anda, diputar oleh runtime untuk React, Vue, Svelte, Angular, Solid, React Native, SwiftUI, dan Flutter. Ini lebih cocok untuk UI produk interaktif daripada animasi karakter. Jika Anda sudah bekerja di Rive, server MCP-nya adalah pilihan yang lebih sederhana.
Cuplikan Implementasi Produksi
# Rive desktop editor must be open first
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
# then start Claude Code
claudeKunci Principles untuk Diingat
- Server Rive MCP berjalan di dalam editor desktop Rive di http://127.0.0.1:9791/mcp
- Claude Code terhubung dengan satu perintah; Cursor terhubung melalui Alat & MCP
- Itu dapat membangun bentuk, animasi, mesin status, model tampilan, dan skrip Luau di file yang terbuka
- Rive CLI adalah rute terpisah berbasis teks untuk agen yang membuat file Rive dari kode