Tag: Claude Code

Tooling Stack Vibe Coding 2026: Claude Code + Context7 + GitHub PR + CI
Tooling Stack Vibe Coding 2026: Claude Code + Context7 + GitHub PR + CI

Vibe coding yang bagus bukan cuma soal “AI bisa nulis kode”. Kalau workflow-nya berantakan, AI malah mempercepat kekacauan.

Di 2026, stack yang masuk akal untuk developer dan tim kecil bukan lagi sekadar chat AI + copy paste. Kamu butuh alur yang membuat AI:
- paham konteks,
- bekerja dalam scope kecil,
- menghasilkan diff yang bisa direview,
- dan tetap lolos quality check sebelum masuk production.
Salah satu stack yang praktis: Claude Code + Context7 + GitHub PR + CI.

Komponen 1: Claude Code sebagai coding partner di terminal

Claude Code cocok untuk vibe coding karena bekerja dekat dengan project. Kamu bisa meminta AI membaca file, membuat plan, mengubah kode, lalu menjelaskan diff.

Gunakan pola Spec → Plan → Diff. Detailnya di: Cara Nyusun Prompt Spec → Plan → Diff.

Komponen 2: Context7 untuk dokumentasi resmi

Context7 membantu memasukkan dokumentasi resmi ke prompt dengan format terstruktur agar jawaban lebih presisi dan sesuai versi.

Baca tutorialnya: Cara Pakai Context7 untuk Nambah Dokumentasi Resmi ke Prompt.

Komponen 3: GitHub PR sebagai gerbang review

AI bisa membuat diff cepat, tapi tetap perlu gerbang review. PR sebaiknya berisi ringkasan perubahan, alasan, cara test, dan catatan area yang dibuat dengan bantuan AI.

Komponen 4: CI untuk mencegah bug dasar masuk production

CI minimal: lint, typecheck, unit test, build. Ini pagar terakhir sebelum merge.
```
name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint --if-present
      - run: npm run build
```
Alur kerja lengkap: dari ide ke merge
1. Tulis spec fitur.
2. Siapkan Context7 jika butuh dokumentasi resmi.
3. Jalankan Claude Code.
4. Minta plan tanpa edit kode.
5. Review plan.
6. Minta implementasi diff kecil.
7. Jalankan test lokal.
8. Buat GitHub PR.
9. Jalankan CI.
10. Review dan merge.
Di mana VibeRouter masuk dalam stack ini?

VibeRouter berperan sebagai infrastruktur API untuk workflow AI coding. Saat iterasi makin intens, kamu butuh jalur request yang stabil dan praktis.

Mulai setup dari sini: Tutorial Claude Code Setup Awal untuk Pemula.

Kalau sudah siap, daftar di: VibeRouter.

Ringkasan

Pola stack yang saya rekomendasikan:
```
Claude Code → Context7 → GitHub PR → CI
```
Kalau keempatnya jalan, vibe coding tidak cuma cepat, tapi juga bisa dipertanggungjawabkan. Untuk konteks awal, baca: Vibe Coding: Apa Itu.
7 Mei 2026
Cara Pakai Context7 untuk Nambah Dokumentasi Resmi ke Prompt (Biar Jawaban Nggak Ngarang)
Cara Pakai Context7 untuk Nambah Dokumentasi Resmi ke Prompt (biar jawaban nggak ngarang)

Vibe Coding jadi cepat kalau AI sudah paham konteks project. Tapi sering kali masalahnya bukan AI-nya, tapi sumber informasi yang diberikan tidak cukup akurat.

Kalau kamu hanya mengandalkan ingatan atau meng-copy paste potongan dokumen yang tidak lengkap, AI cenderung:
- menebak fitur yang tidak ada,
- memberikan cara deprecation,
- menyamakan framework A dengan framework B,
Hasilnya, kamu malah butuh waktu lebih lama untuk memperbaiki kode yang seharusnya tidak salah.

Context7 bisa membantu menyatukan dokumentasi resmi ke prompt supaya jawaban AI lebih akurat dan tidak mengarang.

Apa itu Context7 dan kenapa penting?

Context7 adalah cara menyajikan potongan dokumentasi atau spesifikasi resmi ke dalam prompt AI dengan format yang mudah diproses. Biasanya berupa ringkasan terstruktur, bukan raw markdown.

Kuncinya bukan copy paste seluruh dokumentasi, tapi:
- membagi menjadi bagian-bagian yang relevan,
- memfokuskan ke bagian yang kamu butuh saat ini,
- menambahkan sumber (link dokumentasi resmi) di akhir supaya bisa dicek ulang.
Kapan sebaiknya Context7 dipakai?

