Alat kode AI agentik

Asisten pemrograman AI telah berkembang dari pelengkapan otomatis sederhana menjadi agen otonom yang dapat menyusun rencana, mengedit banyak file, menjalankan pengujian, dan membuat pull request. Tutorial ini membahas tiga alat utama: Claude Code, Cursor, dan GitHub Copilot.

1) Apa yang membuat sebuah alat disebut "agentik"?

Pelengkapan kode AI tradisional menyarankan beberapa baris berikutnya. Alat agentik melangkah lebih jauh:

Kemampuan	Pelengkapan otomatis	Agentik
Cakupan	Baris/fungsi saat ini	Seluruh basis kode
Perencanaan	Tidak ada	Penalaran multilangkah
Eksekusi	Hanya saran	Dapat mengedit file dan menjalankan perintah
Konteks	File saat ini	Pemahaman penuh atas repositori
Alur kerja	Reaktif	Penyelesaian tugas secara otonom

Alat agentik dapat memahami seluruh struktur proyek Anda, merencanakan perubahan di banyak file, menjalankan perubahan tersebut, melakukan pengujian, dan mengulang proses hingga tugas selesai.

2) Perbandingan singkat: Claude Code vs Cursor vs Copilot

Fitur	Claude Code	Cursor	GitHub Copilot
Antarmuka	CLI, web, plugin IDE	IDE lengkap (fork VS Code)	Ekstensi IDE
Jendela konteks	Besar (Opus berkonteks panjang)	Pengindeksan seluruh repositori	Lebih kecil, terus membaik
Pengeditan banyak file	Kuat	Sangat baik	Terus membaik
Mode rencana	Ya	Ya	Ya (lebih baru)
Harga	Tingkat Pro/Max	Kredit + langganan	Langganan
Paling cocok untuk	Arsitektur, refaktor besar	Pengembangan interaktif	Pemrograman inline

3) Dasar-dasar Claude Code

Claude Code berjalan dengan Opus 4.8 (model default-nya saat ini) dan jendela konteks besar. Instal dan lakukan autentikasi:

# Instal Claude Code (penginstal native, direkomendasikan)
curl -fsSL https://claude.ai/install.sh | bash

# Atau melalui npm (memerlukan Node 18+)
npm install -g @anthropic-ai/claude-code

# Autentikasi: jalankan claude dan ikuti perintah di browser
claude

# Mulai di proyek Anda
cd your-project
claude

Perintah dasar

# Tanyakan tentang basis kode Anda
claude "How is authentication implemented here?"

# Hasilkan kode
claude "Add a rate limiter middleware"

# Refaktor banyak file
claude "Rename UserService to AuthService across the codebase"

# Buat PR
claude "Create a PR that adds input validation to all API endpoints"

Konfigurasi proyek

Tempatkan konteks proyek dalam file CLAUDE.md di root repositori Anda. Claude Code membacanya secara otomatis pada awal setiap sesi:

# Catatan proyek

- Bahasa: TypeScript, diformat dengan Prettier
- Pengujian: Vitest, di tests/
- Jangan ubah node_modules/ atau dist/

Pengaturan yang dapat dibaca mesin (izin alat, variabel lingkungan, hook) ditempatkan di .claude/settings.json. Misalnya, untuk mewajibkan persetujuan sebelum alat destruktif dijalankan, konfigurasikan izin di sana.

Memori dan konteks

Konteks proyek persisten disimpan dalam file CLAUDE.md yang dimuat Claude Code pada awal setiap sesi, ditambah penyimpanan memori otomatis yang diperbarui Claude berdasarkan koreksi dan preferensi Anda. Untuk memberinya konteks permanen, edit CLAUDE.md alih-alih memberikan prompt "Remember:" sekali pakai:

# CLAUDE.md
Ini adalah monorepo. Kode bersama berada di packages/.

Gunakan perintah /clear di dalam sesi untuk mereset konteks kerja.

4) Fitur agentik IDE Cursor

Cursor dibangun di seputar alur kerja agentik. Fitur utamanya:

Mode Agent

