Membangun dengan Gemini 3.1 Pro: Tutorial Agen Koding Terultimate

Gemini 3.1 Pro adalah model fondasi tercanggih dari Google untuk penalaran, pengkodean, dan pemahaman multimodal. Ini dibangun di atas seri Gemini 3 dengan kinerja konteks panjang yang lebih kuat, penggunaan alat yang ditingkatkan, dan penalaran bertahap yang lebih andal. 

Di berbagai tolok ukur pengkodean dan penalaran utama, model ini secara konsisten berada di peringkat teratas, menjadikannya salah satu pilihan terkuat yang tersedia saat ini untuk pengembangan perangkat lunak serius dan alur kerja agen.

Dalam panduan terultimate ini, saya akan menunjukkan cara terbaik menggunakan Gemini 3.1 Pro untuk koding berbasis agen. Anda akan mempelajari cara menginstal dan mengonfigurasi Gemini CLI baru, menyiapkan ekstensi, membuat keterampilan kustom, dan vibe code sebuah aplikasi bernama Tinder for Geeks. Saya juga akan menunjukkan cara membuat konteks persisten, memodifikasi memori, menambahkan keandalan dan pagar pembatas, menguji aplikasi Anda secara lokal, dan men-deploy-nya ke cloud.

Saya juga merekomendasikan panduan kami tentang model generasi gambar terbaru Google, Nano Banana 2.

Tumpukan Agenik Gemini 3.1 Pro

Ada empat cara utama menggunakan Gemini 3.1 Pro untuk koding berbasis agen. Pilihan yang tepat bergantung pada tingkat pengalaman Anda dan seberapa banyak kontrol yang Anda inginkan atas tumpukan teknologi dan alur kerja Anda.

1. Google AI Studio Build: Builder terpandu berbasis browser untuk prototipe cepat dan vibe coding dengan Gemini 3.1 Pro.
2. Gemini Code Assist untuk VS Code: Asisten koding AI di dalam editor yang menghadirkan alur kerja ala agen langsung ke IDE Anda.
3. Google Antigravity: Lingkungan pengembangan asli AI lengkap yang dirancang untuk koding otonom berbasis agen dari ujung ke ujung.
4. Gemini CLI: Agen berbasis terminal yang andal yang memberi Anda kontrol penuh atas konteks, memori, keterampilan kustom, dan alur kerja.

1. Google AI Studio Build

Mode Build di Google AI Studio adalah jalur tercepat bagi pemula dan non-spesialis. Anda dapat melakukan “vibe code” aplikasi full-stack menggunakan bahasa natural, dengan dukungan untuk runtime full-stack, logika sisi server, manajemen secret, dan paket npm. Cocok saat Anda ingin cepat membuat prototipe di browser sebelum berkomitmen pada setup dev lokal penuh.

2. Ekstensi VSCode

Jika Anda nyaman di VS Code, Gemini Code Assist memberi Anda mode agen yang dapat menghasilkan kode, menjawab pertanyaan, dan menggunakan konteks IDE seperti file yang terbuka dan file konteks khusus. 

Jika Anda menginginkan setup multi-model yang lebih fleksibel, alat seperti Kilo Code bisa berjalan di dalam VS Code dan memungkinkan Anda merutekan ke berbagai model, termasuk Gemini 3.1 Pro, lalu mengiterasi dengan alur kerja gaya agen di dalam editor Anda.

3. Google Antigravity

Antigravity adalah platform pengembangan yang berfokus pada agen dari Google yang menggabungkan pengalaman IDE yang familier dengan pengelola gaya “mission control” untuk mengoordinasikan agen otonom. Dirancang untuk tugas end-to-end di mana agen merencanakan, mengode, menjalankan pemeriksaan, dan menghasilkan artefak terverifikasi yang dapat Anda tinjau. 

Pilih ini saat Anda menginginkan IDE terintegrasi sepenuhnya yang dibangun di sekitar agen, bukan panel chat yang ditempelkan ke editor.

4. Gemini CLI

Gemini CLI menghadirkan Gemini langsung ke terminal Anda sebagai agen open source, sehingga Anda dapat bekerja pada repo nyata, mengedit file, mengotomatiskan alur kerja, dan menjaga semuanya dekat dengan tooling lokal Anda. 