Context7 paling berguna di 3 skenario:
1. Menggunakan API/library baru — misalnya baru pakai library auth atau ORM yang belum kamu pahami detail-nya.
2. Menyamakan knowledge base di tim — agar semua developer pakai referensi yang sama, bukan “kayaknya begini”.
3. Debugging di area yang jarang dijelaskan di blog/komunitas — dokumentasi resmi sering lebih lengkap untuk kasus edge case.
Langkah 1: tentukan bagian dokumentasi yang relevan

Jangan langsung copy paste seluruh halaman docs. Tentukan dulu pertanyaan atau kasus spesifik.

Contoh:

“Saya ingin implementasi JWT refresh token menggunakan NextAuth.js v5. Bagian mana dari docs yang perlu saya baca?”

Dari situ, arahkan AI untuk:
- mengekstrak bagian JWT refresh,
- menuliskan contoh code minimal,
- menjelaskan perbedaan dengan v4 kalau ada.
Langkah 2: buat Context7 ringkas dan terstruktur

Context7 yang baik bukan raw copy, tapi ringkasan. Format yang mudah diproses biasanya seperti ini:
```
Context7: NextAuth.js v5 — JWT Refresh Token

Dokumentasi resmi: [link]
Versi: v5.x

Poin utama:
- Refresh token harus disimpan securely (httpOnly cookie).
- Provider harus di-setup dengan callbacks.
- Jangan simpan refresh token di localStorage.

Contoh implementation:
[ganti dengan potongan kode dari docs]

Catatan penting:
- Callback `jwt` dipanggil tiap token refresh.
- Pastikan `secret` di-set di environment variable.
```
Penting:
- Tambahkan link dokumentasi resmi.
- Cantumkan versi framework/library.
- Tulis “contoh implementation” secara eksplisit supaya AI tidak mengarang.
Langkah 3: sitasikan Context7 di prompt

Setelah Context7 siap, gunakan di prompt dengan referensi yang jelas:
```
Saya ingin kamu membantu implementasi JWT refresh token di NextAuth.js v5.

Berikut potongan dokumentasi resmi yang sudah saya ringkas (Context7):

[masukkan Context7 di sini]

Berikut konteks project saya:
- Project menggunakan Next.js App Router.
- Auth provider sudah ada, tapi belum pakai refresh token.
- Target: sesuai praktik best practice di Context7.

Tolong:
1. Tambahkan implementation refresh token sesuai Context7.
2. Jelaskan perbedaan penting dengan pendekatan lama.
3. Sebutkan bagian dari Context7 yang dipakai.
4. Tambahkan catatan kalau ada bagian yang butuh konfirmasi dari saya.
```
Prompt seperti ini memberi AI:
- referensi yang jelas,
- batasan scope,
- cara memverifikasi jawaban (kembali ke Context7).
Langkah 4: validasi jawaban terhadap dokumentasi resmi

Setelah AI memberikan jawaban, jangan langsung pakai. Cek minimal 2 hal:
1. Apakah code yang diusulkan mengikuti best practice di Context7?
2. Apakah ada parameter atau option yang tidak disebutkan di Context7?
Kalau AI menyebut fitur yang tidak ada di Context7, kembali ke dokumentasi resmi untuk konfirmasi.

Template Context7 yang bisa kamu pakai ulang

Berikut template sederhana yang bisa kamu adaptasi:
```
Context7: [nama teknologi]

Dokumentasi resmi: [link]
Versi: [versi]

Tujuan:
- [goal 1]
- [goal 2]

Poin utama:
- [poin 1]
- [poin 2]

Contoh implementation:
[ringkasan code snippet yang relevan]

Catatan penting:
- [catatan 1]
- [catatan 2]

Konteks project saya:
- [stack/framework]
- [constraint 1]
- [constraint 2]

Request:
[apa yang ingin kamu implementasi/refactor]
```
Kalau kamu bekerja di tim, template ini bisa jadi standar supaya semua member pakai struktur yang sama.

Kesalahan umum saat menggunakan Context7

1. Copy paste seluruh dokumentasi

Hindari melempar seluruh halaman docs ke prompt. AI bisa tertidih informasi yang tidak relevan. Fokus ke bagian yang langsung menjawab masalah.

2. Tidak mencantumkan sumber dokumentasi

Selalu cantumkan link dokumentasi resmi. Ini penting buat:
- verifikasi,
- tim yang baru gabung,
- future self yang ingin membaca ulang.
3. Menggunakan Context7 yang sudah usang

