Tutorial Vibe Coding Aman dengan Cursor

Vibe coding semakin populer sebagai cara cepat membangun software dengan bantuan AI. Namun, risiko yang menyertainya tidak bisa dianggap remeh: kode yang tampak berfungsi bisa menyimpan celah keamanan tersembunyi, logic error yang sulit ditemukan, atau technical debt yang menumpuk. Artikel ini memberikan panduan praktis melakukan vibe coding secara aman menggunakan Cursor Composer, dengan fokus pada prototype web app yang tetap maintainable dan teruji.

Memahami Risiko Vibe Coding

Istilah vibe coding diperkenalkan oleh Andrej Karpathy untuk mendeskripsikan praktik membangun software dengan mendeskripsikan hasil yang diinginkan dalam bahasa natural, lalu membiarkan AI menghasilkan sebagian besar atau seluruh kodenya. Stack Overflow melaporkan bahwa 84% developer secara global sudah menggunakan atau berencana menggunakan AI coding tools pada 2025.

Masalahnya, software yang tampak bekerja belum tentu aman. Sebuah studi dari Escape.tech menemukan ribuan kerentanan dan exposed secrets di aplikasi yang dibangun dengan vibe coding. Veracode melaporkan sekitar 45% sampel kode AI-generated gagal dalam standard security tests. Tanpa review dan guardrails yang tepat, vibe coding bisa menghasilkan prototype yang justru membuka surface attack baru.

Sumber: The Conversation - Vibe Coding Major Catch

Persiapan Project Rules dan Spec

Sebelum membuka Cursor Composer, tetapkan batasan project dengan jelas. Buat dokumen spesifikasi singkat yang mencakup: fitur MVP yang diizinkan, teknologi stack yang boleh digunakan, constraint keamanan seperti tidak menyimpan secret di client-side, dan acceptance criteria minimal. Dokumen ini akan menjadi referensi untuk setiap prompt yang diberikan ke AI.

Di Cursor, aktifkan Cursor Rules melalui file .cursorrules di root project. File ini berisi instruksi global yang membatasi bagaimana AI menghasilkan kode. Contohnya: "Jangan pernah menulis SQL raw, gunakan ORM parameterized query" atau "Semua API endpoint harus memiliki rate limiting middleware."

Langkah 1: Setup Cursor Composer dengan Batasan Fitur

Buat project baru dengan struktur direktori yang jelas sebelum meminta AI menghasilkan kode. Struktur yang terorganisir membantu AI memahami konteks dan mengurangi kemungkinan menghasilkan file yang tercecer.

mkdir vibe-safe-prototype && cd vibe-safe-prototype
cursor .
# Di Cursor Composer, jalankan prompt:
# "Generate a Next.js 14 project structure with App Router,
# TypeScript, and a simple todo API. Do not include auth yet.
# Use Prisma ORM with SQLite for data layer."

Batasan fitur di awal sangat penting. Jika meminta AI membangun "full app dengan auth, payment, dan real-time," hasilnya akan menjadi monolit yang sulit diaudit. Mulai dari domain kecil, pastikan benar, baru expand. Cursor Composer mendukung conversation thread sehingga iterasi bisa dilakukan secara bertahap tanpa kehilangan konteks.

Langkah 2: Generate Scaffold dengan Prompt Engineering

Gunakan prompt yang spesifik dan berkonteks agar AI menghasilkan kode sesuai spec. Hindari prompt terlalu luas seperti "buatkan saya web app." Sebaliknya, gunakan prompt terstruktur:

"Generate a REST API endpoint POST /api/todos that:
1. Validates input using Zod schema (title: string max 100 chars, done: boolean)
2. Uses Prisma todo.create with parameterized query
3. Returns 201 with the created object or 400 with validation error
4. Includes a rate limit of 10 requests per minute per IP
Do not use any external auth or session logic."