Tekan Cmd+Shift+I (Mac) atau Ctrl+Shift+I (Windows/Linux) untuk membuka Composer dalam mode Agent:

Alur kerja mode Agent:
1. Jelaskan tugas Anda
2. Agen membuat rencana
3. Anda menyetujui atau mengubahnya
4. Agen menjalankan perubahan
5. Tinjau dan ulangi

Mode Plan

Untuk tugas kompleks, gunakan mode Plan secara eksplisit:

@plan Tambahkan autentikasi pengguna dengan:
- Token JWT
- Rotasi refresh token
- Hashing kata sandi dengan bcrypt
- Pembatasan laju pada upaya login

Agen akan:

1. Mempelajari kode Anda yang sudah ada
2. Membuat rencana implementasi terperinci
3. Menunggu persetujuan Anda
4. Menjalankannya langkah demi langkah

Penyisipan konteks

Gunakan @ untuk menambahkan konteks tertentu:

@file src/api/auth.ts
@folder src/middleware
@docs https://jwt.io/introduction

Implementasikan middleware verifikasi JWT dengan mengikuti pola-pola ini

Agen paralel

Jalankan beberapa agen secara bersamaan di cabang yang berbeda:

# Di Cursor:
1. Buka Command Palette
2. "Cursor: New Agent in Worktree"
3. Setiap agen bekerja secara terisolasi
4. Bandingkan hasil secara berdampingan

Cursor 3 menambahkan Agents Window (buka dengan Cmd+Shift+P lalu "Agents Window") yang menjalankan beberapa agen secara paralel di checkout lokal, git worktree, dan lingkungan cloud. Perintah /worktree menempatkan setiap agen dalam git worktree terisolasinya sendiri, sedangkan /best-of-n menjalankan tugas yang sama pada beberapa model agar Anda dapat membandingkan hasil secara berdampingan.

Aturan untuk konsistensi

Buat .cursor/rules/project.mdc:

# Aturan Proyek

## Gaya Kode
- Gunakan mode strict TypeScript
- Utamakan komponen fungsional
- Gunakan named export, bukan default export

## Pengujian
- Setiap fitur memerlukan pengujian
- Gunakan blok describe/it
- Buat mock untuk layanan eksternal

## Keamanan
- Jangan pernah commit rahasia
- Validasi semua input pengguna
- Gunakan kueri berparameter

5) Fitur agentik GitHub Copilot

Copilot telah berkembang melampaui pelengkapan otomatis:

Copilot Chat

Buka panel chat dan gunakan perintah slash:

/explain - Jelaskan kode yang dipilih
/fix - Perbaiki masalah dalam pilihan
/tests - Hasilkan pengujian
/doc - Tambahkan dokumentasi

Agen pemrograman (dari issue menjadi pull request)

# Di GitHub:
1. Buka sebuah issue GitHub
2. Tetapkan "Copilot" sebagai penerima tugas
3. Agen pemrograman bekerja di latar belakang:
   menganalisis issue, mengedit file, menjalankan pengujian
4. Agen membuka pull request untuk Anda tinjau

Ini berbeda dari mode agent Copilot di dalam IDE, yang bekerja secara sinkron bersama Anda di VS Code atau JetBrains.

Copilot kini membagi pekerjaan otonomnya menjadi dua: mode agent berjalan secara sinkron di dalam IDE Anda (VS Code dan JetBrains), menentukan file yang perlu diedit, menjalankan perintah terminal, dan mengulangi proses saat terjadi kesalahan; agen pemrograman berjalan secara asinkron di cloud, menangani issue yang ditugaskan dan menghasilkan pull request sementara Anda mengerjakan hal lain.

Saran inline dengan konteks

Copilot membaca basis kode Anda. Bantu Copilot dengan komentar:

// Middleware autentikasi yang:
// - Mengambil JWT dari header Authorization
// - Memvalidasi tanda tangan token
// - Menambahkan pengguna ke request
// - Mengembalikan 401 jika tidak valid
export function authMiddleware(req, res, next) {
  // Copilot menghasilkan implementasinya
}

6) Praktik terbaik untuk semua alat

