Salah satu hal yang membuat saya produktif naik drastis beberapa bulan belakangan bukan apps baru yang mahal, bukan workflow mewah — tapi CLI tools kecil yang saya membuat sendiri untuk automasi hal-hal repetitif di pekerjaan sehari-hari.

Dan yang membuat saya bisa membuat tools itu lebih cepat? AI sebagai pair programmer.

Artikel ini bukan tutorial akademis. Ini lebih ke: “gini cara saya benar-benar membuat CLI tool dari nol dengan bantuan AI, langkah demi langkah.”

Kenapa CLI Tool?

Sebelum masuk ke cara membuat, validasi dulu kenapa CLI tool worth it:

• Speed: Satu command untuk menjalankan serangkaian aksi yang biasanya butuh 5-10 langkah manual
• Repeatable: Jalankan hal yang sama persis berkali-kali tanpa error manusia
• Composable: Bisa di-pipe dengan tools lain di terminal
• Shareable: Bisa dishare ke tim, bisa masuk ke repo, bisa di-versioning

Contoh nyata yang saya membuat: tool untuk rename file markdown sesuai konvensi tertentu, tool untuk generate boilerplate project structure, tool untuk batch resize gambar dengan preset tertentu. Kecil-kecil tapi efeknya besar.

Pilihan Stack

Untuk CLI tool, ada beberapa pilihan populer:

Node.js — Paling accessible kalau kamu JavaScript/TypeScript developer. Library seperti commander.js, yargs, atau oclif membuat ini mudah.

Python — Bahasa scripting yang paling natural untuk automasi. Click dan Typer adalah library CLI yang elegant.

Go — Kalau mau binary yang compiled, single-file, dan fast. cobra adalah library CLI standar di ekosistem Go.

Bash — Untuk yang simple dan tidak perlu distribusi. Tapi scaling-nya terbatas.

Untuk artikel ini, kita pakai Node.js dengan TypeScript karena paling gampang di-demo dan banyak developer sudah familiar.

Setup Project

Mulai dari scratch:

mkdir my-cli-tool
cd my-cli-tool
npm init -y
npm install commander chalk ora
npm install -D typescript @types/node ts-node
npx tsc --init

Struktur direktori dasar:

my-cli-tool/
├── src/
│   ├── index.ts        # Entry point
│   ├── commands/       # Command handlers
│   └── utils/          # Helper functions
├── package.json
└── tsconfig.json

Di Sini AI Masuk: Cara Efektif Pakai AI untuk Build CLI

Ini bagian intinya. Bukan sekadar “tanya AI terus copy paste” — ada cara yang lebih efektif.

Langkah 1: Describe Tool Kamu dengan Jelas

Sebelum minta AI menulis kode, definisikan dulu dengan jelas:

• Apa yang tool ini lakukan?
• Input apa yang diterima?
• Output apa yang dihasilkan?
• Edge case apa yang perlu di-handle?

Contoh prompt yang bagus:

> “Bantu saya membuat CLI tool di Node.js dengan TypeScript. Tool ini bernama imgopt dan fungsinya: menerima path folder sebagai argument, scan semua file JPG dan PNG di folder tersebut, resize ke max-width 1200px (maintain aspect ratio), compress dengan quality 80%, dan simpan ke subfolder /optimized. Tampilkan progress bar saat processing. Kalau folder /optimized sudah ada, tanya konfirmasi sebelum overwrite.”

Prompt spesifik seperti gini akan beri output yang jauh lebih berguna dari sekadar “membuat CLI tool untuk resize gambar.”

Langkah 2: Generate Skeleton, Bukan Final Code

Saya biasanya minta AI untuk buat skeleton/struktur dulu, bukan langsung kode lengkap:

> “Dulu kamu beri prompt di atas — sekarang generate struktur folder dan file yang dibutuhkan, dengan function signatures yang perlu diimplementasi. Jangan tulis implementasi detailnya dulu.”

Ini membuat kamu mengerti arsitekturnya sebelum detail kode ada. Lebih mudah untuk review dan understand.

Langkah 3: Implement Bagian per Bagian

Setelah struktur clear, implement satu command atau satu fungsi sekaligus:

// src/index.ts — yang AI generate sebagai starting point
import { Command } from 'commander';
import { optimizeImages } from './commands/optimize';

const program = new Command();

program
.name('imgopt')
.description('CLI tool untuk optimasi gambar')
.version('1.0.0');

program
.command('optimize <folder>')
.description('Optimize semua gambar di folder')
.option('-w, --width <number>', 'Max width (default: 1200)', '1200')
.option('-q, --quality <number>', 'Quality 1-100 (default: 80)', '80')
.option('-o, --output <folder>', 'Output folder (default: optimized)', 'optimized')
.action(optimizeImages);

program.parse();

Lalu untuk setiap bagian yang perlu diimplementasi, tanya AI dengan konteks yang spesifik.

Langkah 4: Iterasi dengan Error

Ini yang sering dilewat. Ketika ada error, jangan langsung fix sendiri atau langsung paste ke AI tanpa konteks. Cara yang lebih efektif:

1. Jalankan kode
2. Kalau ada error, screenshot atau copy error message-nya
3. Paste ke AI dengan konteks: “Ini error yang muncul ketika saya run dengan input [X]. Ini adalah kode yang saya jalankan: [kode]. Ini error-nya: [error]. Tolong explain kenapa terjadi dan bagaimana fix-nya.”

Minta explanation, bukan sekadar fix. Ini membuat kamu belajar dan mengerti, bukan cuma copy-paste.

Contoh Real: Tool Rename Markdown Files

Ini tool sederhana yang benar-benar saya membuat. Masalahnya: saya punya banyak file markdown yang nama filenya inkonsisten, dan saya mau standardize jadi format YYYY-MM-DD-judul-kebab-case.md.

Prompt ke AI:

> “Membuat CLI tool Node.js TypeScript bernama mdren yang bisa rename file markdown. Command: mdren rename . Behavior: scan semua file .md di folder, extract tanggal dari frontmatter YAML (field date), extract title dari frontmatter (field title), convert title ke kebab-case, rename file ke format YYYY-MM-DD-judul-kebab-case.md. Tampilkan preview rename sebelum eksekusi dan minta konfirmasi. Kalau file tidak punya frontmatter, skip dan beri warning.”

Dalam 2-3 iterasi dengan AI, tool ini jadi. Sesuatu yang kalau saya tulis manual dari nol mungkin butuh setengah hari.

Publish ke npm (Opsional)

Kalau mau share ke tim atau publik:

// package.json
{
"name": "your-cli-tool",
"bin": {
"mytool": "./dist/index.js"
},
"scripts": {
"build": "tsc",
"prepublish": "npm run build"
}
}

Setelah build dan npm publish, orang lain bisa install dengan npm install -g your-cli-tool.

Tips Tambahan

Tambahkan --dry-run flag untuk operasi yang destructive (rename, delete, overwrite). Jalankan dulu tanpa benar-benar eksekusi, lihat apa yang akan terjadi.

Gunakan chalk untuk colored output — ini membuat CLI kamu jauh lebih readable, terutama untuk error (merah), success (hijau), dan warning (kuning).

Error handling yang proper — jangan biarkan tool crash dengan stack trace mentah. Catch error dan beri pesan yang human-readable.

Simpan di PATH kamu — entah via npm global install atau symlink manual, pastikan tool kamu bisa dipanggil dari mana saja di terminal.

Kesimpulan

CLI tool kustom adalah investasi produktivitas yang underrated. Dan sekarang dengan AI sebagai pair programmer, barrier untuk membuat tool sendiri jauh lebih rendah.

Kuncinya: jangan minta AI menulis semua sekaligus. Iterate, tanya per bagian, minta explanation bukan cuma code dump. Treat AI seperti junior developer yang sangat cepat, tapi tetap butuh diarahkan dan di-review hasilnya.

---

Punya ide CLI tool yang mau kamu membuat tapi tidak tahu mulai dari mana? Atau butuh partner untuk develop tools custom untuk workflow tim kamu? Yuk ngobrol — hubungi mafadev dan kita bangun bareng.

Kamu membuka file yang terakhir disentuh 3 tahun lalu. Tidak ada komentar. Variable bernama data2, tempVar, dan flag. Function sepanjang 400 baris. Tidak ada test. Dan ini harus kamu modify sekarang.

