Cara Menggunakan AI Agent dalam Pengembangan App Capacitor

Untuk menggunakan agen AI dalam pengembangan aplikasi Capacitor, berikan agen dua hal yang tidak dimiliki secara default: pengetahuan prosedural tentang sisi native Capacitor, melalui skills, dan tools live, melalui server MCP dan CLI yang dapat dijalankan. Dengan skills Capacitor open-source dari Capgo dan server MCP Capgo, agen seperti Claude Code, Codex, atau Cursor dapat menambahkan plugin dengan konfigurasi native yang tepat, debug build iOS dan Android, meminta cloud build, dan mengunggah live update.

Panduan ini menjelaskan mengapa agen umum salah memahami Capacitor, cara mengatur skills dan MCP dalam beberapa perintah, prompt untuk setiap tahap siklus hidup aplikasi, dan guardrails yang menjaganya tetap aman.

Mengapa agen serbaguna kesulitan dengan Capacitor

Agen kuat di code web. Proyek Capacitor menambahkan setengah bagian lain yang berubah setiap tahun:

• Drift versi. Capacitor 8 mengubah level SDK Android, menjadikan Swift Package Manager sebagai default untuk proyek iOS baru, dan mewajibkan Xcode 26 untuk upload ke App Store. Data pelatihan mencampurkan saran Capacitor 3 hingga 8.
• Konfigurasi native di berbagai file. Satu plugin saja bisa membutuhkan Info.plist keys, entitlements, AndroidManifest.xml permissions, perubahan Gradle, dan sebuah cap sync. Agent sering kali hanya menangani bagian JavaScript.
• Pemilihan plugin. Banyak plugin komunitas tidak terawat. Agent memilih apa pun yang paling sering ia lihat, bukan yang berfungsi di Capacitor 8.
• Kegagalan tak terlihat. Error ada di Xcode, Logcat, atau log CI, bukan di editor.

Anda mengatasinya dengan konteks yang bisa dimuat agent saat dibutuhkan, dan tools yang bisa ia panggil alih-alih menebak.

Toolkit: skill, MCP, dan CLI

Install skill

bunx skills add Cap-go/capgo-skills

Instaler mendeteksi agen yang didukung dan menempatkan skill di lokasi yang dicari masing-masing agen. Kumpulan ini mencakup pemilihan plugin, praktik terbaik, upgrade mayor aplikasi dan plugin Capacitor (termasuk v7 ke v8), migrasi CocoaPods ke SPM, debugging, log iOS dan Android, push notifications, deep links, safe areas, pemindaian keamanan, pengujian, CI/CD, preflight App Store, migrasi Cordova dan web app, live updates Capgo, dan native builds Capgo. The halaman skill mencantumkan setiap skill.

Di Claude Code, Anda juga dapat menggunakan plugin marketplace:

claude plugin marketplace add Cap-go/capgo-skills
claude plugin install capgo-cloud@capgo-skills

Hubungkan server MCP

Server hosted tidak memerlukan instalasi. Tambahkan ke Claude Code dan masuk dengan OAuth saat diminta:

claude mcp add --transport http capgo https://api.capgo.app/mcp

Server CLI berjalan secara lokal melalui stdio dan menggunakan login Capgo Anda, jadi masuk terlebih dahulu:

bunx @capgo/cli@latest login
claude mcp add capgo -- bunx @capgo/cli@latest mcp

Untuk editor yang menggunakan konfigurasi JSON (Cursor, Windsurf, Claude Desktop), ekuivalennya adalah:

{
  "mcpServers": {
    "capgo": {
      "command": "bunx",
      "args": ["@capgo/cli@latest", "mcp"]
    }
  }
}

MCP CLI mengekspos tool seperti capgo_upload_bundle, capgo_list_channels, capgo_update_channel, capgo_check_compatibility, capgo_request_build, capgo_doctor, dan capgo_get_stats. Daftar lengkapnya ada di Referensi MCP CLI, dan halaman MCP menjelaskan server mana yang harus digunakan kapan.

Menggunakan agent sepanjang siklus Capacitor

Sebutkan skill-nya di prompt Anda. Ini membuat agen memuat prosedur yang tepat, bukan mengimprovisasi.

1. Ubah web app menjadi aplikasi Capacitor

Use the webapp-to-capacitor skill to add Capacitor 8 with iOS and Android
to this Vite + React app. Keep the existing build output folder.

Agen menginstal @capacitor/core dan CLI, mengatur webDir, menambahkan platform, dan menjalankan sinkronisasi pertama. Untuk proyek Cordova yang sudah ada, gunakan cordova-to-capacitor. Untuk Next.js, Nuxt, atau yang serupa, gunakan framework-to-capacitor, yang menangani pengaturan static export.

2. Tambahkan fitur native dengan plugin yang tepat

Use the capacitor-plugins skill to add biometric login.
Pick a plugin that supports Capacitor 8, configure iOS and Android,
and show me the usage code.

