Cara Mengatur Cocos Creator MCP dengan Cursor dan Claude (Tutorial Video)

Tonton Tutorial Videonya

Video: Panduan pengaturan Cocos Creator MCP di saluran YouTube VberAI

Rekaman ini adalah panduan konfigurasi Cocos Creator MCP langsung—bukan gambaran umum multi-engine. Anda akan melihat cara menginstal plugin MCP, memulai jembatan lokal, dan menghubungkan klien AI seperti Cursor atau Claude Desktop sehingga asisten dapat membaca dan mengubah proyek Cocos Creator Anda di dalam editor.

Yang Akan Anda Pelajari

Setelah mengikuti video dan daftar periksa di bawah ini, Anda seharusnya dapat:

• Menginstal dan mengaktifkan plugin Cocos Creator MCP untuk Creator 2.x atau 3.x
• Memulai server / jembatan MCP lokal dari panel plugin
• Menambahkan server ke Cursor, Claude, Windsurf, atau klien lain yang kompatibel dengan MCP
• Menjalankan tes baca-saja (pohon scene) dan tes tulis kecil (membuat atau mengganti nama node)

Model Context Protocol (MCP) mengekspos status editor langsung—scene saat ini, hierarki node, seleksi—bukan hanya file di disk. Itulah mengapa pengaturan MCP penting untuk alur kerja game.

Prasyarat

Item	Catatan
Cocos Creator	Proyek 2.x atau 3.x terbuka di editor
Plugin MCP	Ekstensi Cocos Creator MCP (video menggunakan build VberAI Cocos MCP)
Klien AI	Cursor, Claude Desktop, Claude Code, Windsurf, Cline, atau asisten lain yang mendukung MCP
Akses lokal	Jembatan MCP berjalan di 127.0.0.1; firewall harus mengizinkan loopback

Langkah Pengaturan (Ikuti Bersama Video)

1. Instal plugin Cocos Creator MCP

1. Unduh ekstensi MCP untuk versi Creator Anda dari penyedia plugin (lihat unduhan Cocos MCP).
2. Impor atau salin ekstensi ke folder extensions proyek Anda, atau instal melalui manajer ekstensi Creator—sesuai dengan yang ditentukan oleh dokumentasi plugin.
3. Buka Extension → Extension Manager, aktifkan plugin MCP, dan muat ulang editor jika diminta.

2. Mulai jembatan MCP

Buka panel kontrol plugin (nama menu bervariasi tergantung build—sering kali MCP atau AI Bridge):

• Klik Start Server / Start MCP
• Catat URL lokal dan port yang ditampilkan di panel (Anda akan menempelkannya ke klien AI Anda)

Biarkan Cocos Creator tetap berjalan selama jembatan aktif.

3. Konfigurasi klien AI Anda

Tambahkan entri server MCP yang menunjuk ke URL jembatan dari langkah 2. Contoh bentuk untuk Cursor (mcp.json):

{
  "mcpServers": {
    "cocos-mcp": {
      "url": "http://127.0.0.1:PORT/mcp"
    }
  }
}

Ganti PORT dengan nilai dari UI plugin. Banyak build Cocos MCP menyertakan tombol Configure for Cursor / Claude yang menyalin JSON yang benar—gunakan itu jika tersedia.

Mulai ulang atau muat ulang klien AI setelah menyimpan konfigurasi.

4. Verifikasi koneksi

Di Cursor atau Claude, ajukan pertanyaan baca-saja terlebih dahulu:

• “Daftarkan pohon node scene saat ini.”
• “Node apa saja yang berada di bawah Canvas?”

Anda akan mendapatkan jalur terstruktur dari editor—bukan konten file yang ditebak.

5. Coba satu operasi tulis kecil

Minta perubahan yang dapat dibalik:

• Buat node anak kosong di bawah seleksi
• Ganti nama grup UI yang kurang jelas
• Lampirkan komponen atau skrip rintisan

Konfirmasi perubahan muncul di panel Hierarchy sebelum menjalankan tugas otomatisasi yang lebih besar.

Mengapa MCP Lebih Baik daripada Pengodean AI Berbasis File Saja

Tanpa MCP, asisten hanya melihat file di disk. Mereka melewatkan:

• Perubahan scene yang belum disimpan dan seleksi saat ini
• Properti node dan nilai komponen langsung
• Konteks khusus editor (mode prefab, pengaturan build, dll.)

MCP mengirim kebenaran editor ke model, yang merupakan inti dari pengaturan Cocos Creator MCP. Untuk pembahasan mendalam tertulis tentang arsitektur jembatan serupa, lihat Cara Kami Membangun Server MCP Real-Time untuk Godot.

Pasangkan MCP dengan Alat Desain-ke-UI (Opsional)

MCP menangani operasi editor setelah aset ada. Alat seperti VberAI Studio (AI Studio) menangani PSD / Figma → struktur UI engine untuk Unity, Godot, atau Cocos. Tumpukan umum:

1. AI Studio mengimpor layar berlapis dan mengekspor prefab / tata letak node Cocos
2. Cocos MCP menghubungkan tombol, mengganti nama node, dan memvalidasi referensi di Creator

Lihat juga: Bangun UI Game dalam 3 Menit dengan AI Studio.

FAQ

Bagaimana cara menghubungkan Cursor ke Cocos Creator?
Instal Cocos Creator MCP, mulai jembatan lokal di editor, tambahkan URL jembatan ke mcp.json Cursor di bawah mcpServers, lalu uji dengan prompt pohon scene.

Apa itu Cocos Creator MCP?
Plugin Model Context Protocol yang memungkinkan klien AI membaca dan memodifikasi proyek Cocos Creator melalui editor yang berjalan.

Klien AI mana yang berfungsi dengan Cocos MCP?
Klien apa pun yang kompatibel dengan MCP: Cursor, Claude Desktop, Claude Code, Windsurf, Cline, dan lainnya.

Apakah video ini mencakup Unity atau Godot?
Tidak—rekaman ini hanya berfokus pada konfigurasi Cocos Creator MCP. Untuk Unity, lihat Panduan instalasi Unity MCP; untuk Godot, lihat Godot MCP vs skrip manual.

Di mana video resminya?
YouTube: Pengaturan Cocos Creator MCP, saluran @vber_ai. Berlangganan ke saluran YouTube VberAI untuk tutorial MCP lainnya.