Dokumentasi bisa berubah. Selalu cek apakah Context7 masih relevan dengan versi terbaru, atau jadwalkan update berkala.

4. Mengandalkan Context7 tanpa baca original docs

Context7 adalah ringkasan. Untuk kasus kompleks, tetap perlu membaca dokumentasi asli supaya kamu memahami detail.

Cara pakai Context7 di Claude Code

Di Claude Code, pola Context7 enak dipakai karena kamu bisa memasukkan prompt langsung dari terminal.
1. Siapkan Context7 di editor.
2. Jalankan claude di terminal project.
3. Paste prompt yang sudah menyertakan Context7.
4. Minta AI menjelaskan apa yang dipahami dari Context7.
5. Eksekusi implementasi sesuai request.
Kalau kamu baru setup Claude Code, panduan lengkapnya ada di sini: Tutorial Claude Code Setup Awal untuk Pemula.

Di mana VibeRouter masuk?

VibeRouter bukan pengganti dokumentasi resmi. Kamu tetap perlu Context7 dan baca docs.

Tapi kalau workflow kamu sudah intens:
- bolak-balik minta implementasi dari AI,
- menjalankan review code otomatis,
- dan melakukan request debugging,
kamu perlu setup API yang stabil, tidak gampang terganggu, dan hemat biaya.

Di sini VibeRouter bisa menjadi jalur API untuk Claude Code dan workflow AI coding lain. Kamu tetap pakai tool yang sama, tapi request diarahkan lewat endpoint VibeRouter.

Kalau ingin memahami lebih jauh tentang router untuk AI coding, baca: Router AI untuk Coding.

Dan kalau kamu siap mulai pakai VibeRouter, daftar langsung di: VibeRouter.

Ringkasan

Context7 bukan fitur magic. Ini cara menyajikan dokumentasi resmi ke prompt dengan format yang lebih mudah diproses.
1. Baca dokumentasi resmi untuk memahami overview.
2. Buat Context7 ringkas dan terstruktur.
3. Pakai Context7 di prompt dengan referensi yang jelas.
4. Validasi jawaban AI terhadap Context7 dan dokumentasi asli.
Dengan pendekatan ini, AI coding jadi lebih akurat, jawaban tidak mengarang, dan kamu tetap menjadi decision maker di project.

Untuk mulai menggunakan Claude Code dengan setup yang baik, lanjutkan ke: Cara Pakai Claude Code dengan VibeRouter API.
7 Mei 2026
Cara Nyusun Prompt Spec → Plan → Diff Biar AI Coding Nggak Ngawur
Cara Nyusun Prompt “Spec → Plan → Diff” Biar AI Coding Nggak Ngawur

AI coding sering terlihat “ngawur” bukan karena modelnya selalu buruk. Sering kali masalahnya lebih sederhana: kita memberi instruksi yang terlalu kabur.

Contohnya: “tolong bikin fitur login” terdengar jelas bagi manusia, tapi untuk AI itu masih terlalu luas. Login pakai email? OAuth? Session atau JWT? Validasi di frontend saja atau backend juga? Kalau tidak diarahkan, AI akan menebak. Dan tebakan itulah yang biasanya bikin kode melebar, file berubah terlalu banyak, atau bug baru muncul.

Salah satu cara paling praktis untuk mengontrol hasil AI coding adalah memakai pola Spec → Plan → Diff.

Pola ini sederhana:
1. Spec: jelaskan hasil akhir yang kamu mau.
2. Plan: minta AI membuat rencana sebelum coding.
3. Diff: minta perubahan kecil dan terarah, bukan rewrite besar-besaran.
Dengan cara ini, AI tidak langsung “ngebut nulis kode”. Ia dipaksa paham konteks dulu, lalu bergerak dalam batas yang kamu tentukan.

Kenapa prompt AI coding sering gagal?

Ada tiga penyebab yang paling sering muncul.

Pertama, prompt terlalu fokus ke output, bukan batasan. Kamu minta fitur jadi, tapi tidak menjelaskan apa yang tidak boleh diubah.

Kedua, prompt terlalu besar. Satu prompt dipakai untuk minta database schema, UI, API, validasi, test, dan refactor sekaligus. Hasilnya, AI mencoba menyelesaikan semua dalam satu tarikan napas.

Ketiga, tidak ada tahap review. AI langsung diminta edit kode, padahal rencananya belum tentu sesuai struktur project.

Masalahnya, AI coding tools bekerja sangat cepat. Kalau arahnya salah, salahnya juga cepat menyebar.