Skill ini mengetahui paket resmi @capacitor/* packages and the direktori plugin Capgo, sehingga agent memilih plugin yang terawat dan menambahkan Info.plist string penggunaan, izin Android, dan langkah sync. Tinjau diff-nya seperti pull request biasa.

3. Debug dengan log asli

Use the ios-android-logs skill to capture Logcat while I reproduce the crash
on the connected Android device, then use debugging-capacitor to find the cause.

Skill logs memberi agent perintah tepat adb serta perintah Xcode untuk streaming dan memfilter log perangkat, jadi ia membaca stack trace asli alih-alih menebak dari source.

4. Upgrade Capacitor dan migrasi ke SPM

Use the capacitor-app-upgrade-v7-to-v8 skill to upgrade this app.
Stop and show me the plan before changing native files.

Lalu, jika proyek iOS Anda masih menggunakan CocoaPods:

Use the cocoapods-to-spm skill to move the iOS project to Swift Package Manager.

Meminta rencana dulu itu kebiasaan bagus untuk perubahan apa pun yang menyentuh ios/ atau android/. Untuk versi manual dari pekerjaan yang sama, lihat panduan upgrade Capacitor 8 dan Panduan migrasi SPM.

5. Cek keamanan dan kesiapan rilis ke store

Use the capacitor-security skill to scan this project and fix high severity issues.
Then run the capacitor-apple-review-preflight skill before I submit.

Preflight check memeriksa penyebab umum penolakan: usage string yang hilang, celah privacy manifest, persyaratan Sign in with Apple, dan masalah metadata.

6. Build iOS dan Android di cloud

Simpan sendiri kredensial signing sekali saja, bukan lewat agent:

bunx @capgo/cli@latest build credentials save --platform ios \
  --certificate ./cert.p12 --p12-password "..." \
  --ios-provisioning-profile ./profile.mobileprovision \
  --apple-key ./AuthKey.p8 --apple-key-id "KEY_ID" \
  --apple-issuer-id "ISSUER_ID" --apple-team-id "TEAM_ID"

Kredensial disimpan secara lokal di ~/.capgo-credentials/credentials.json (atau .capgo-credentials.json dengan --local, yang sebaiknya di-git-ignore), dikirim untuk build, dan dihapus dari Capgo setelah build selesai. Lalu agen bisa bekerja sendiri:

Use the capgo-native-builds skill to request an iOS release build from the
current working directory, then read the logs and fix any build error.

Itu dipetakan ke:

bunx @capgo/cli@latest build request com.example.app --platform ios --path .

Karena --path . mengunggah working tree, agen dapat iterasi pada error build iOS dari Windows atau Linux tanpa perlu commit perbaikan spekulatif. Selengkapnya di Build Capgo. Jika Anda butuh sertifikat dulu, iOS certificate generator kami membantu.

7. Rilis hotfix sebagai live update

Use the capgo-live-updates skill to build the web app and upload it to the
beta channel. Check native compatibility first.

Agen menjalankan build, lalu:

bunx @capgo/cli@latest bundle upload --channel=beta

Cek kompatibilitas membandingkan dependensi native dengan yang terpasang di perangkat, jadi agen tidak mem-push bundle yang butuh plugin native yang tidak ada di build store. Promosikan ke produksi setelah dites di beta. Lihat cara kerja live updates Capgo.

Guardrails yang menjaga kerja agen tetap aman

• Rencanakan sebelum melakukan perubahan native. Minta rencana dan diff untuk apa pun di bawah ios/ dan android/.
• Jauhkan rahasia dari percakapan. Simpan kredensial build dan kunci API Anda sendiri, git-ignore file kredensial, dan jangan pernah menempelkan kunci ke dalam prompt.
• Gunakan channel sebagai jaring pengaman. Biarkan agen meng-upload ke channel beta atau internal. Promosikan ke produksi secara manual.
• Andalkan rollback. Capgo mengembalikan perangkat ke bundle terakhir yang berfungsi jika yang baru gagal dimulai, sehingga membatasi kerusakan akibat upload yang buruk.
• Utamakan perintah yang bisa ditinjau. Perintah CLI di atas mudah dibaca di log agen. Jika ragu apa yang dilakukan tool MCP, minta agen menampilkan perintah CLI yang setara.
• Biarkan manusia menangani submit ke store. Agen bisa menyiapkan build dan metadata. Pengiriman untuk review dan jawaban ke reviewer sebaiknya tetap dilakukan oleh manusia.

Pemecahan Masalah

Agen mengabaikan skill. Sebutkan secara eksplisit di prompt, dan pastikan sudah terinstal untuk agen tersebut (jalankan ulang bunx skills add Cap-go/capgo-skills).

Tool MCP tidak ada. Untuk server CLI, pastikan bunx @capgo/cli@latest login berhasil di lingkungan yang sama tempat agen berjalan. Restart agen setelah menambahkan server.

Agen menyarankan Capacitor API yang sudah usang. Beritahu versi Capacitor Anda, dan minta agen mencari di docs menggunakan MCP yang di-host. capgo_search_docs tool.

Cloud build gagal saat signing. Kredensial hilang atau provisioning profile tidak cocok dengan bundle ID. Simpan ulang kredensial dan jalankan ulang permintaan build.

Upload ditolak karena tidak kompatibel. Bundle memerlukan perubahan native. Kirim build store terlebih dahulu, lalu live update.

Kesimpulan

AI agent jadi berguna untuk Capacitor begitu mereka berhenti menebak-nebak. Instal skill Capacitor agar mereka mengikuti prosedur yang benar, hubungkan Capgo MCP publik untuk dokumentasi dan CLI MCP untuk aksi akun, serta pasang beberapa guardrail pada perubahan native, secrets, dan production channel. Untuk lebih lanjut tentang membangun fitur AI ke dalam aplikasi itu sendiri, baca mengapa Capacitor cocok untuk aplikasi mobile AI.