Bagaimana Menggunakan Agent AI dalam Pengembangan Aplikasi Capacitor

Menggunakan agen AI dalam pengembangan aplikasi Capacitor, berikan agen dua hal yang kurang secara default: pengetahuan prosedural tentang sisi native Capacitor Kemampuan, dan alat hidup, melalui Server MCP dan sebuah CLI yang dapat dijalankan. Dengan Capgo’s open-source Capacitor dan server MCP Capgo, seorang agent seperti Claude Code, Codex, atau Cursor dapat menambahkan plugin dengan konfigurasi native yang tepat, debug build iOS dan Android, meminta build cloud, dan mengunggah update hidup.

Panduan ini menjelaskan mengapa agent umum mendapatkan Capacitor salah, cara mengatur kemampuan dan MCP dalam beberapa perintah, prompt untuk setiap tahap siklus aplikasi, dan penghalang yang menjaga aman.

Mengapa agent umum berjuang dengan Capacitor

Agent kuat pada web code. Proyek Capacitor menambahkan separuh kedua yang berubah setiap tahun:

• Perubahan versi. Capacitor 8 mengubah tingkat SDK Android, mengatur Swift Package Manager sebagai pengelola paket baru untuk proyek iOS, dan memerlukan Xcode 26 untuk unggah aplikasi ke App Store. Data pelatihan mencampurkan Capacitor 3 hingga 8 saran.
• Konfigurasi native di antara file. Sebuah plugin dapat memerlukan Info.plist Kunci, hak istimewa, AndroidManifest.xml izin, perubahan Gradle, dan sebuah cap sync. Agent sering hanya melakukan bagian JavaScript.
• Pilihan plugin. Banyak plugin komunitas yang tidak terawat. Seorang agent memilih apa yang paling sering dilihat, bukan apa yang berfungsi pada Capacitor 8.
• Gagal tidak terlihat. Error hidup di Xcode, Logcat, atau log CI, bukan di editor.

Anda memperbaiki hal ini dengan konteks yang dapat dimuat secara dinamis oleh agent, dan alat yang dapat dipanggil alih-alih menebak.

Kit pengembang: keterampilan, MCP, dan CLI

Pasang kemampuan

bunx skills add Cap-go/capgo-skills

The installer detects supported agents and places the skills where each one looks for them. The set covers plugin selection, best practices, Capacitor app and plugin major upgrades (including v7 to v8), CocoaPods to SPM migration, debugging, iOS and Android logs, push notifications, deep links, safe areas, security scanning, testing, CI/CD, App Store preflight, Cordova and web app migrations, Capgo live updates, and Capgo native builds. The Instal keterampilan mendeskripsikan setiap kemampuan.

In Claude Code Anda juga dapat menggunakan pasar plugin:

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

Hubungkan server MCP

Server publik tidak memerlukan akun. Tambahkan ke Claude Code:

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

Server CLI berjalan secara lokal melalui stdio dan menggunakan login Anda Capgo, jadi login 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), yang setara adalah:

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

Server MCP CLI menampilkan alat 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 Server MCP CLIdan . Mengapa harus menggunakan server tertentu.

Memanfaatkan agent di sepanjang Capacitor

Berikan nama keterampilan dalam prompt Anda. Hal ini membuat agent memuat prosedur yang tepat daripada berimprovisasi.

1. Ubah aplikasi web 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.

Instalasi agent dan __CAPGO_KEEP_0__, mengatur @capacitor/core dan CLI, pengaturan webDirMengintegrasikan platform, dan menjalankan sinkronisasi pertama. Untuk proyek Cordova yang sudah ada, gunakan cordova-to-capacitor, yang mengatur pengaturan ekspor statis. framework-to-capacitor2. Tambahkan fitur native dengan plugin yang tepat

2. Tambahkan fitur asli 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.