Apa itu pola Spec → Plan → Diff?

Spec → Plan → Diff adalah format prompt yang memecah pekerjaan coding menjadi tiga tahap.

1. Spec: tulis target dengan jelas

Spec adalah deskripsi hasil akhir. Di tahap ini, kamu menjelaskan fitur, batasan, dan acceptance criteria.

Contoh spec yang buruk:
```
Bikin halaman pricing yang bagus.
```
Contoh spec yang lebih berguna:
```
Buat section pricing untuk landing page SaaS.
Ada 3 paket: Harian, 2 Hari, dan 3 Hari.
Tiap card berisi nama paket, harga, durasi aktif, CTA, dan 3 benefit.
Jangan ubah navbar dan footer.
Gunakan style CSS yang sudah ada.
```
Prompt kedua memberi AI pagar yang jelas. Ia tahu apa yang harus dibuat, apa yang tidak boleh disentuh, dan gaya implementasi yang diharapkan.

Template Spec yang bisa kamu pakai

Pakai format ini saat mulai fitur baru:
```
Saya ingin kamu membantu implementasi [nama fitur].

Konteks:
- Project ini menggunakan [stack/framework].
- File yang kemungkinan relevan: [sebutkan file jika tahu].
- Style atau pola existing yang harus diikuti: [jelaskan singkat].

Target hasil:
- [hasil 1]
- [hasil 2]
- [hasil 3]

Batasan:
- Jangan ubah [bagian/file].
- Jangan rewrite total jika tidak perlu.
- Prioritaskan perubahan kecil dan mudah direview.

Acceptance criteria:
- [kriteria selesai 1]
- [kriteria selesai 2]
- [kriteria selesai 3]
```
Kuncinya bukan membuat prompt panjang. Kuncinya membuat prompt yang mengurangi ruang tebak-tebakan.

Plan: jangan langsung suruh AI ngoding

Setelah spec jelas, jangan langsung minta AI edit kode. Minta ia membuat plan dulu.

Contoh:
```
Sebelum mengubah kode, baca file yang relevan lalu buat rencana implementasi singkat.
Tulis:
1. File mana yang akan diubah.
2. Perubahan apa di tiap file.
3. Risiko yang perlu diperhatikan.
4. Hal yang perlu saya konfirmasi sebelum eksekusi.

Jangan edit kode dulu.
```
Tahap ini penting karena kamu bisa melihat apakah AI benar-benar paham struktur project. Kalau plan-nya salah, kamu bisa koreksi sebelum kode berubah.

Untuk project kecil, tahap plan mungkin terasa lambat. Tapi untuk project yang sudah punya banyak komponen, plan bisa menyelamatkan kamu dari refactor yang tidak perlu.

Diff: minta perubahan kecil, bukan rewrite besar

Setelah plan disetujui, baru masuk tahap diff.

Prompt-nya bisa seperti ini:
```
Eksekusi plan tadi dengan perubahan sekecil mungkin.
Jaga naming dan style existing.
Jangan ubah behavior lain di luar scope.
Setelah selesai, jelaskan diff utama dan cara test manualnya.
```
Kenapa “perubahan sekecil mungkin” penting?

Karena AI cenderung membantu terlalu banyak. Kadang kamu minta validasi form, ia sekalian merapikan layout, mengganti struktur komponen, dan mengubah helper function. Niatnya baik, tapi review jadi susah.

Dengan meminta diff kecil, kamu menjaga proses tetap aman:
- lebih mudah direview,
- lebih mudah rollback,
- lebih kecil peluang bug menyebar,
- lebih cocok untuk kerja tim.
Contoh lengkap prompt Spec → Plan → Diff

Misalnya kamu ingin menambahkan empty state di dashboard.

Prompt 1 — Spec
```
Saya ingin menambahkan empty state di halaman API Keys.

Konteks:
- Project menggunakan React.
- Empty state muncul jika user belum punya API key.
- Tombol CTA membuka modal create API key yang sudah ada.

Target hasil:
- Tampilkan icon sederhana, heading, body copy, dan CTA.
- Copy harus ramah untuk developer pemula.
- Gunakan class/style existing jika memungkinkan.

Batasan:
- Jangan ubah logic create API key.
- Jangan ubah API call.
- Jangan rewrite halaman dashboard.

Acceptance criteria:
- Jika list API key kosong, empty state tampil.
- Jika API key sudah ada, list tetap tampil seperti sebelumnya.
- CTA create key tetap memakai flow existing.
```
Prompt 2 — Plan
```
Baca file yang relevan dulu.
Jangan edit kode.
Buat rencana implementasi: file yang diubah, perubahan di tiap file, dan risiko.
```
Prompt 3 — Diff
```
Plan sudah oke. Sekarang implementasikan dengan diff sekecil mungkin.
Setelah selesai, jelaskan perubahan utama dan cara test manual.
```
Dengan format ini, kamu tetap mengendalikan arah kerja. AI menjadi pair programmer, bukan autopilot liar.

