Tutorial Vibe Coding: Membangun CLI Tool dengan Claude Code dalam 20 Menit

Vibe coding bukan lagi sekadar buzzword. Sejak konsep ini dipopulerkan Andrej Karpathy, ribuan developer telah beralih dari mengetik kode baris per baris ke arah memberikan instruksi bahasa alami kepada AI agent. Salah satu tool paling powerful untuk praktik ini adalah Claude Code, sebuah coding agent berbasis terminal yang mampu membaca codebase, menulis file, menjalankan command, dan bahkan melakukan deploy.

Pada tutorial ini, kita akan membangun sebuah CLI tool sederhana menggunakan Claude Code. Tidak ada kode yang ditulis manual. Semua proses, mulai dari inisialisasi project hingga testing, akan dikerjakan oleh Claude Code berdasarkan instruksi yang kita berikan. Hasil akhirnya adalah aplikasi command-line untuk mengelola daftar tugas yang bisa di-install secara global via npm.

Prasyarat dan Instalasi Claude Code

Sebelum mulai, pastikan sistem kamu memiliki Node.js versi 18 atau lebih tinggi. Claude Code adalah package npm yang memerlukan environment JavaScript modern. Jika belum install Node.js, kunjungi nodejs.org dan download versi LTS terbaru.

Install Claude Code secara global menggunakan npm:

npm install -g @anthropic-ai/claude-code

Setelah instalasi selesai, login dengan akun Anthropic:

claude login

Buat direktori baru untuk proyek dan navigasi ke dalamnya:

mkdir todo-cli-agent
cd todo-cli-agent
claude

Claude Code akan melakukan initial scan terhadap direktori kosong dan menunggu instruksi pertama dari kamu.

Langkah 1: Inisialisasi Project Node.js

Berikan instruksi inisialisasi project kepada Claude Code. Prompt yang baik harus spesifik tentang tipe aplikasi, entry point, dan fitur dasar yang diinginkan.

Buatkan project Node.js untuk CLI tool todo list. Gunakan package name todo-cli-agent. Buatkan file index.js sebagai entry point dengan shebang. Tambahkan command add, list, dan remove. Simpan data todo di file JSON lokal.

Claude Code akan menjalankan serangkaian aksi:

1. Menjalankan npm init -y dan mengubah package name

2. Membuat file index.js dengan shebang #!/usr/bin/env node

3. Mengimplementasikan parsing argument menggunakan process.argv

4. Membuat file todos.json sebagai database lokal

Verifikasi hasil dengan menjalankan node index.js list. Outputnya seharusnya array kosong atau pesan bahwa belum ada todo.

Langkah 2: Menambahkan Fitur Add dan Remove

Setelah struktur dasar jadi, tambahkan fitur utama. Instruksikan Claude Code untuk mengimplementasikan add dan remove dengan validasi input.

Tambahkan fitur add dengan validasi: title tidak boleh kosong, maksimal 100 karakter. Setiap todo harus memiliki id unik menggunakan Date.now(). Tambahkan fitur remove berdasarkan id. Jika id tidak ditemukan, tampilkan pesan error yang jelas.

Claude akan mengedit index.js dan menambahkan fungsi helper untuk membaca dan menulis file JSON. Ia juga akan menambahkan error handling untuk kasus file tidak ada atau corrupt.

Test fitur add:

node index.js add "Belajar vibe coding"

Test fitur remove:

node index.js remove 1718600000000

Jika ada error, cukup copy-paste error message ke Claude Code. Contoh:

Saya dapat error: SyntaxError: Unexpected token. Perbaiki.

Langkah 3: Membuat Executable Global

CLI tool yang baik harus bisa dijalankan dari mana saja di terminal. Instruksikan Claude Code untuk mengkonfigurasi executable global menggunakan bin field di package.json.

Konfigurasi CLI tool ini agar bisa di-install global. Tambahkan bin field di package.json yang menunjuk ke index.js. Pastikan shebang sudah benar dan file memiliki permission executable.

Claude Code akan:

1. Mengedit package.json menambahkan "bin": { "todo-cli-agent": "./index.js" }

2. Menjalankan chmod +x index.js untuk memberikan permission execute

Test dengan linking lokal:

npm link
todo-cli-agent list

Jika berhasil, kamu bisa menjalankan perintah todo-cli-agent dari direktori mana pun.

Langkah 4: Menambahkan Fitur Mark as Done

Tingkatkan fungsionalitas dengan fitur mark as done dan filter. Fitur ini memungkinkan user mengelola status todo secara efektif.

Tambahkan fitur done untuk menandai todo sebagai selesai berdasarkan id. Tambahkan fitur list --done untuk menampilkan hanya todo yang sudah selesai, dan list --pending untuk yang belum. Gunakan flag --all sebagai default.

Claude akan mengubah struktur data todo menjadi objek dengan properti id, title, done, dan createdAt. Ia juga akan mengimplementasikan logika filter menggunakan Array.filter.

Test fitur done:

todo-cli-agent add "Deploy aplikasi ke production"
todo-cli-agent done 1718600000001
todo-cli-agent list --pending

Langkah 5: Testing dan Polish

Sebelum dipublikasikan ke npm, lakukan testing menyeluruh. Claude Code bisa membantu membuat test script sederhana.

Buatkan test script menggunakan Node.js built-in test runner. Test case: add todo berhasil, remove todo yang tidak ada menampilkan error, mark done mengubah status. Simpan di folder test/.

Jalankan test:

npm test

Jika semua test pass, tambahkan README.md dengan instruksi instalasi dan penggunaan. Claude Code bisa membuatkan dokumentasi ini:

Buatkan README.md dengan judul todo-cli-agent. Sertakan cara install, cara penggunaan setiap command, dan contoh output. Gunakan format markdown standar.

Deploy ke npm Registry

Langkah terakhir adalah mempublikasikan package ke npm. Pastikan kamu sudah memiliki akun npm dan login di terminal.

npm login
npm publish --access public

Claude Code bisa membantu memverifikasi bahwa package.json sudah lengkap dengan field yang dibutuhkan npm seperti version, description, keywords, dan author. Jika ada error publikasi, copy-paste error ke Claude Code untuk diperbaiki.

Kesimpulan

Dalam 20 menit, kita telah membangun CLI tool fungsional tanpa menulis satu baris kode pun secara manual. Claude Code menangani semua implementasi, debugging, dan dokumentasi berdasarkan instruksi bahasa alami. Ini adalah esensi dari vibe coding: fokus pada apa yang ingin dicapai, bukan pada bagaimana menulis kodenya.

Teknik ini sangat efektif untuk prototyping dan tools internal. Namun, tetap lakukan review manual untuk kode production, terutama yang menyangkut security dan data sensitif. Selamat mencoba vibe coding dengan Claude Code.