Selamat datang di dunia legacy code.

Setiap developer pasti pernah menghadapi ini — entah itu codebase warisan dari developer sebelumnya, project lama milik sendiri, atau “temporary solution” yang sudah jadi permanent. Dan sekarang, dengan bantuan AI, kita punya tools yang lebih baik untuk menghadapi situasi ini.

Tapi AI bukan tongkat ajaib. Refactoring yang ceroboh bisa merusak sistem yang sebelumnya “jelek tapi jalan.” Artikel ini adalah panduan praktis dan realistis.

---

Mengapa Legacy Code Itu Susah Disentuh?

Sebelum bicara solusi, penting memahami masalahnya:

Tidak ada test — tidak ada safety net. Kamu tidak tahu apakah perubahan kamu merusak sesuatu sampai ada yang laporan bug di production.

Tight coupling — semua hal terhubung ke semua hal. Ubah satu bagian, tiga bagian lain ikut rusak.

Context yang hilang — kenapa kode ini ditulis seperti ini? Ada bisnis rule tersembunyi? Ada workaround untuk bug di library tertentu? Dokumentasinya: tidak ada.

Fear of change — “kalau masih jalan, jangan disentuh” adalah wisdom yang populer tapi juga trap yang membuat sistem makin susah di-maintain.

---

Strategi Dasar: Understand Before You Change

Rule nomor satu refactoring: jangan ubah kode yang tidak kamu mengerti.

Ini bukan tentang paham setiap baris — tapi paham apa yang sistem ini lakukan secara keseluruhan, input apa yang masuk, output apa yang keluar, dan apa saja side effects-nya.

Di Sinilah AI Sangat Membantu: Code Comprehension

Sebelum ubah apapun, minta AI untuk bantu kamu memahami kodenya.

Prompt yang efektif:

Ini adalah fungsi [nama] dari codebase lama kami.
Tolong jelaskan:

Apa yang fungsi ini lakukan secara high-level
Apa saja edge cases yang di-handle
Ada tidak pola yang tidak umum atau mungkin workaround untuk bug tertentu
Apa yang mungkin akan rusak kalau fungsi ini diubah


[paste kode]

AI tidak akan selalu benar — dia tidak tahu konteks bisnis kamu. Tapi dia bisa membantu kamu melihat pola yang mungkin terlewat ketika membaca cepat, dan mengajukan pertanyaan yang tepat.

---

Framework Refactoring: Langkah Demi Langkah

Fase 1: Characterization Tests

Sebelum refactor, tulis test yang mendokumentasikan behavior saat ini — bukan behavior yang seharusnya. Ini yang disebut characterization tests atau approval tests.

Tujuannya bukan memvalidasi kebenaran kode, tapi memastikan behavior tidak berubah setelah refactoring.

Minta AI untuk bantu generate characterization test:

Berikut adalah fungsi yang mau saya refactor:
[paste kode]

Tolong buatkan characterization tests menggunakan Jest yang:

Capture behavior saat ini (bukan yang seharusnya)
Cover semua branch yang ada
Gunakan input yang realistis berdasarkan kode yang ada
Tambahkan komentar yang menjelaskan KENAPA test ini ada


Fokus pada mendokumentasikan apa yang terjadi sekarang, bukan apa yang seharusnya terjadi.

Fase 2: Safe Zone Analysis

Identifikasi bagian mana yang aman diubah dan mana yang berisiko:

Relatif aman diubah:

• Nama variable dan function (dengan rename yang proper)
• Formatting dan whitespace
• Extract method untuk blok kode yang ada
• Komentar dan dokumentasi
• Tipe data (dengan hati-hati)

Butuh sangat hati-hati:

• Logic bisnis yang ada
• Urutan operasi
• Error handling
• Anything menyangkut database transactions
• Code yang menyentuh external API

Fase 3: Refactoring Bertahap

Jangan lakukan big bang refactoring. Lakukan perubahan kecil, jalankan test setelah setiap perubahan.

Urutan yang disarankan:

1. Rename — perbaiki nama variable dan function yang tidak jelas
2. Extract — pindahkan code blocks ke function terpisah tanpa mengubah logic
3. Inline — hapus abstraksi yang tidak perlu
4. Simplify conditionals — sederhanakan if-else yang complex
5. Remove duplication — setelah kamu paham, baru konsolidasi yang duplikat

---

Teknik Spesifik dengan AI

1. Explain Complex Logic

Tolong explain code ini baris per baris.
Kemudian identifikasi bagian yang paling complex dan suggest cara
untuk membuatnya lebih readable tanpa mengubah behavior.

[paste kode]

2. Rename Suggestions

Variable dan function names berikut tidak cukup descriptive.
Berikan suggestion nama yang lebih baik berdasarkan apa yang kode ini lakukan:


data2 → ?
tempVar → ?
processIt() → ?
flag → ?


Konteks: [jelaskan apa yang kode ini lakukan]

3. Extract Function

Ini adalah fungsi yang terlalu panjang (400+ baris).
Tolong identifikasi logical boundaries yang bisa di-extract
menjadi function terpisah tanpa mengubah behavior.

Berikan output dalam format:

Nama function baru yang disarankan
Baris mana yang masuk ke function tersebut
Parameter yang dibutuhkan
Return value


[paste kode]

4. Detect Patterns dan Antipatterns

Review kode berikut dan identifikasi:

Design patterns yang sudah diimplementasikan (bahkan kalau tidak disengaja)
Antipatterns yang perlu diaddress
Coupling yang berlebihan antara komponen
Violation dari SOLID principles


[paste kode]

---

Trap yang Harus Dihindari

Jangan Minta AI untuk “Rewrite Everything”

Ini godaan terbesar. Kamu paste seluruh file dan bilang “tolong rewrite ini jadi clean code.”

Masalahnya: AI tidak tahu business rules tersembunyi. Dia tidak tahu bahwa if (status === 3) itu sebenarnya adalah “kondisi khusus untuk merchant yang join sebelum tahun 2023.” Kode yang dihasilkan mungkin lebih bersih tapi kehilangan logic penting.

Selalu refactor satu bagian kecil pada satu waktu, dan verify setelah setiap langkah.

Jangan Abaikan Test yang Fail

Kalau characterization test yang kamu tulis fail setelah refactoring, itu signal bahwa kamu mengubah behavior — baik sengaja maupun tidak. Investigasi dulu sebelum lanjut.

Jangan Percaya AI 100% untuk Security-Critical Code

Autentikasi, otorisasi, enkripsi, validasi input — review ini secara manual. AI mungkin menghasilkan kode yang terlihat bersih tapi punya subtle security issue.

---

Toolkit Refactoring dengan AI

Untuk Code Understanding:

• Claude atau GPT-4 — explain dan analyze kode
• GitHub Copilot Chat — inline explanation di editor

Untuk Automated Refactoring:

• Cursor / Windsurf — multi-file refactoring dengan konteks
• JetBrains IDE — built-in refactoring tools yang kuat (rename, extract, inline)
• VS Code refactoring tools — lebih basic tapi cukup untuk banyak kasus

Untuk Testing:

• Jest / Vitest — unit testing untuk JavaScript/TypeScript
• Stryker — mutation testing untuk verify test quality

Untuk Code Analysis:

• SonarQube — static analysis untuk detect code smells
• ESLint/TSLint dengan rule sets yang comprehensive

---

Kasus Nyata: Refactoring God Function

God function adalah function yang melakukan terlalu banyak hal — bisa ratusan bahkan ribuan baris. Ini salah satu yang paling umum di legacy code.

Pendekatan step by step:

1. Minta AI jelaskan apa yang function ini lakukan
2. Identifikasi “natural sections” di dalam function
3. Extract setiap section ke function terpisah dengan nama yang descriptive
4. Test bahwa behavior sama
5. Baru, kalau perlu, refactor lebih dalam di masing-masing function yang sudah di-extract

Perlu diingat: tujuan awal bukan membuat kode sempurna — tapi membuat kode yang cukup dapat dipahami untuk bisa dimodifikasi dengan aman.

---

Kapan Rewrite vs Refactor?

Pertanyaan yang tidak ada jawaban universal:

Pilih refactor ketika:

• Sistem masih jalan dan ada user yang bergantung padanya
• Business logic tersembunyi di kode, susah untuk didokumentasikan ulang dari awal
• Risk of rewrite lebih tinggi dari benefit
• Tim tidak punya waktu untuk rewrite total

Pertimbangkan rewrite ketika:

• Teknologi yang digunakan sudah tidak supported
• Biaya maintenance lebih tinggi dari biaya rewrite
• Kode sudah terlalu korup untuk diperbaiki secara incremental
• Ada clear spec yang bisa jadi foundation untuk versi baru

Rewrite total hampir selalu lebih susah dari yang diperkirakan. Mulai dari refactor, dan escalate ke rewrite hanya kalau refactor benar-benar tidak feasible.

---

Kesimpulan

Legacy code bukan musuh — ini aset yang perlu dirawat. AI sangat membantu untuk mempercepat pemahaman dan menemukan pola, tapi judgment dan kehati-hatian tetap di tangan kamu.

Pendekatan yang benar: pelan, terstruktur, selalu ada test, dan ubah satu hal kecil pada satu waktu. Hasilnya mungkin tidak secepat yang diinginkan, tapi jauh lebih aman daripada refactoring yang tergesa-gesa.

---

Punya codebase lama yang perlu dimodernisasi tapi tidak tahu harus mulai dari mana? Atau butuh bantuan merencanakan strategi refactoring yang aman? Yuk ngobrol — hubungi mafadev dan kita tackle bareng.

“Pengen membuat aplikasi AI tapi bingung mulai dari mana.”

Ini yang paling sering saya dengar dari developer yang ingin masuk ke dunia AI. Banyak yang terjebak di fase research: baca terlalu banyak artikel, nonton terlalu banyak tutorial, tapi tidak ada yang dibangun.

Artikel ini berbeda. Kita akan benar-benar build aplikasi AI sederhana tapi fungsional, dari nol sampai deploy. Bukan teori — ini praktek.

---

Aplikasi yang Akan Kita Buat

AI Document Q&A — sebuah aplikasi web di mana user bisa upload dokumen (PDF atau teks) dan bertanya tentang isinya. Sederhana tapi ini adalah foundation dari banyak use case enterprise nyata.

Stack yang digunakan:

• Backend: Node.js dengan Hono (lightweight, fast)
• Frontend: HTML + vanilla JS (sesimpel mungkin agar fokus ke AI logic)
• AI: Anthropic Claude API
• Vector Database: Upstash Vector (free tier)
• Deploy: Railway atau Fly.io

---

Konsep yang Perlu Dipahami Dulu

Sebelum coding, dua konsep penting yang perlu kamu mengerti:

RAG (Retrieval-Augmented Generation)

Masalah dengan langsung kirim dokumen ke LLM: dokumen besar tidak muat dalam context window, dan mahal kalau harus kirim seluruh dokumen setiap pertanyaan.

Solusinya: RAG. Alurnya:

1. Dokumen dipotong jadi chunk-chunk kecil
2. Setiap chunk dikonversi jadi embedding (representasi numerik)
3. Embedding disimpan di vector database
4. Ketika ada pertanyaan, pertanyaan juga dikonversi jadi embedding
5. Cari chunk yang paling relevan (nearest neighbor search)
6. Kirim chunk relevan + pertanyaan ke LLM

Embeddings

Embedding adalah cara mengkonversi teks ke vektor angka di mana teks yang “maknanya mirip” akan punya vektor yang dekat satu sama lain. Model embedding yang populer: text-embedding-3-small dari OpenAI, atau embedding dari Voyage AI.

---

Langkah 1: Setup Project

mkdir ai-document-qa
cd ai-document-qa
npm init -y
npm install hono @anthropic-ai/sdk @upstash/vector pdf-parse dotenv
npm install -D typescript @types/node tsx

Buat file .env:

ANTHROPIC_API_KEY=sk-ant-xxx
UPSTASH_VECTOR_REST_URL=https://xxx.upstash.io
UPSTASH_VECTOR_REST_TOKEN=xxx

---

Langkah 2: Setup Vector Database

Daftar di upstash.com, buat Vector database baru dengan dimension 1536 (sesuai dengan model embedding yang akan kita pakai).