Cara pakai pola ini di Claude Code

Di Claude Code, pola ini enak dipakai karena kamu bisa bekerja langsung dari terminal project.

Urutan praktisnya:
1. Buka project di terminal.
2. Jalankan Claude Code.
3. Mulai dengan prompt spec.
4. Minta plan tanpa edit kode.
5. Review plan.
6. Baru minta implementasi diff kecil.
7. Jalankan test/manual QA.
Kalau kamu baru setup Claude Code, kamu bisa baca panduan ini: tutorial Claude Code setup awal untuk pemula.

Di mana VibeRouter masuk?

VibeRouter bukan pengganti prompt yang bagus. Prompt tetap perlu jelas.

Tapi kalau workflow kamu sudah mulai intens—misalnya bolak-balik minta plan, review diff, generate test, dan debugging—kamu butuh setup AI coding yang tidak gampang mengganggu ritme kerja.

Di sini VibeRouter relevan sebagai jalur API untuk Claude Code dan workflow AI coding lain. Kamu tetap pakai tool yang sama, tapi request diarahkan lewat endpoint VibeRouter.

Kalau ingin memahami konsep router untuk AI coding, baca juga: router AI untuk coding.

Kesalahan umum saat pakai Spec → Plan → Diff

Ada beberapa hal yang sebaiknya dihindari.

1. Spec terlalu abstrak

“Bikin lebih bagus” bukan spec. Jelaskan bagus itu dari sisi apa: layout, copy, UX, performa, atau maintainability.

2. Plan tidak dibaca

Kalau kamu tetap langsung menyetujui semua plan, tahap plan jadi formalitas. Baca file yang mau diubah dan cek apakah scope-nya masuk akal.

3. Diff terlalu besar

Kalau AI mulai mengubah banyak area yang tidak diminta, stop. Minta ia ulangi dengan scope lebih kecil.

4. Tidak ada test manual

Minimal minta AI menulis cara cek hasilnya. Bahkan untuk perubahan UI sederhana, checklist manual bisa mencegah bug kecil masuk production.

Ringkasan workflow

Kalau ingin AI coding lebih terarah, jangan mulai dari “tolong bikinin”. Mulai dari struktur kerja.
```
Spec → Plan → Diff → Test
```
Spec membuat tujuan jelas. Plan mencegah AI salah arah. Diff menjaga perubahan tetap kecil. Test memastikan hasilnya tidak cuma terlihat selesai, tapi benar-benar berjalan.

AI coding paling berguna saat kamu tetap menjadi driver. AI membantu mempercepat eksekusi, tapi arah tetap dari kamu.

Kalau kamu ingin mulai dari setup tool-nya dulu, lanjutkan ke cara pakai Claude Code dengan VibeRouter API.
6 Mei 2026
Tutorial Claude Code Setup Awal untuk Pemula (Windows, Linux, macOS)
Tutorial Claude Code Setup Awal untuk Pemula (Windows, Linux, macOS)

Tutorial Claude Code Setup Awal untuk Pemula (Windows, Linux, macOS)

Kalau kamu baru mau mulai pakai Claude Code, biasanya masalahnya bukan di “ngodingnya”, tapi di setup awal: install, taruh API key, lalu bingung kenapa command error.

Kabar baiknya, proses setup Claude Code sebenarnya simpel kalau urutannya benar. Di panduan ini, kita bahas langkah paling dasar untuk pemula di Windows, Linux, dan macOS—plus troubleshooting paling sering.

Apa yang perlu disiapkan sebelum mulai

Sebelum setup Claude Code, pastikan kamu sudah punya:
1. Node.js & npm (cek dengan node -v dan npm -v)
2. Akun VibeRouter
3. API key VibeRouter dari dashboard
Kenapa pakai VibeRouter? Karena kamu bisa route request Claude Code lewat endpoint yang lebih praktis untuk workflow coding harian, tanpa perlu ubah banyak hal di project.

Konsep singkat: yang diubah cuma 2 hal

Di Claude Code, kamu hanya perlu set:
- ANTHROPIC_BASE_URL → https://api.viberouter.id
- ANTHROPIC_AUTH_TOKEN → isi dengan API key kamu
Penting: ANTHROPIC_BASE_URL jangan ditambah /v1 di belakang.