Tulis prompt yang jelas

❌ Buruk: "Perbaiki bug"

✅ Baik: "Perbaiki null pointer exception di UserService.getById
saat pengguna tidak ditemukan. Kembalikan null alih-alih melempar error."

❌ Buruk: "Tambahkan pengujian"

✅ Baik: "Tambahkan unit test untuk CartService yang mencakup:
- Menambahkan item ke keranjang kosong
- Menghapus item
- Menghitung total dengan diskon
- Kasus khusus: jumlah negatif"

Gunakan mode rencana untuk tugas kompleks

Untuk setiap tugas yang menyentuh 3+ file, selalu:

1. Minta rencana terlebih dahulu
2. Tinjau rencana
3. Setujui atau ubah
4. Biarkan agen menjalankannya
5. Tinjau perubahan sebelum melakukan commit

Berikan konteks arsitektur

Sebelum pekerjaan besar, beri agen penjelasan singkat:

"Ini adalah arsitektur microservices:
- api-gateway: Merutekan request
- auth-service: JWT, sesi
- user-service: CRUD pengguna
- notification-service: Email, push

Layanan berkomunikasi melalui Redis pub/sub.
Basis datanya adalah PostgreSQL dengan Prisma ORM."

Test-driven development dengan agen

1. Tulis pengujian yang gagal terlebih dahulu:
   "Tulis pengujian untuk pendaftaran pengguna yang mengharapkan validasi email"

2. Biarkan agen melihat pengujian yang gagal:
   "Implementasikan pendaftaran agar pengujian ini lulus"

3. Ulangi hingga semuanya berhasil:
   "Perbaiki kegagalan pengujian yang tersisa"

7) Pertimbangan keamanan

Alat agentik memiliki kekuatan nyata. Tetapkan batasan:

Gerbang persetujuan

// .claude/config.json
{
  "safety": {
    "requireApproval": [
      "rm",
      "git push",
      "npm publish",
      "database migrations",
      "env file changes"
    ]
  }
}

Sandboxing

# Jalankan agen di lingkungan terisolasi
docker run -v $(pwd):/workspace -it claude-sandbox

# Atau gunakan git worktree untuk isolasi
git worktree add ../feature-branch feature-branch

File sensitif

# .cursorignore / .claudeignore
.env
.env.*
secrets/
credentials/
*.pem
*.key

Tinjau semua perubahan

# Sebelum menerima perubahan agen:
git diff --stat
git diff

# Gunakan staging interaktif
git add -p

# Jangan pernah melakukan auto-merge tanpa peninjauan

8) Pola alur kerja yang efektif

Pola 1: Jelajahi, Rencanakan, Jalankan

Sesi 1: "Bagaimana cara kerja sistem pembayaran?"
        → Agen menjelajah, Anda mempelajarinya

Sesi 2: "Apa yang diperlukan untuk menambahkan Stripe?"
        → Agen membuat rencana

Sesi 3: "Implementasikan integrasi Stripe"
        → Agen menjalankan rencana

Pola 2: Eksplorasi paralel

# Di Cursor dengan agen paralel:

Agen 1: "Implementasikan caching dengan Redis"
Agen 2: "Implementasikan caching dengan Memcached"
Agen 3: "Implementasikan caching dengan LRU dalam memori"

→ Bandingkan implementasi, pilih pendekatan terbaik

Pola 3: Migrasi bertahap

Langkah 1: "Identifikasi semua penggunaan API yang sudah usang"
Langkah 2: "Buat adapter untuk API baru"
Langkah 3: "Migrasikan modul A agar menggunakan adapter"
Langkah 4: "Migrasikan modul B..."
...
Langkah N: "Hapus adapter, gunakan API baru secara langsung"

Pola 4: Pengembangan fitur dengan pengujian lebih dahulu

1. "Tulis acceptance test untuk pengeditan profil pengguna"
2. "Tulis unit test untuk validasi profil"
3. "Implementasikan hingga pengujian lulus"
4. "Tambahkan integration test"
5. "Refaktor agar lebih jelas"

9) Kapan menggunakan alat yang mana