---

Langkah 3: Document Processing

Buat file src/document.ts:

import Anthropic from '@anthropic-ai/sdk';
import { Index } from '@upstash/vector';
import pdfParse from 'pdf-parse';

const anthropic = new Anthropic();
const vectorIndex = new Index();

// Potong teks jadi chunk dengan overlap
function chunkText(text: string, chunkSize = 500, overlap = 50): string[] {
const words = text.split(' ');
const chunks: string[] = [];

for (let i = 0; i < words.length; i += chunkSize - overlap) {
const chunk = words.slice(i, i + chunkSize).join(' ');
if (chunk.trim()) chunks.push(chunk);
}

return chunks;
}

// Generate embedding menggunakan Voyage AI via Anthropic
async function generateEmbedding(text: string): Promise<number[]> {
// Gunakan OpenAI embedding API atau Voyage AI
// Untuk simplicity, kita gunakan mock 1536-dimension vector
// Di production, integrasikan dengan embedding model yang proper
const response = await fetch('https://api.voyageai.com/v1/embeddings', {
method: 'POST',
headers: {
'Authorization': Bearer ${process.env.VOYAGE_API_KEY},
'Content-Type': 'application/json'
},
body: JSON.stringify({
input: text,
model: 'voyage-3'
})
});

const data = await response.json() as any;
return data.data[0].embedding;
}

// Process dokumen: extract teks, chunk, embed, simpan
export async function processDocument(
buffer: Buffer,
filename: string,
mimeType: string
): Promise<{ chunks: number }> {
let text = '';

if (mimeType === 'application/pdf') {
const pdfData = await pdfParse(buffer);
text = pdfData.text;
} else {
text = buffer.toString('utf-8');
}

const chunks = chunkText(text);
console.log(Processing ${chunks.length} chunks from ${filename});

// Generate embeddings dan simpan ke vector database
const vectors = await Promise.all(
chunks.map(async (chunk, i) => {
const embedding = await generateEmbedding(chunk);
return {
id: ${filename}-${i},
vector: embedding,
metadata: { text: chunk, filename, chunkIndex: i }
};
})
);

await vectorIndex.upsert(vectors);
return { chunks: chunks.length };
}

// Cari chunk yang relevan dengan pertanyaan
export async function searchRelevantChunks(
query: string,
topK = 5
): Promise<string[]> {
const queryEmbedding = await generateEmbedding(query);

const results = await vectorIndex.query({
vector: queryEmbedding,
topK,
includeMetadata: true
});

return results
.filter(r => r.metadata)
.map(r => (r.metadata as any).text);
}

---

Langkah 4: Chat dengan Dokumen

Buat file src/chat.ts:

import Anthropic from '@anthropic-ai/sdk';
import { searchRelevantChunks } from './document';

const anthropic = new Anthropic();

export async function askDocument(question: string): Promise<string> {
// Ambil chunk yang relevan
const relevantChunks = await searchRelevantChunks(question);

if (relevantChunks.length === 0) {
return 'Saya tidak menemukan informasi yang relevan dalam dokumen yang diupload.';
}

const context = relevantChunks.join('\n\n---\n\n');

// Kirim ke Claude dengan konteks yang relevan
const response = await anthropic.messages.create({
model: 'claude-sonnet-4-5',
max_tokens: 1024,
messages: [
{
role: 'user',
content: Kamu adalah asisten yang membantu menjawab pertanyaan berdasarkan dokumen yang diberikan.


Berikut adalah bagian-bagian dokumen yang relevan dengan pertanyaan:

${context}

Berdasarkan informasi di atas, jawab pertanyaan berikut:
${question}

Kalau jawabannya tidak ada dalam dokumen, katakan dengan jelas bahwa informasi tersebut tidak ada dalam dokumen.
}
]
});

return response.content[0].type === 'text'
? response.content[0].text
: 'Tidak dapat menghasilkan respons.';
}

---

Langkah 5: API Server

Buat file src/server.ts:

import { Hono } from 'hono';
import { serve } from '@hono/node-server';
import { processDocument } from './document';
import { askDocument } from './chat';

const app = new Hono();