Ini adalah pilihan terbaik saat Anda menginginkan kontrol terperinci atas konteks yang dapat dilihat model, alat yang dapat dijalankannya, bagaimana perilaku memori, dan bagaimana Anda memperluasnya dengan alat dan integrasi baru. Ini juga terhubung ke kuota Gemini Code Assist dan mendukung opsi otentikasi berbeda tergantung lokasi Anda menjalankannya. 

Menyiapkan Lingkungan Pengembangan Anda untuk Gemini 3.1 Pro

Untuk setup koding berbasis agen yang tepat, kita akan menggunakan Gemini CLI karena ini memberi kita kontrol penuh atas konteks, izin, memori, ekstensi, keterampilan, pengujian, dan alur kerja deployment. 

Tidak seperti builder berbasis browser saja, Gemini CLI berjalan langsung di lingkungan pengembangan lokal Anda, memungkinkan Anda bekerja pada repositori nyata, mengelola file, dan mengintegrasikan alat dengan cara yang siap produksi.

Di bagian ini, kita akan menginstal Gemini CLI, melakukan autentikasi, mengonfigurasi model ke Gemini 3.1 Pro, menjelajahi marketplace ekstensi, menginstal ekstensi yang diperlukan, lalu membuat keterampilan kustom yang disesuaikan khusus untuk tumpukan teknologi kita. 

Ini memastikan agen memahami arsitektur, standar koding, dan target deployment kita sejak awal.

Instal dan autentikasi Gemini CLI untuk pengembangan agenik 

Sebelum menginstal Gemini CLI, pastikan Anda memiliki:

• Node.js versi 20 atau lebih tinggi
• npm terpasang dengan benar
• Akun Google Cloud dengan penagihan diaktifkan
• Akses ke Gemini 3.1 Pro melalui Gemini API

Instal Gemini CLI secara global:

npm install -g @google/gemini-cli

Buat folder proyek Anda dan masuk ke dalamnya:

mkdir love-geek
cd love-geek

Luncurkan Gemini CLI:

gemini 

Pada peluncuran pertama, autentikasi menggunakan akun Google Anda atau API key. Jika Anda menggunakan autentikasi API key, pastikan telah dikonfigurasi dengan benar di variabel lingkungan Anda. Pastikan penagihan diaktifkan di Google Cloud agar Anda dapat mengakses Gemini 3.1 Pro tanpa gangguan.

Beginilah tampilan Gemini CLI kita di awal. 

Setelah masuk ke Gemini CLI, ketik “/model”. Ini akan membuka menu pemilihan model. Pilih opsi pemilihan manual dan pilih model pratinjau Gemini 3.1 Pro terbaru dari daftar yang tersedia.

Memilih model yang tepat sangat krusial. Alur kerja agenik sangat bergantung pada penanganan konteks panjang, penggunaan alat, dan penalaran terstruktur, yang paling kuat di Gemini 3.1 Pro.

Perluas Gemini CLI dengan ekstensi

Gemini CLI menyertakan marketplace ekstensi yang konsepnya mirip dengan ekstensi VS Code. Ekstensi memungkinkan Anda menambahkan server MCP, alat retrieval, API eksternal, dan sistem konteks yang ditingkatkan sehingga agen Anda dapat beroperasi melampaui sekadar penyelesaian prompt sederhana.

Untuk tumpukan kita, kita akan menginstal:

1. Exa MCP Server untuk pencarian web dan repositori tingkat lanjut
2. Context7 untuk pengambilan dokumentasi terbaru untuk tumpukan teknologi modern

Instal dengan:

gemini extensions install https://github.com/exa-labs/exa-mcp-server
gemini extensions install https://github.com/upstash/context7

Setelah instalasi, mulai ulang Gemini CLI:

gemini 

Sekarang Anda akan melihat server MCP tambahan dan keterampilan yang dimuat ke lingkungan Anda. Alat-alat ini memungkinkan agen untuk menelusuri web, mengambil repositori GitHub, dan menarik dokumentasi terbaru langsung ke dalam konteks penalarannya.