Setup Claude Code di Linux (Ubuntu/Debian dan turunan)

1) Install Claude Code
```
npm install -g @anthropic-ai/claude-code
```
2) Buat file konfigurasi
```
mkdir -p ~/.claude
nano ~/.claude/settings.json
```
Isi file:
```
{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.viberouter.id",
    "ANTHROPIC_AUTH_TOKEN": "vr_live_xxxxx"
  }
}
```
3) Jalankan Claude Code
```
claude
```
Kalau command claude tidak dikenali, restart terminal dulu atau cek ulang instalasi npm global.

Setup Claude Code di Windows 10/11

1) Install Claude Code

Buka Command Prompt atau PowerShell:
```
npm install -g @anthropic-ai/claude-code
```
2) Buka folder konfigurasi Claude

Path default:
```
C:\Users\<username>\.claude\settings.json
```
Kalau belum ada, buat folder .claude lalu buat settings.json.

3) Isi settings.json
```
{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.viberouter.id",
    "ANTHROPIC_AUTH_TOKEN": "vr_live_xxxxx"
  }
}
```
4) Tes jalanin Claude Code
```
claude
```
Jika kamu pakai WSL, konfigurasi di Windows tidak otomatis terbaca di Linux environment WSL. Setup terpisah di dalam WSL mengikuti langkah Linux.

Setup Claude Code di macOS (Ventura/Sonoma/Sequoia)

1) Install Claude Code
```
npm install -g @anthropic-ai/claude-code
```
Kalau kena permission error:
```
sudo npm install -g @anthropic-ai/claude-code
```
2) Buat konfigurasi
```
mkdir -p ~/.claude
nano ~/.claude/settings.json
```
Isi:
```
{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.viberouter.id",
    "ANTHROPIC_AUTH_TOKEN": "vr_live_xxxxx"
  }
}
```
3) Jalankan
```
claude
```
Selesai. Claude Code sekarang akan request lewat VibeRouter.

Troubleshooting paling sering (pemula)

1) Error 401 Unauthorized

Biasanya API key salah, terpotong, atau ada spasi tambahan di settings.json.

2) Error koneksi / URL not found

Cek ANTHROPIC_BASE_URL. Pastikan persis:
```
https://api.viberouter.id
```
Tanpa /v1.

3) claude: command not found

Install global gagal atau PATH belum refresh. Coba install ulang lalu buka terminal baru.

4) Di Windows jalan, di WSL gagal

Setup ulang di environment WSL (anggap sebagai Linux terpisah).

Kapan sebaiknya pakai settings.json vs env terminal?

Untuk pemula, settings.json lebih aman karena:
- tidak perlu export ulang tiap buka terminal,
- minim typo,
- gampang dipakai lintas project.
Env terminal cocok kalau kamu butuh setup sementara atau testing cepat.

Internal links (rekomendasi)
Penutup

Kalau kamu baru mulai, fokus ke satu target: Claude Code bisa jalan dulu di laptop kamu, apa pun OS-nya. Setelah itu baru optimasi workflow prompt, struktur project, dan kebiasaan coding harian.

Kalau mau jalur paling cepat, pakai konfigurasi settings.json + endpoint VibeRouter. Setup awal beres, kamu bisa langsung lanjut build tanpa kebanyakan friction teknis.
6 Mei 2026
Cara Pakai Claude Code dengan Viberouter API
Apa itu Viberouter?

Viberouter adalah layanan API router untuk developer Indonesia yang menggunakan Claude CLI, Codex CLI, dan tools AI coding lainnya. Berbeda dengan subscription bulanan yang sering kena limit mingguan, Viberouter menawarkan akses on-demand: beli per jam atau per hari sesuai kebutuhan project.

Sistem auto-routing Viberouter secara otomatis memilih model AI terbaik (Claude Sonnet, GPT-4, DeepSeek, GLM, Qwen) berdasarkan jenis task yang Anda kerjakan. Overhead routing kurang dari 50ms, dan untuk pengguna Indonesia biasanya lebih responsif dibanding endpoint US langsung karena server berada di region Asia.

Kenapa Pakai Viberouter untuk Claude Code?

Claude Code adalah salah satu AI coding assistant paling powerful saat ini, tapi subscription resmi punya limit mingguan yang sering habis di tengah sprint. Viberouter mengatasi masalah ini dengan cara:
- Tidak ada limit mingguan — bayar sesuai pemakaian, tidak ada reset cycle
- Akses fleksibel — beli 1 jam untuk hotfix urgent, atau 3 hari untuk sprint penuh
- Kompatibel penuh — Claude Code tetap pakai command yang sama, hanya ganti endpoint
- Latency rendah — server di Asia, ping dari Indonesia 30-50ms
Prasyarat Setup

