Membangun Aplikasi dengan Gemini 3.1 Pro: Panduan Developer untuk API, Coding & Vibe Coding

19 Februari 2026 — Gemini 3.1 Pro baru saja diluncurkan, dan ini adalah salah satu model coding terkuat yang tersedia: 80,6% pada SWE-Bench Verified, 2887 Elo di LiveCodeBench, dan jendela konteks 1 juta token dengan harga $2 per juta token input. Itu adalah kemampuan coding level frontier dengan biaya yang jauh lebih murah.

Panduan ini ditujukan bagi developer yang ingin mulai membangun dengannya hari ini. Kami membahas pengaturan API, contoh kode dalam Python dan Node.js, level pemikiran (thinking levels), caching konteks untuk optimalisasi biaya, dan bagaimana Gemini 3.1 Pro cocok dalam alur kerja vibe coding.

---

Memulai

Opsi 1: Google AI Studio (Gratis, Tanpa Setup)

Cara tercepat untuk mencoba Gemini 3.1 Pro:

1. Buka aistudio.google.com
2. Masuk dengan akun Google Anda
3. Pilih Gemini 3.1 Pro Preview dari dropdown model
4. Mulai berikan prompt

AI Studio gratis dengan batasan kuota — cocok untuk pembuatan prototipe dan eksperimen.

Opsi 2: API Key (Untuk Membangun Aplikasi)

1. Di AI Studio, buka Get API Key → Create API Key
2. Simpan key dengan aman (jangan pernah masukkan ke kontrol sumber)
3. Instal SDK:

# Python
pip install google-genai

# Node.js
npm install @google/genai

---

Panggilan API Pertama Anda

Python

from google import genai

client = genai.Client(api_key="YOUR_API_KEY")

response = client.models.generate_content(
    model="gemini-3.1-pro-preview",
    contents="Write a Python function that finds the longest common subsequence of two strings. Include type hints and docstring."
)

print(response.text)

Node.js

import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: "YOUR_API_KEY" });

const response = await ai.models.generateContent({
  model: "gemini-3.1-pro-preview",
  contents: "Write a TypeScript Express middleware that validates JWT tokens and extracts user info.",
});

console.log(response.text);

Dengan Level Pemikiran (Thinking Levels)

# Pemikiran High untuk debugging kompleks
response = client.models.generate_content(
    model="gemini-3.1-pro-preview",
    contents="""
    This Go server has a race condition that causes intermittent 500 errors
    under load. Here's the relevant code:

    [paste your code here]

    Find the race condition and explain the fix.
    """,
    config={
        "thinking_config": {"thinking_level": "HIGH"}
    }
)

---

Coding dengan Gemini 3.1 Pro

Konteks Benchmark

Sebelum mendalami kemampuannya, berikut adalah posisi Gemini 3.1 Pro di antara model coding lainnya:

Benchmark	Gemini 3.1 Pro	GPT-5.3-Codex	Claude Opus 4.6
SWE-Bench Verified	80,6%	76,2%	72,6%
Terminal-Bench 2.0	68,5%	77,3%	—
LiveCodeBench Pro	2887 Elo	—	—

Ini merupakan peningkatan 15% dibandingkan versi pratinjau Gemini 3 Pro terbaik, menggunakan lebih sedikit token output untuk menghasilkan hasil yang lebih baik.

Pembuatan Kode (Code Generation)

Gemini 3.1 Pro menghasilkan kode kualitas produksi di berbagai bahasa. Konteks 1 juta token berarti Anda dapat menyertakan seluruh basis kode yang ada untuk pembuatan kode yang sadar konteks:

# Muat konteks basis kode Anda
with open("codebase_context.txt", "r") as f:
    codebase = f.read()

response = client.models.generate_content(
    model="gemini-3.1-pro-preview",
    contents=f"""
    Here is my current codebase:

    {codebase}

    Add a new API endpoint POST /api/users/bulk-import that:
    - Accepts a CSV file upload
    - Validates each row against the User schema
    - Inserts valid records in batches of 100
    - Returns a summary of successes and failures
    - Follow the existing patterns and coding style
    """,
    config={
        "thinking_config": {"thinking_level": "MEDIUM"}
    }
)

Debugging

Berikan log error, stack trace, dan kode sumber secara bersamaan. Level pemikiran High sangat sepadan dengan biaya tambahannya untuk bug yang kompleks:

response = client.models.generate_content(
    model="gemini-3.1-pro-preview",
    contents="""
    Error: Connection pool exhausted after 30 seconds
    Stack trace:
    [paste stack trace]

    Relevant source files:
    [paste db.py, connection_pool.py, api_handler.py]

    This only happens under concurrent requests (>50 rps).
    Find the root cause.
    """,
    config={
        "thinking_config": {"thinking_level": "HIGH"}
    }
)

Tinjauan Kode (Code Review)

Level pemikiran Medium memberikan tinjauan yang seimbang tanpa menganalisis kode sepele secara berlebihan:

response = client.models.generate_content(
    model="gemini-3.1-pro-preview",
    contents=f"""
    Review this pull request diff for:
    1. Bugs or logic errors
    2. Security vulnerabilities (SQL injection, XSS, etc.)
    3. Performance issues
    4. Adherence to project conventions

    Diff:
    {diff_content}
    """,
    config={
        "thinking_config": {"thinking_level": "MEDIUM"}
    }
)

---

Keunggulan Konteks 1 Juta Token

Jendela konteks 1 juta token Gemini 3.1 Pro mengubah cara Anda berinteraksi dengan kode. Alih-alih memberikan potongan kode, Anda dapat memuat seluruh proyek.

Referensi Ukuran Konteks

Apa yang Dapat Anda Muat	Perkiraan Token
File tunggal (500 baris)	~2 ribu token
Proyek kecil (50 file)	~100 ribu token
Proyek menengah (200 file)	~400 ribu token
Proyek besar (500 file)	~1 juta token

Analisis Seluruh Basis Kode

import os

def load_codebase(root_dir, extensions=('.py', '.js', '.ts', '.jsx', '.tsx')):
    """Load all source files into a single context string."""
    files = []
    for dirpath, _, filenames in os.walk(root_dir):
        for filename in filenames:
            if any(filename.endswith(ext) for ext in extensions):
                filepath = os.path.join(dirpath, filename)
                with open(filepath, 'r', errors='ignore') as f:
                    content = f.read()
                files.append(f"=== {filepath} ===\n{content}\n")
    return "\n".join(files)

codebase = load_codebase("./src")

response = client.models.generate_content(
    model="gemini-3.1-pro-preview",
    contents=f"""
    Analyze this entire codebase and identify:
    1. Architectural issues or anti-patterns
    2. Dead code that can be removed
    3. Functions that should be refactored
    4. Missing error handling at system boundaries

    Codebase:
    {codebase}
    """
)

Ini adalah sesuatu yang tidak bisa Anda lakukan dengan model berkonteks 200 ribu token tanpa melakukan pemotongan (chunking) dan kehilangan konteks lintas file.

---

Level Pemikiran: Low, Medium, High

Level pemikiran memungkinkan Anda mengontrol trade-off antara biaya dan kualitas per permintaan.

Level	Kasus Penggunaan	Overhead Token	Dampak Biaya
Low	Autocomplete, pencarian sederhana, pemformatan, klasifikasi	Minimal	~1x
Medium	Tinjauan kode, peringkasan, analisis moderat, pembuatan konten	Moderat	~2-3x
High	Debugging kompleks, penalaran multi-langkah, keputusan arsitektur	Signifikan	~5-10x

Panduan Praktis

• Low: "Ubah JSON ini menjadi interface TypeScript" — tidak perlu penalaran mendalam.
• Medium: "Tinjau PR ini untuk bug dan masalah keamanan" — butuh analisis tapi tidak mendalam.
• High: "Sistem terdistribusi ini memiliki bug konsistensi yang terputus-putus di bawah beban. Berikut adalah 15 file..." — butuh penalaran lintas file yang mendalam.

# Ganti level pemikiran berdasarkan kompleksitas tugas
def ask_gemini(prompt, complexity="medium"):
    levels = {"low": "LOW", "medium": "MEDIUM", "high": "HIGH"}

    return client.models.generate_content(
        model="gemini-3.1-pro-preview",
        contents=prompt,
        config={
            "thinking_config": {"thinking_level": levels[complexity]}
        }
    )

---

Optimalisasi Biaya

Caching Konteks

Jika aplikasi Anda berulang kali menanyakan basis kode atau dokumentasi yang sama, caching konteks mengurangi biaya input sebesar 75%:

Harga	Standar	Di-cache
Input (per 1 juta token)	$2,00	$0,50
Output (per 1 juta token)	$12,00	$12,00

# Buat konteks cache untuk basis kode Anda
cached_content = client.caches.create(
    model="gemini-3.1-pro-preview",
    contents=[{"role": "user", "parts": [{"text": codebase}]}],
    ttl="3600s"  # Cache selama 1 jam
)

# Permintaan selanjutnya menggunakan konteks yang di-cache
response = client.models.generate_content(
    model="gemini-3.1-pro-preview",
    contents="Find all SQL injection vulnerabilities in this codebase",
    cached_content=cached_content.name
)

Perbandingan Biaya untuk Alur Kerja Coding

Asumsi 500 ribu token konteks basis kode + 1 ribu kueri, 100 kueri per hari:

Strategi	Biaya Harian
Gemini 3.1 Pro (tanpa caching)	~$100
Gemini 3.1 Pro (dengan caching)	~$27
Claude Opus 4.6 (tanpa caching)	~$750

Tips Optimalisasi Lainnya

1. Gunakan level pemikiran yang tepat: Gunakan Low untuk 80% tugas, Medium untuk 15%, dan High untuk 5%.
2. Batch permintaan serupa: Kelompokkan tugas tinjauan kode untuk membagi biaya pemuatan konteks.
3. Gunakan cache secara agresif: Jika Anda menanyakan dokumen/kode yang sama lebih dari 3 kali, gunakan cache.
4. Gunakan Gemini 3 Flash untuk tugas sederhana yang tidak memerlukan penalaran tingkat Pro.