Buat keterampilan kustom untuk aplikasi web 

Ekstensi yang diinstal bersifat serbaguna. Untuk membangun aplikasi siap produksi, kita memerlukan keterampilan spesifik proyek yang mengenkode praktik terbaik untuk tumpukan kita secara tepat.

Tumpukan kita:

• Next.js App Router
• Tailwind CSS + shadcn/ui
• Drizzle ORM dengan Neon Postgres
• Autentikasi Clerk
• Vitest
• Deployment Vercel

Gunakan prompt berikut di dalam Gemini CLI untuk menghasilkan keterampilan kustom modular:

Generate the following skills:

1. nextjs-app-router-skill (enforce App Router + Server Components best practices)
2. drizzle-neon-skill (schema, migrations, relations, Neon connection)
3. clerk-auth-skill (middleware, protected routes, secure server-side auth)
4. vitest-testing-skill (unit tests for core logic and edge cases)
5. vercel-deploy-skill (env setup and production deployment rules)"

Setelah dikirim, Gemini 3.1 Pro akan menghasilkan definisi keterampilan terstruktur. Kemudian akan meminta Anda untuk memasangnya secara lokal.

Setujui setiap instalasi. Saat diminta izin, tekan Shift + Tab untuk memindahkan fokus ke terminal dan ketik “Y”. Ulangi untuk semua lima keterampilan.

Setelah instalasi, muat ulang keterampilan dengan mengetik “/skills reload” di dalam Gemini CLI. 

Untuk memverifikasi, ketik “/skills list”. Anda akan melihat semua keterampilan kustom Anda tercantum. Ini mengonfirmasi keterampilan berhasil ditambahkan.

Pada titik ini, agen Gemini 3.1 Pro Anda tidak lagi generik. Ia memahami tumpukan Anda, aturan basis data Anda, batasan autentikasi Anda, kerangka pengujian Anda, dan target deployment Anda.

Proyek Praktis: Membangun “Tinder for Geeks” Menggunakan Gemini 3.1 Pro

Sekarang kita akan merencanakan dan membangun aplikasi Tinder for Geeks yang lengkap, siap produksi, menggunakan Gemini 3.1 Pro dalam mode agenik penuh. Ini bukan demo mainan. Kita akan merancang arsitektur, menghasilkan skema, mengimplementasikan mesin pencocokan, menambahkan autentikasi, menguji logika inti, dan men-deploy ke Vercel dengan standar produksi yang tepat.

1. Prompt awal untuk membangun aplikasi

Di dalam Gemini CLI, mulailah dengan instruksi yang terstruktur dan eksplisit. Kualitas prompt pertama Anda menentukan seberapa baik agen merencanakan arsitektur alih-alih langsung melompat ke pembuatan file acak.

Ketik berikut ini:

Build a production-ready MVP called "Tinder for Geeks".

App Requirements:
- Swipe-based profile browsing (like / dislike)
- Mutual likes create a match
- Matches page
- Authenticated users only
- Clean modern UI using Tailwind + shadcn/ui

Tech Stack (do not change):
- Next.js App Router (TypeScript)
- Server Actions + Route Handlers
- Postgres on Neon
- Drizzle ORM with migrations
- Clerk authentication
- Vitest for unit testing
- Deployment-ready for Vercel

Execution Rules:
1. Show folder structure first.
2. Generate database schema and migrations.
3. Implement API logic and matching engine.
4. Build swipe UI.
5. Add protected routes.
6. Generate unit tests for matching logic.
7. Provide an environment variable checklist for Vercel deployment.

Keep explanations minimal.
Focus on clean, modular, production-ready code.
Validate each step before moving to the next.

Setelah Anda mengirimkan prompt, Gemini 3.1 Pro tidak akan langsung mulai menghasilkan file acak. Ia akan terlebih dahulu mempertimbangkan struktur proyek secara keseluruhan dan menentukan keterampilan spesifik tumpukan mana yang harus diaktifkan. 

Karena kita sebelumnya telah memasang keterampilan kustom, CLI mungkin secara otomatis menyarankan mengaktifkan modul seperti keterampilan Next.js App Router atau keterampilan Drizzle ORM.