Sebelum mulai, pastikan Anda sudah punya:
- Claude Code CLI terinstall di sistem (Windows, Linux, atau macOS)
- Akun Viberouter aktif di viberouter.id
- Paket akses yang sudah dibeli (minimal 1 jam untuk testing)
- Terminal atau command prompt dengan akses environment variable
Jika belum install Claude Code, ikuti tutorial setup awal Claude Code untuk pemula terlebih dahulu.

Langkah 1: Daftar dan Beli Paket Viberouter

Buka viberouter.id dan daftar akun baru. Setelah login, pilih paket yang sesuai kebutuhan:
- 1 jam — cocok untuk hotfix atau debugging cepat
- 1 hari — ideal untuk feature development atau refactoring
- 3 hari — untuk sprint penuh atau project besar
Setelah pembayaran selesai, akses langsung aktif tanpa delay. Anda bisa langsung generate API key dari dashboard.

Langkah 2: Generate API Key

Masuk ke dashboard Viberouter, klik menu API Keys, lalu klik tombol Generate New Key. API key akan muncul dalam format:
```
vbr-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```
Simpan key ini dengan aman. Jangan commit ke git atau share di public channel. Jika key bocor, segera revoke dari dashboard dan generate key baru.

Langkah 3: Set Environment Variable

Claude Code membaca konfigurasi dari environment variable. Anda perlu set dua variable:

Linux / macOS

Tambahkan ke ~/.bashrc atau ~/.zshrc:
```
export ANTHROPIC_API_KEY="vbr-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
export ANTHROPIC_BASE_URL="https://viberouter.id"
```
Lalu reload shell:
```
source ~/.bashrc
```
Windows (PowerShell)

Jalankan command berikut di PowerShell:
```
[System.Environment]::SetEnvironmentVariable('ANTHROPIC_API_KEY', 'vbr-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'User')
[System.Environment]::SetEnvironmentVariable('ANTHROPIC_BASE_URL', 'https://viberouter.id', 'User')
```
Restart terminal setelah set variable.

Windows (Command Prompt)

Buka System Properties → Environment Variables, lalu tambah dua variable baru:
- ANTHROPIC_API_KEY = vbr-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
- ANTHROPIC_BASE_URL = https://viberouter.id
Langkah 4: Test Koneksi

Setelah environment variable di-set, test koneksi dengan command sederhana:
```
claude-code --version
```
Jika muncul versi Claude Code, artinya CLI sudah terinstall dengan benar. Selanjutnya test API connection:
```
claude-code "print hello world in Python"
```
Jika berhasil, Claude Code akan generate kode Python sederhana dan menampilkan hasilnya di terminal. Response time biasanya 1-3 detik untuk query sederhana.

Langkah 5: Mulai Coding

Sekarang Anda bisa pakai Claude Code seperti biasa. Semua command tetap sama, hanya endpoint yang berbeda:
```
claude-code "refactor this function to use async/await"
claude-code "add error handling to API calls"
claude-code "write unit tests for user service"
```
Viberouter akan otomatis routing request Anda ke model terbaik berdasarkan context dan task type. Untuk task coding kompleks, biasanya di-route ke Claude Sonnet. Untuk task sederhana seperti formatting atau documentation, bisa di-route ke model lebih cepat seperti DeepSeek atau Qwen.

Monitoring Penggunaan

Dashboard Viberouter menampilkan real-time usage:
- Total request hari ini
- Token usage (input + output)
- Sisa waktu akses (jika paket berbasis waktu)
- Model distribution (berapa persen request ke Claude, GPT-4, dll)
Anda bisa set alert untuk notifikasi saat sisa waktu tinggal 1 jam atau token usage mendekati limit.

Troubleshooting

Error: “Invalid API key”

Pastikan API key di-copy dengan benar tanpa spasi atau newline. Cek juga apakah paket akses masih aktif di dashboard.

Error: “Connection timeout”

Cek koneksi internet Anda. Jika pakai VPN atau proxy, pastikan viberouter.id tidak di-block. Coba ping manual:
```
curl -I https://viberouter.id
```
Response lambat atau error 429

Jika response time tiba-tiba naik atau muncul error 429 (rate limit), kemungkinan ada spike traffic. Viberouter punya auto-scaling tapi butuh 30-60 detik untuk spin up instance baru. Tunggu sebentar lalu retry.