dan direktori plugin __CAPGO_KEEP_0__ @capacitor/* Instalasi agent dan __CAPGO_KEEP_0__, mengatur Direktori plugin CapgoJadi, agen memilih plugin yang dipelihara dan menambahkan Info.plist penggunaan string, izin Android, dan langkah sinkronisasi. Tinjau perbedaan seperti pull request apa pun.

3. Debug dengan log nyata

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.

Catatan log memberikan agen tanda-tanda yang tepat adb dan perintah Xcode untuk mengalirkan dan memfilter log perangkat, sehingga membaca tumpukan stack yang sebenarnya bukan menebak dari sumber.

4. Upgrade Capacitor dan migrasikan 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.

Kemudian, jika proyek iOS Anda masih menggunakan CocoaPods:

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

Mengajukan rencana terlebih dahulu adalah kebiasaan baik untuk perubahan apa pun yang menyentuh ios/ atau android/Untuk versi manual dari pekerjaan yang sama, lihat di sini. Capacitor 8 upgrade guide dan Petunjuk migrasi SPM.

5. Periksa keamanan dan siapkan penyimpanan

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.

Penyebab umum penolakan cek pra-penerbangan: string penggunaan yang hilang, kesenjangan manifest privasi, persyaratan Sign in dengan Apple, dan masalah metadata.

6. Bangun iOS dan Android di cloud

Simpan kunci tanda tangan sekali saja sendiri, bukan melalui agen:

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 context --localDapat diabaikan dengan git-ignore, dikirimkan untuk pembangunan, dan dihapus dari Capgo setelah pembangunan selesai. Lalu agen dapat 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 berhubungan dengan:

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

Because --path . Mengunggah kerjaan berkas, agen dapat berulang kali memeriksa kesalahan build iOS dari Windows atau Linux tanpa mengkomitkan perbaikan spekulatif. Lebih lanjut tentang Capgo Pembangunan. Jika Anda membutuhkan sertifikat terlebih dahulu, penghasil sertifikat iOS membantu.

7. Kirimkan patch kecil 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.

The agent menjalankan pembangunan, kemudian:

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

The kompatibilitas periksa ketergantungan native dengan apa yang terinstal di perangkat, sehingga agent tidak mengirim bundle yang memerlukan plugin native yang tidak ada di toko pembangunan. Promosikan ke produksi setelah melakukan tes di beta. Lihat bagaimana Capgo live updates bekerja.

Guardrails yang menjaga kerja agent aman

• Rencanakan sebelum mengubah native. Permintaan rencana dan perbedaan untuk apa saja di bawah ios/ dan android/.
• Jaga rahasia dari percakapan. Simpan kunci pembangunan dan API sendiri, lupakan file kredit pembangunan, dan jangan menempelkan kunci ke prompt.
• Pakai saluran sebagai jaringan keselamatan. Biarkan agent mengunggah ke saluran beta atau internal. Promosikan ke produksi sendiri.
• Rely pada rollback. Capgo mengembalikan perangkat ke bundle yang berfungsi terakhir jika satu yang baru gagal untuk memulai, yang membatasi kerusakan dari unggahan yang buruk.
• Pilih perintah yang dapat dinilai. Perintah CLI di atas mudah dibaca dalam log agent. Jika Anda tidak yakin apa yang dilakukan oleh alat MCP, tanyakan kepada agent untuk menampilkan perintah CLI yang setara.
• Jaga manusia pada pengajuan toko. Agent dapat mempersiapkan pembangunan dan metadata. Mengajukan untuk tinjauan dan menjawab reviewer harus tetap dengan orang.

Pengaturan Masalah

Agent mengabaikan kemampuan tersebut. Namai secara eksplisit dalam prompt, dan periksa apakah telah terinstal untuk agen tersebut (rerun) bunx skills add Cap-go/capgo-skills).

Alat MCP hilang. Untuk server CLI ini, konfirmasi bunx @capgo/cli@latest login berhasil dalam lingkungan yang sama di mana agen berjalan. Mulai ulang agen setelah menambahkan server.

The agent suggests outdated Capacitor APIs. Beritahu agen Anda tentang versi Capacitor Anda, dan arahkan ke MCP publik sehingga memeriksa dokumen saat ini.

Cloud build gagal pada tanda tangan. Kredensial hilang atau profil pengaturan tidak sesuai dengan ID aplikasi. Simpan kembali kredensial dan jalankan permintaan build ulang.

Upload ditolak karena tidak kompatibel. Paket perlu perubahan native. Kirimkan build toko terlebih dahulu, kemudian live update.

Penutupan

Agen AI menjadi berguna untuk Capacitor ketika mereka berhenti menebak. Pasang keterampilan Capacitor sehingga mengikuti prosedur yang benar, hubungkan MCP publik Capgo untuk dokumen dan MCP CLI untuk aksi akun, dan jaga beberapa pagar di sekitar perubahan native, rahasia, dan saluran produksi. Untuk informasi lebih lanjut tentang membangun fitur AI ke dalam aplikasi itu sendiri, baca Mengapa Capacitor berfungsi baik untuk aplikasi AI mobile.