Claude AI di VS Code & Cursor: Setup Integrasi Developer Tools

Bagian 5 dari series Kuasai Claude AI ini fokus ke hal praktis: bagaimana kamu bisa langsung pakai Claude di editor favorit tanpa bolak-balik ke browser. Turns out, banyak developer yang gak tau kalau Claude bisa diintegrasikan langsung ke VS Code atau bahkan native di Cursor — dengan beberapa klik dan setup minimal. Artikel ini bakal cover cara setup Cursor (yang udah built-in Claude), ekstension VS Code yang support Claude API, dan tips-tips praktis biar Claude jadi pair programmer yang beneran membantu workflow kamu setiap hari.

Di episode sebelumnya kita udah bahas kenapa Claude bagus untuk coding — reasoning yang solid, debugging yang akurat, dan mampu handle konteks file yang panjang. Tapi semua itu jadi maksimal kalau Claude bisa diakses langsung dari editor kamu, bukan harus buka tab browser lagi.

Hari ini kita praktek: setup Claude di VS Code, Cursor, dan tools developer lainnya. Siap? Mari dimulai.

Opsi 1: Pakai Cursor — Built-In Support Claude

Kalau belum tau, Cursor adalah editor yang dikembang khusus untuk AI-assisted coding. Dia built on top Chromium dan VSCode, jadi interface-nya familiar. Yang paling penting: Cursor sudah native support Claude tanpa perlu ekstension atau setup ribet.

Cara setup:

Download Cursor dari cursor.sh atau install via Homebrew (macOS) / package manager (Linux)
Buka Cursor, tekan Cmd+Shift+P (macOS) atau Ctrl+Shift+P (Windows/Linux)
Ketik "Cursor Settings" atau buka Settings menu
Cari tab "Models" atau "AI Provider"
Pilih "Claude" dari dropdown
Pilih model — biasanya Claude 3.5 Sonnet adalah default dan recommended untuk coding
Kalau perlu API key custom, paste Anthropic API key kamu di sana
Hit save, done!

Setelah setup, kamu bisa langsung pakai shortcut Cmd+K (macOS) atau Ctrl+K (Windows/Linux) untuk buka Claude chat di sidebar. Tik pertanyaan, Claude akan analyze code kamu dan suggest perubahan dengan inline diff.

Pro tip: Di Cursor, kamu bisa select code snippet, tekan Cmd+K, tanya "refactor ini jadi lebih readable" — Claude akan show diff langsung di editor, dan kamu tinggal accept atau reject dengan satu klik.

Opsi 2: VS Code + Ekstension yang Support Anthropic API

Kalau kamu loyal sama VS Code, tenang — ada beberapa ekstension bagus yang support Claude API dari Anthropic. Cara setup-nya juga straightforward.

Rekomendasi ekstension populer:

Codeium — Support multiple models termasuk Claude, free tier cukup generous untuk daily use
Anthropic Claude VSCode Extension — Ekstension resmi dari Anthropic, integrasi native ke Anthropic API
Continue.dev — Open-source, support Claude dan models lain, highly customizable

Setup detail pakai Continue.dev (paling fleksibel):

Install ekstension "Continue" dari VS Code marketplace
Tekan Cmd+Shift+P dan cari "Continue: Open config"

File config.json akan terbuka. Di sana, edit section "models" dan tambahkan Claude config berikut:

{
  "models": [
    {
      "title": "Claude 3.5 Sonnet",
      "provider": "anthropic",
      "model": "claude-3-5-sonnet-20241022",
      "apiKey": "${ANTHROPIC_API_KEY}"
    }
  ]
}

Generate API key dari console.anthropic.com, copy key-nya
Di terminal, set environment variable: export ANTHROPIC_API_KEY="sk-ant-..." (paste key kamu)
Restart VS Code
Buka Continue sidebar (icon atau Cmd+Shift+L), pilih Claude dari dropdown model

Setelah itu, kamu bisa chat dengan Claude langsung di VS Code sidebar, atau select code dan tekan shortcut untuk refactor/explain inline.

Dapat Anthropic API Key — Syarat & Cara

Kalau belum punya Anthropic account, langkah pertama:

Buka console.anthropic.com, sign up dengan email atau Google account
Verify email kamu
Masuk ke "API Keys" section di left sidebar
Click "Create Key" atau "New Key"
Copy key yang muncul (hanya muncul sekali, jadi jangan lupa simpan di tempat aman — password manager adalah ide bagus)
Pastikan account kamu udah ada credit atau billing setup untuk bisa call API (free trial biasanya $5 credit untuk 3 bulan pertama)

Key ini adalah credential kamu untuk API, jadi jangan share ke public repo atau commit ke git. Selalu pakai environment variable atau .env file yang di-gitignore.

Setup Custom Integration — Untuk Tim atau Workflow Khusus

Kalau kamu mau setup Claude integration yang lebih custom — misalnya untuk tim dev, atau pakai Claude API di build script — ini durasinya agak panjang, tapi doable:

Contoh: Integrate Claude ke GitHub Copilot alternative atau custom tool:

import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

async function reviewCode(codeSnippet) {
  const message = await client.messages.create({
    model: "claude-3-5-sonnet-20241022",
    max_tokens: 1024,
    messages: [
      {
        role: "user",
        content: `Review code ini dan suggest improvements:\n\n${codeSnippet}`,
      },
    ],
  });
  return message.content[0].text;
}

// Usage
const code = `function add(a, b) { return a + b; }`;
reviewCode(code).then(console.log);

Kalau pakai Node.js, install terlebih dulu: npm install @anthropic-ai/sdk. Script di atas bisa kamu jalankan di pre-commit hook, CI/CD pipeline, atau sebagai part dari custom linter.

Claude.ai di Browser — Still Valid untuk Quick Pair Programming

Sambil setup editor, jangan lupakan claude.ai yang bisa langsung diakses via browser. Masih jadi option terbaik kalau:

Kamu lagi switch machine atau gak mau install ekstension
Kamu butuh screen-share dengan teammate untuk pair programming
Project kamu butuh model terbaru yang belum tersedia di ekstension (usually Claude.ai upgrade dulu)
Kamu lagi prototype / brainstorm dan gak perlu full editor integration

Pro tip: Tab Claude.ai di browser + split screen pake IDE di sisi lain adalah setup populer di banyak developer untuk interactive pair programming session.

Tips Praktis — Workflow yang Proven

Setelah setup selesai, ini beberapa workflow yang sering aku pakai dan effective:

Inline explain: Select syntax yang bingung, tanya ke Claude "explain ini", dapat penjelasan instant tanpa lose focus dari code
Refactor on demand: Cmd+K, paste function yang ruwet, bilang "simplify ini", terima suggest, done
Test generator: Paste function, tanya "generate unit test", Claude bikin test file yang ready to run
Documentation helper: Select class atau method, tanya "generate JSDoc", embed docs instant
Debugging session: Paste error trace + relevant code, Claude usually bisa pinpoint issue dalam seconds
Code review mode: Paste PR diff, Claude review untuk potential bugs atau pattern improvement

Kunci: jangan terlalu expect Claude untuk nulis 500-line fitur kompleks. Dia shine di task-task focused seperti refactor, explain, generate test, atau debug. Untuk fitur besar, breakdown menjadi step kecil dan iterate.

Common Pitfalls & Troubleshooting

1. "API Key not recognized" — Pastikan key kamu di-set di environment variable dengan format yang benar. Cek di terminal: echo $ANTHROPIC_API_KEY. Kalau empty, export lagi atau setup di .env file ekstension kamu.

2. "Rate limit exceeded" — Kamu call API terlalu banyak dalam short time. Solusi: batch request, atau upgrade tier account kamu di console.anthropic.com.

3. "Model not available" — Nama model outdated atau typo. Cek dokumentasi Anthropic terbaru untuk list model yang available. Biasanya format: claude-3-5-sonnet-20241022 atau claude-3-opus-20240229.

4. Ekstension jalan lambat / hang — Biasanya karena token limit settings terlalu tinggi. Reduce max_tokens atau context_length di config.

Kesimpulan

Claude bukan hanya chatbot di browser — bisa jadi assistant yang integrated native di workflow development kamu sehari-hari. Dari Cursor yang built-in sampai VS Code ekstension custom, setup-nya relatif mudah dan payoff-nya besar.

Rekomendasiku: kalau baru coba, mulai dari Cursor atau Continue.dev. Setup 15 menit, hasilnya langsung terasa di productivity. Setelah comfortable, bisa eksplorasi custom integration untuk use case spesifik tim atau project kamu. Selamat integrasi!