// Upload dokumen
app.post('/upload', async (c) => {
try {
const formData = await c.req.formData();
const file = formData.get('file') as File;

if (!file) {
return c.json({ error: 'No file provided' }, 400);
}

const buffer = Buffer.from(await file.arrayBuffer());
const result = await processDocument(buffer, file.name, file.type);

return c.json({
success: true,
message: Dokumen diproses: ${result.chunks} chunks
});
} catch (error) {
return c.json({ error: 'Gagal memproses dokumen' }, 500);
}
});

// Tanya dokumen
app.post('/ask', async (c) => {
try {
const { question } = await c.req.json();

if (!question) {
return c.json({ error: 'Question is required' }, 400);
}

const answer = await askDocument(question);
return c.json({ answer });
} catch (error) {
return c.json({ error: 'Gagal mendapatkan jawaban' }, 500);
}
});

// Serve static files untuk frontend
app.get('/', (c) => {
return c.html(

<!DOCTYPE html>
<html>
<head>
<title>AI Document Q&A</title>
<style>
body { font-family: sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; }
textarea { width: 100%; height: 100px; margin: 10px 0; }
button { background: #0070f3; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px; }
#answer { margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 5px; }
</style>
</head>
<body>
<h1>AI Document Q&A</h1>

<h2>1. Upload Dokumen</h2>
<input type="file" id="fileInput" accept=".pdf,.txt">
<button onclick="uploadFile()">Upload</button>
<p id="uploadStatus"></p>

<h2>2. Tanya tentang Dokumen</h2>
<textarea id="question" placeholder="Tulis pertanyaan kamu..."></textarea>
<button onclick="askQuestion()">Tanya</button>

<div id="answer"></div>

<script>
async function uploadFile() {
const file = document.getElementById('fileInput').files[0];
if (!file) return alert('Pilih file dulu');

const formData = new FormData();
formData.append('file', file);

const res = await fetch('/upload', { method: 'POST', body: formData });
const data = await res.json();
document.getElementById('uploadStatus').textContent = data.message || data.error;
}

async function askQuestion() {
const question = document.getElementById('question').value;
if (!question) return alert('Tulis pertanyaan dulu');

document.getElementById('answer').textContent = 'Mencari jawaban...';

const res = await fetch('/ask', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ question })
});

const data = await res.json();
document.getElementById('answer').textContent = data.answer || data.error;
}
</script>
</body>
</html>
);
});

serve({ fetch: app.fetch, port: 3000 });
console.log('Server running at http://localhost:3000');

---

Langkah 6: Deploy

Deploy ke Railway (paling mudah):

# Install Railway CLI
npm install -g @railway/cli

Login dan deploy
railway login
railway init
railway up

Railway akan otomatis detect Node.js project dan deploy. Set environment variables melalui Railway dashboard.

Atau deploy ke Fly.io:

# Install Fly CLI
curl -L https://fly.io/install.sh | sh

Deploy
fly launch
fly secrets set ANTHROPIC_API_KEY=xxx
fly secrets set UPSTASH_VECTOR_REST_URL=xxx
fly secrets set UPSTASH_VECTOR_REST_TOKEN=xxx
fly deploy

---

Apa Selanjutnya?

Ini adalah foundation. Dari sini kamu bisa extend ke:

• Multi-document support — track dokumen per user dengan metadata filtering
• Conversation history — chat yang ingat context percakapan sebelumnya
• Streaming responses — jawaban muncul per token, bukan nunggu selesai semua
• Authentication — user management dengan Supabase Auth
• Document management — list, delete, organize dokumen yang sudah diupload

---

Kesimpulan

Membangun aplikasi AI tidak harus menunggu sampai kamu “siap” atau sampai kamu mengerti semuanya. Foundation dari semua aplikasi AI berbasis dokumen adalah sama: chunk, embed, retrieve, generate.

Mulai dari yang sederhana, deploy ke production (walaupun belum sempurna), lalu iterate berdasarkan feedback nyata.

---

Punya ide aplikasi AI yang mau dibangun tapi bingung bagaimana arsitekturnya? Atau butuh bantuan dari proof of concept sampai production-ready? Yuk ngobrol — hubungi mafadev dan kita wujudkan bareng.