Anda akan melihat prompt izin yang menanyakan apakah akan mengaktifkan keterampilan ini. Setiap keterampilan menyuntikkan batasan spesifik tumpukan, standar arsitektur, dan praktik terbaik ke dalam penalaran agen. Menyetujuinya memastikan kode yang dihasilkan mengikuti pola produksi yang tepat alih-alih boilerplate generik.

Jika Anda lebih menyukai alur kerja yang lebih cepat dan tidak ingin menyetujui setiap aktivasi atau penulisan file secara manual, Anda dapat beralih ke mode YOLO dengan menekan CTRL + Y.

Dalam mode YOLO, agen melanjutkan tanpa prompt konfirmasi. Ini berguna untuk prototipe cepat, tetapi sebaiknya digunakan dengan hati-hati di repositori produksi di mana perubahan file dan izin memerlukan kontrol yang lebih ketat.

Di akhir, Gemini CLI memberikan ringkasan terstruktur tentang:

• File yang dibuat
• Fitur yang diimplementasikan
• Definisi skema basis data
• Endpoint API
• Variabel lingkungan yang diperlukan

Ini juga akan menghasilkan daftar periksa deployment Vercel sehingga Anda tahu persis kunci API dan variabel lingkungan mana yang perlu dikonfigurasi sebelum deployment.

2. Persistenkan konteks dan memori

Sekarang kita akan membuat agen memiliki status dengan membuat memori proyek persisten menggunakan perintah /init di dalam Gemini CLI.

Ini akan menghasilkan file GEMINI.md di root proyek Anda. File ini bertindak sebagai memori hidup untuk agen. Ini merangkum struktur proyek, tumpukan teknologi, konvensi, perintah build, perintah uji, dan instruksi deployment Anda.

Berikutnya, kita ingin Gemini berperilaku seperti engineer yang disiplin, bukan generator kode kasual. Tambahkan instruksi berikut ke memori:

“Setelah setiap perubahan besar, secara otomatis stage file terkait, validasi tipe dan tes, lalu buat commit git kecil yang atomik menggunakan format conventional commit, jangan pernah meng-commit secret, dan tampilkan pesan commit sebelum melanjutkan.”

Ini menegakkan:

• Commit inkremental yang rapi
• Validasi keamanan tipe
• Verifikasi tes sebelum perubahan difinalisasi
• Kebersihan commit yang baik

Sekarang agen akan otomatis mengikuti alur kerja Git profesional setelah setiap penambahan fitur.

Kita juga ingin agen menangani publikasi repositori dan validasi CI menggunakan GitHub CLI.

Tambahkan ini ke memori:

“Perbarui Memori: Ingat untuk menggunakan GitHub CLI (gh) untuk memublikasikan repositori ini jika belum dipublikasikan, push semua commit ke branch utama, lalu periksa dan laporkan status workflow GitHub Actions saat ini.”

Ini memastikan:

• Repositori dipublikasikan secara otomatis
• Semua commit dipush secara konsisten
• Status CI diperiksa setelah setiap pembaruan
• Anda diberi tahu jika ada workflow yang gagal

Pada titik ini, agen Gemini 3.1 Pro Anda tidak lagi tanpa status. Ia memahami proyek Anda, mengikuti disiplin rekayasa, mengelola Git dengan benar, dan memantau CI. Di sinilah koding agenik menjadi sangat kuat.

3. Tambahkan keandalan dan pagar pembatas

Kebanyakan aplikasi vibe-coded gagal bukan karena fitur yang kurang, tetapi karena tidak adanya pengaman. Aplikasi siap produksi harus menangani input berbahaya, kasus tepi yang tak terduga, kondisi balapan, dan penyalahgunaan API. Jika Anda melewatkan langkah ini, aplikasi Anda mungkin berfungsi dalam mode demo tetapi gagal saat menghadapi pengguna nyata atau penyalahgunaan otomatis.

Sekarang kita instruksikan Gemini 3.1 Pro untuk memperkuat sistem.

Gunakan perintah berikut di dalam Gemini CLI:

“Tambahkan keandalan dan pagar pembatas ke proyek ini dengan menegakkan validasi input, penanganan error yang tepat, pembatasan laju pada rute API, verifikasi autentikasi Clerk yang aman di server, perlindungan terhadap tindakan duplikat, logging untuk alur kritis, dan pencegahan perubahan API yang merusak.”

4. Konfigurasikan variabel lingkungan dan validasi lokal

Sekarang kita menghubungkan aplikasi kita ke layanan produksi nyata. Kita menggunakan Clerk untuk autentikasi dan Neon untuk basis data Postgres terkelola penuh. Langkah ini mengubah kode yang dihasilkan menjadi sistem full-stack yang berfungsi.

Kunjungi clerk.com dan buat akun gratis.

Buat aplikasi baru dari dasbor. Clerk akan otomatis menghasilkan:

• Publishable key
• Secret key

Salin publishable key dan secret key dari dasbor utama. Ini akan ditambahkan ke variabel lingkungan Anda.

Berikutnya, buka neon.tech dan buat akun gratis.

Buat proyek baru. Neon akan menyediakan basis data Postgres terkelola untuk Anda.

Setelah pembuatan proyek:

• Buka dasbor
• Temukan connection string
• Salin URL koneksi Postgres lengkap

URL ini akan digunakan oleh Drizzle ORM untuk terhubung ke basis data Anda.

Gunakan file .env.example yang disediakan sebagai templat. Buat file baru .env.local.

Gantikan nilai placeholder dengan:

• Kunci publishable Clerk
• Kunci rahasia Clerk
• Connection string basis data Neon

Pastikan Anda tidak pernah meng-commit .env.local ke Git.

Setelah variabel lingkungan Anda dikonfigurasi, kembali ke Gemini CLI dan ketik:

“Saya telah menambahkan API key Clerk dan Neon ke variabel lingkungan. Harap jalankan aplikasi secara lokal, verifikasi konektivitas basis data, uji alur autentikasi, dan laporkan error apa pun.”

Gemini 3.1 Pro sekarang seharusnya:

• Menyalakan server pengembangan
• Menjalankan migrasi basis data
• Mengonfirmasi konektivitas Neon
• Memvalidasi penanganan sesi Clerk
• Menguji rute terlindungi
• Melaporkan error runtime apa pun

Jika semuanya dikonfigurasi dengan benar, CLI akan memberikan URL pengembangan lokal seperti http://localhost:3000.