Prompt semacam ini membatasi ruang gerak AI dan memaksa output sesuai dengan kebutuhan eksplisit. Setelah scaffold muncul, jangan langsung setuju. Periksa apakah dependency yang diusulkan memiliki known vulnerabilities dengan menjalankan npm audit sebelum menginstal.

Langkah 3: Review dan Audit Kode AI-Generated

Jangan terima kode AI secara buta. Lakukan tiga jenis review sebelum lanjut ke iterasi berikutnya. Pertama, static analysis dengan ESLint dan TypeScript compiler untuk menemukan type error atau anti-pattern. Kedua, security scan dengan tool seperti semgrep atau npm audit untuk menangkap hardcoded secret, SQL injection pattern, atau eval statement. Ketiga, logic review manual untuk memastikan business rule sesuai spec.

npx eslint . --ext .ts,.tsx
npx tsc --noEmit
npm audit
npx semgrep --config=auto --error

Jika audit menemukan issue, jangan hanya meminta AI "fix ini." Jelaskan root cause dan minta AI memberikan penjelasan perubahannya. Proses ini mencegah AI memperbaiki satu bug sambil memperkenalkan bug lain di lokasi berbeda, fenomena yang sering terjadi dalam vibe coding tanpa kontrol.

Langkah 4: Iterasi dengan Test-Driven Feedback

Feedback loop yang efektif dalam vibe coding bukan hanya "prompt and pray." Gunakan test sebagai boundary condition. Tulis unit test atau integration test terlebih dahulu, lalu minta AI menghasilkan implementasi yang memenuhi test tersebut. Cursor Composer mendukung inline test generation sehingga workflow ini bisa dilakukan tanpa meninggalkan editor.

// test/todo-api.test.ts
import { describe, it, expect } from 'vitest';

describe('POST /api/todos', () => {
  it('rejects title longer than 100 chars', async () => {
    const res = await fetch('/api/todos', {
      method: 'POST',
      body: JSON.stringify({ title: 'a'.repeat(101), done: false }),
    });
    expect(res.status).toBe(400);
  });
});

Setelah test ditulis, gunakan prompt: "Implement the POST /api/todos endpoint so that all tests in test/todo-api.test.ts pass." Pendekatan test-driven membatasi kemungkinan AI menghasilkan kode yang over-engineered atau melewati constraint bisnis.

Langkah 5: Deploy dengan Guardrails Keamanan

Sebelum deploy ke staging atau production, pasang guardrails tambahan. Aktifkan environment variables untuk segala konfigurasi sensitif, jangan pernah membiarkan AI menulis secret langsung di source code. Gunakan platform deployment yang memiliki security scanning bawaan seperti Vercel atau Netlify dengan security headers otomatis.

# .env.example (commit ini, jangan .env)
DATABASE_URL="file:./dev.db"
NEXT_PUBLIC_API_URL="http://localhost:3000"

Pasang Content Security Policy (CSP) di level server untuk mencegah XSS dari kode yang mungkin secara tidak sengaja mengandung inline script atau eval. Tambahkan logging dan observability minimal dengan Sentry atau LogRocket agar error di production bisa ditemukan sebelum user melaporkannya.

Jika prototype akan menangani data pribadi atau transaksi finansial, vibe coding saja tidak cukup. Lakukan security review manual atau hire auditor eksternal sebelum go-live. AI bisa menulis kode dengan cepat, tetapi tanggung jawab atas keamanan dan keandalan tetap berada di tangan manusia.

Kesimpulan

Vibe coding dengan Cursor Composer adalah alat yang powerful untuk eksperimen dan prototype, tetapi harus dikelilingi oleh proses yang disiplin. Spesifikasi yang jelas, prompt engineering yang terstruktur, audit kode otomatis, test-driven feedback, dan guardrails keamanan adalah lima pilar yang membedakan prototype aman dari prototype berbahaya. Dengan workflow ini, developer bisa memanfaatkan kecepatan AI tanpa mengorbankan kualitas dan keamanan software.