Situasi	Alat yang Direkomendasikan
Pemrograman real-time, bantuan inline	GitHub Copilot
Refaktor besar, arsitektur	Claude Code
Sesi pengembangan penuh	Cursor
Pertanyaan singkat tentang kode	Antarmuka chat apa pun
Membuat PR dari issue	Copilot Workspace
Perubahan kompleks di banyak file	Cursor Agent
Desain API, dokumentasi	Claude Code
Mempelajari basis kode baru	Cursor atau Claude Code

10) Mengukur efektivitas

Pantau metrik berikut untuk mengevaluasi alat agentik:

const metrics = {
  // Produktivitas
  suggestionsAccepted: 'persentase saran yang Anda pertahankan',
  timeToFeature: 'jumlah jam dari awal hingga PR digabungkan',
  linesPerHour: 'kecepatan penulisan kode (gunakan dengan hati-hati)',
  
  // Kualitas
  bugsIntroduced: 'cacat yang dilacak berasal dari kode buatan AI',
  testCoverage: 'cakupan pengujian kode buatan AI',
  reviewChanges: 'seberapa banyak Anda mengubah saran AI',
  
  // Biaya
  apiCosts: 'pengeluaran bulanan untuk alat AI',
  creditsUsed: 'kredit Cursor yang digunakan',
  
  // Pembelajaran
  newPatternsLearned: 'teknik yang Anda pelajari dari AI',
  codebaseUnderstanding: 'seberapa baik AI membantu Anda belajar',
}

11) Kesalahan umum

Terlalu memercayai agen

❌ Menerima perubahan besar tanpa peninjauan
❌ Membiarkan agen menjalankan perintah destruktif
❌ Tidak memahami kode sebelum merilisnya

✅ Tinjau setiap perubahan
✅ Pahami apa yang Anda rilis
✅ Gunakan agen sebagai rekan kolaborasi, bukan pengganti

Pencemaran konteks

❌ Prompt sangat besar dengan konteks yang tidak relevan
❌ Tidak menghapus konteks di antara tugas yang tidak berkaitan
❌ Menyertakan file hasil generasi dalam konteks

✅ Jaga agar prompt tetap terfokus
✅ Gunakan referensi @file tertentu
✅ Kecualikan artefak build

Ambiguitas prompt

❌ "Buat lebih baik"
❌ "Perbaiki masalahnya"
❌ "Tambahkan beberapa pengujian"

✅ "Kurangi kompleksitas waktu dari O(n²) menjadi O(n log n)"
✅ "Tangani kasus null pada baris 45 dengan mengembalikan lebih awal"
✅ "Tambahkan pengujian untuk kasus khusus: input kosong, panjang maksimum, unicode"

12) Daftar periksa untuk memulai

## Daftar Periksa Penyiapan

### Claude Code
- [ ] Instal CLI: `npm install -g @anthropic/claude-code`
- [ ] Autentikasi: `claude login`
- [ ] Buat `.claude/config.json`
- [ ] Tambahkan `.claudeignore` untuk file sensitif

### Cursor
- [ ] Unduh dari cursor.com
- [ ] Impor pengaturan VS Code
- [ ] Konfigurasikan `.cursor/rules/`
- [ ] Pelajari `Cmd+Shift+I` untuk mode Agent

### GitHub Copilot
- [ ] Instal ekstensi di IDE Anda
- [ ] Aktifkan Copilot Chat
- [ ] Coba Copilot Workspace untuk issue
- [ ] Konfigurasikan `.github/copilot-instructions.md`

### Semua Alat
- [ ] Siapkan gerbang persetujuan untuk operasi destruktif
- [ ] Buat file ignore untuk rahasia
- [ ] Tetapkan alur kerja peninjauan
- [ ] Pantau metrik sejak hari pertama

Terkait

• Rilis game web yang dimuat dengan cepat
• Web Worker untuk logika game
• Game Jam & Hackathon — alat kode AI mengubah apa yang dapat diwujudkan dalam jam 48 jam
• Perbandingan Engine Game Web — memilih engine yang cocok dengan alur kerja berbantuan AI