Tips Optimasi
- Batch request — untuk task berulang, gabungkan jadi satu prompt besar daripada banyak request kecil
- Pakai context file — attach file project sebagai context supaya Claude Code lebih paham codebase Anda
- Set timeout — untuk task kompleks, set timeout lebih tinggi di config Claude Code
- Monitor token usage — prompt yang terlalu panjang bisa habiskan token cepat, edit prompt jadi lebih concise
Panduan Lainnya
1 Mei 2026

Tag: Claude Code

Tooling Stack Vibe Coding 2026: Claude Code + Context7 + GitHub PR + CI

Tooling Stack Vibe Coding 2026: Claude Code + Context7 + GitHub PR + CI

Komponen 1: Claude Code sebagai coding partner di terminal

Komponen 2: Context7 untuk dokumentasi resmi

Komponen 3: GitHub PR sebagai gerbang review

Komponen 4: CI untuk mencegah bug dasar masuk production

Alur kerja lengkap: dari ide ke merge

Di mana VibeRouter masuk dalam stack ini?

Ringkasan

Cara Pakai Context7 untuk Nambah Dokumentasi Resmi ke Prompt (Biar Jawaban Nggak Ngarang)

Cara Pakai Context7 untuk Nambah Dokumentasi Resmi ke Prompt (biar jawaban nggak ngarang)

Apa itu Context7 dan kenapa penting?

Kapan sebaiknya Context7 dipakai?

Langkah 1: tentukan bagian dokumentasi yang relevan

Langkah 2: buat Context7 ringkas dan terstruktur

Langkah 3: sitasikan Context7 di prompt

Langkah 4: validasi jawaban terhadap dokumentasi resmi

Template Context7 yang bisa kamu pakai ulang

Kesalahan umum saat menggunakan Context7

1. Copy paste seluruh dokumentasi

2. Tidak mencantumkan sumber dokumentasi

3. Menggunakan Context7 yang sudah usang

4. Mengandalkan Context7 tanpa baca original docs

Cara pakai Context7 di Claude Code

Di mana VibeRouter masuk?

Ringkasan

Cara Nyusun Prompt Spec → Plan → Diff Biar AI Coding Nggak Ngawur

Cara Nyusun Prompt “Spec → Plan → Diff” Biar AI Coding Nggak Ngawur

Kenapa prompt AI coding sering gagal?

Apa itu pola Spec → Plan → Diff?

1. Spec: tulis target dengan jelas

Template Spec yang bisa kamu pakai

Plan: jangan langsung suruh AI ngoding

Diff: minta perubahan kecil, bukan rewrite besar

Contoh lengkap prompt Spec → Plan → Diff

Prompt 1 — Spec

Prompt 2 — Plan

Prompt 3 — Diff

Cara pakai pola ini di Claude Code

Di mana VibeRouter masuk?

Kesalahan umum saat pakai Spec → Plan → Diff

1. Spec terlalu abstrak

2. Plan tidak dibaca

3. Diff terlalu besar

4. Tidak ada test manual

Ringkasan workflow

Tutorial Claude Code Setup Awal untuk Pemula (Windows, Linux, macOS)

Tutorial Claude Code Setup Awal untuk Pemula (Windows, Linux, macOS)

Apa yang perlu disiapkan sebelum mulai

Konsep singkat: yang diubah cuma 2 hal

Setup Claude Code di Linux (Ubuntu/Debian dan turunan)

1) Install Claude Code

2) Buat file konfigurasi

3) Jalankan Claude Code

Setup Claude Code di Windows 10/11

1) Install Claude Code

2) Buka folder konfigurasi Claude

3) Isi settings.json

4) Tes jalanin Claude Code

Setup Claude Code di macOS (Ventura/Sonoma/Sequoia)

1) Install Claude Code

2) Buat konfigurasi

3) Jalankan

Troubleshooting paling sering (pemula)

1) Error 401 Unauthorized

2) Error koneksi / URL not found

3) claude: command not found

4) Di Windows jalan, di WSL gagal

Kapan sebaiknya pakai settings.json vs env terminal?

Internal links (rekomendasi)

Penutup

Cara Pakai Claude Code dengan Viberouter API

Apa itu Viberouter?

Kenapa Pakai Viberouter untuk Claude Code?

Prasyarat Setup

Langkah 1: Daftar dan Beli Paket Viberouter

Langkah 2: Generate API Key

Langkah 3: Set Environment Variable

Linux / macOS

3) Isi `settings.json`

3) `claude: command not found`