Buka URL (http://localhost:3000) di browser Anda. 

Klik “Create Account” dan gunakan masuk dengan Google untuk setup tercepat.

Setelah autentikasi, lengkapi profil Anda dengan nama, bio, dan gambar tampilan.

Lalu, Anda akan diarahkan ke antarmuka swipe. Anda dapat swipe kiri untuk menolak profil atau swipe kanan untuk menyukainya. Jika dua pengguna saling menyukai, sebuah kecocokan dibuat dan ditampilkan di halaman matches.

Dalam hitungan menit, kini Anda memiliki aplikasi web yang sepenuhnya fungsional, terautentikasi, dan didukung basis data yang berjalan secara lokal.

Inilah kekuatan koding agenik dengan Gemini 3.1 Pro. Apa yang biasanya memakan waktu berjam-jam untuk setup dan debugging, kini menjadi alur kerja terstruktur dan terpandu yang menghasilkan aplikasi yang berfungsi dan dapat dideploy dengan cepat serta andal.

5. Deploy ke produksi dengan Vercel

Sekarang aplikasi berfungsi secara lokal, saatnya men-deploy ke produksi. Karena sebelumnya kita mengonfigurasi otomatisasi Git, deployment menjadi sederhana.

Pertama, instruksikan Gemini CLI:

“Commit dan push semua perubahan ke GitHub.”

Ini memastikan:

• Semua perubahan lokal ter-commit dengan benar
• Tidak ada secret yang disertakan
• Branch utama mutakhir
• Repositori siap untuk deployment

Repositori Anda sekarang seharusnya tersedia di GitHub kingabzpro/love-geek.

Kunjungi https://vercel.com dan buat akun gratis. Hubungkan akun GitHub Anda saat diminta. Vercel terintegrasi langsung dengan repositori GitHub, memungkinkan deployment otomatis pada setiap push.

Setelah terhubung:

• Klik “Add New Project”
• Pilih repositori love-geek
• Impor proyek

Vercel secara otomatis mendeteksi bahwa ini adalah aplikasi Next.js dan mengonfigurasi pengaturan build yang sesuai.

Sebelum deployment, gulir ke bagian Environment Variables.

Klik “Import .env” atau tambahkan secara manual:

• Kunci publishable Clerk
• Kunci rahasia Clerk
• URL basis data Neon
• Variabel lingkungan lain yang digunakan secara lokal

Pastikan semua variabel lingkungan produksi cocok dengan nilai .env.local

Klik Deploy.

Vercel akan:

• Menginstal dependensi
• Membangun proyek Next.js
• Menjalankan build produksi
• Menyediakan deployment

Setelah selesai, aplikasi Anda akan live di https://love-geek.vercel.app.

Buka URL live dan uji:

• Alur autentikasi
• Pembuatan profil
• Fungsionalitas swipe
• Pembuatan kecocokan
• Rute terlindungi

Jika semuanya berfungsi, kini Anda memiliki aplikasi web yang sepenuhnya dideploy, terautentikasi, dan didukung basis data yang berjalan di produksi.

Dari ide hingga produk yang dideploy dalam waktu kurang dari 30 menit.

Sekarang, setiap kali Anda mendorong fitur baru ke GitHub, Vercel akan secara otomatis men-deploy ulang aplikasi Anda. Dengan Gemini 3.1 Pro yang mengelola struktur, memori, dan pagar pembatas, Anda dapat terus menambahkan fitur dengan percaya diri dan mengembangkan ini menjadi fondasi startup siap produksi dalam hitungan hari.

Pemikiran Akhir

Sejujurnya, saya benar-benar terkesan dengan build pertama. Aplikasi bekerja end-to-end dengan autentikasi, integrasi basis data, logika swipe, dan deployment yang semuanya ditangani secara terstruktur. Ada beberapa celah kecil saat pengujian, seperti perlu secara manual meminta profil seed sementara untuk benar-benar menguji fungsionalitas swipe. Itu bukan keterbatasan model, hanya sesuatu yang perlu saya jelaskan lebih jelas.

Yang paling menonjol adalah kemampuan debugging Gemini 3.1 Pro. Saat aplikasi memunculkan error atau ketika muncul masalah konfigurasi, model ini sangat efektif menelusuri masalah, menyarankan perbaikan, dan memvalidasi solusi langkah demi langkah. Ia tidak asal menambal error. Ia menalarinya.

Ekosistem di sekitarnya membuat perbedaan besar. Kombinasi Gemini CLI, keterampilan kustom, ekstensi, memori persisten, dan mode YOLO menciptakan alur kerja pengembangan yang kuat. Sistem memori mengurangi penjelasan berulang, keterampilan kustom menegakkan disiplin arsitektural, dan ekstensi meningkatkan akurasi dokumentasi serta pencarian.

Dari sisi biaya, membangun, debugging, dan men-deploy aplikasi full-stack ini menelan biaya sekitar 5 dolar dalam penggunaan API. Dibandingkan dengan model koding kelas atas, ini sangat masuk akal. 

Saya juga memilih untuk tidak bergantung pada paket gratis terbatas atau platform koding berbasis langganan yang sering terputus atau membatasi penggunaan. Membayar untuk pengalaman yang stabil dan berkualitas tinggi sepadan.

Secara keseluruhan, ini lebih dari sekadar membangun aplikasi. Ini adalah pengalaman belajar dalam pengembangan agenik. Memahami cara mengelola memori, membuat keterampilan kustom, menggunakan ekstensi Gemini, dan beralih secara strategis ke mode YOLO mengubah cara saya mendekati rekayasa berbantuan AI.

Saya sangat merekomendasikan alur kerja ini kepada siapa pun, terutama para vibe coder yang ingin melampaui prototipe cepat dan membangun aplikasi terstruktur, siap produksi, dengan lebih cepat dan lebih sedikit sakit kepala debugging.

Jika Anda ingin mempelajari lebih lanjut tentang membangun dengan AI agenik, saya merekomendasikan untuk melihat kursus Designing Agentic Systems with LangChain.