---

Vibe Coding dengan Gemini 3.1 Pro

Vibe coding adalah praktik mendeskripsikan apa yang Anda inginkan dalam bahasa alami dan membiarkan AI menghasilkan kodenya. Gemini 3.1 Pro sangat kuat di sini karena ia memahami maksud desain, bukan sekadar sintaksis.

Bagaimana Gemini Memahami "Vibe"

Tim Hostinger mencatat bahwa Gemini 3.1 Pro menerjemahkan "arahan, gaya, dan maksud produk" ke dalam kode. Saat diminta membangun situs portofolio dengan tema sastra yang muram (moody), ia mampu menalar nada atmosferik tersebut untuk merancang antarmuka yang sesuai.

Pembuatan SVG

Fitur yang menonjol: Gemini 3.1 Pro menghasilkan SVG beranimasi langsung dari deskripsi teks. Karena SVG adalah kode, tampilannya tetap tajam pada resolusi apa pun:

response = client.models.generate_content(
    model="gemini-3.1-pro-preview",
    contents="""
    Create an animated SVG logo for a tech startup called "Pulse AI".
    Design requirements:
    - Minimalist, modern style
    - Blue-to-purple gradient
    - Subtle pulse animation on the icon
    - 200x60px viewport
    - Clean, sharp edges
    """
)

# Simpan SVG secara langsung
with open("logo.svg", "w") as f:
    f.write(response.text)

Membangun Aplikasi Lengkap

Gabungkan kekuatan coding Gemini 3.1 Pro dengan pembangun aplikasi AI seperti NxCode untuk beralih dari ide ke aplikasi yang ter-deploy:

1. Deskripsikan aplikasi Anda dalam bahasa alami.
2. Gemini menghasilkan basis kode (frontend + backend + database).
3. Tinjau dan ulangi dengan prompt vibe coding.
4. Deploy langsung ke produksi.

Alur kerja ini sangat ampuh karena jendela konteks 1 juta token Gemini dapat menampung seluruh basis kode Anda yang terus berkembang saat Anda melakukan iterasi.

---

Integrasi Platform

GitHub Copilot

Gemini 3.1 Pro kini tersedia di GitHub Copilot:

1. Buka pengaturan GitHub Copilot.
2. Pilih Gemini 3.1 Pro dari pemilih model.
3. Gunakan penyelesaian kode (inline completions) dan chat seperti biasa.

Gemini CLI

Untuk pengembangan berbasis terminal:

# Instal
npm install -g @anthropic-ai/gemini-cli

# Gunakan
gemini --model gemini-3.1-pro-preview "Refactor this function to use async/await"

# Masukkan kode melalui pipe
cat src/server.js | gemini --model gemini-3.1-pro-preview "Review this code"

VS Code

Tersedia melalui ekstensi Copilot. Pilih Gemini 3.1 Pro di dropdown model untuk saran inline dan chat.

Google Antigravity

Platform pengembangan agen dari Google dengan integrasi Gemini yang mendalam. Terbaik untuk membangun agen AI multi-langkah yang kompleks yang membutuhkan penggunaan alat (tool use) dan alur kerja yang berjalan lama.

---

Tips & Praktik Terbaik

1. Mulai dengan pemikiran Medium, tingkatkan ke High hanya saat dibutuhkan — menghemat token 3-5 kali lipat.
2. Muat konteks penuh di awal — Gemini menangani 1 juta token dengan baik; jangan lakukan penyaringan agresif di awal.
3. Gunakan caching konteks untuk analisis berulang (tinjauan kode, tanya jawab dokumen, pembuatan pengujian).
4. Berikan spesifikasi format output — "Hanya kembalikan kode, tanpa penjelasan" menghemat token output.
5. Kombinasikan dengan Gemini 3 Flash untuk sistem dua tingkat: Flash untuk penyelesaian sederhana, Pro untuk penalaran kompleks.
6. Sertakan contoh dalam prompt Anda — Gemini 3.1 Pro mengikuti pola dengan sangat baik.
7. Tentukan bahasa dan framework secara eksplisit — "Tulis dalam TypeScript menggunakan Next.js 15 dengan App Router".
8. Tinjau kode yang dihasilkan — Skor 80,6% SWE-Bench sangat mengesankan tetapi bukan 100%. Selalu uji dan tinjau kembali.

---

Kesimpulan

Gemini 3.1 Pro memberikan developer kemampuan coding level frontier dengan harga yang ramah di kantong. Jendela konteks 1 juta token adalah terobosan nyata untuk analisis tingkat basis kode, dan level pemikiran memberikan kontrol yang halus atas biaya dan kualitas.

Untuk informasi lebih lanjut tentang bagaimana AI mengubah pengembangan perangkat lunak, lihat panduan vibe coding kami dan perbandingan Cursor vs Windsurf vs Claude Code. Dan untuk rincian lengkap kemampuan Gemini 3.1 Pro di luar coding, lihat panduan lengkap kami.