Project Custom (Integrasi AI / LLM) Mei 2026

Chatbot AI Customer Support WhatsApp

Agentic RAG chatbot production-grade untuk SMB. WhatsApp + widget web yang bisa di-embed, hybrid retrieval, LLM-as-reranker, tool call zero-hallucination. Stack lean dengan full code ownership.

Klien

Project Portfolio

Peran

Solo Developer

Durasi

5 sub-project, 10 hari

Status

Production-ready

Kategori

Project Custom (Integrasi AI / LLM)

Tech Stack

TypeScript Node.js 20+ ChromaDB Featherless (Qwen3) whatsapp-web.js Vite + Preact Docker + Caddy Langfuse
Chatbot AI Customer Support WhatsApp: Agentic RAG chatbot production-grade untuk SMB. WhatsApp + widget web yang bisa di-embed, hybrid retrieval, LLM-as-rera…

Ringkasan

Agen customer support production-grade untuk usaha kecil-menengah, dibangun dari nol sebagai showcase end-to-end engineering agentic AI. Bot ini menjawab sekitar 80% pertanyaan WhatsApp berulang 24 jam sehari dari knowledge base, menangkap lead berkualitas pakai BANT scoring, lalu mengeskalasi 20% sisanya yang complex ke admin lewat WhatsApp push notification realtime.

Beda dengan chatbot RAG biasa yang selalu retrieve dokumen untuk setiap pesan, agen ini pakai brain LLM adaptif yang klasifikasi intent dulu lalu skip retrieval sekitar 60% waktu. Lookup harga dan portfolio diarahkan ke JSON tool deterministik, jadi tidak ada halusinasi pada angka. Pertanyaan di luar topik (kurs, cuaca, generate kode) ditolak dengan sopan, bukan dijawab dengan hasil karangan.

Stack-nya sengaja lean: Featherless flat-rate plan untuk semua LLM call plus satu VPS kecil cukup untuk masuk production. Didesain untuk operasi rendah-overhead yang predictable, tidak ke-squeeze vendor pricing per-kursi atau per-token.

Tantangan

Kebanyakan vendor chatbot SMB lock-in customer ke platform proprietary per-kursi dengan kontrol terbatas atas data, prompt, dan model selection. Sebuah studio web solo di Indonesia ingin tawarkan fungsi setara ke klinik, e-commerce, dan agency lokal dengan full ownership stack dan kemampuan self-host.

Requirement teknisnya tidak ringan:

  • Channel WhatsApp dan widget website, share orchestrator + knowledge base yang sama
  • Zero halusinasi pada harga dan portfolio, karena salah angka rupiah ke customer riil = trust rusak
  • Bilingual (Indonesia dan Inggris) dengan language stickiness, supaya kata “thanks” sebagai courtesy tidak flip sesi ke English
  • Safety guardrail: rate limit, anti prompt injection, masking PII di output, budget token per sesi
  • Observability production dengan trace setiap turn percakapan
  • Lean stack design supaya solo operator bisa support dan resell tanpa ketergantungan ke vendor pricing changes

Solusi

Arsitektur agentic 5 lapis

Sistem dirancang sebagai 5 sub-project terfokus yang saling building blocks, masing-masing dengan spec, plan, dan test suite sendiri:

  • Sub-project A. Retrieval Quality. Hybrid retrieval gabungan BM25 keyword + dense vector (Qwen3-Embedding-4B) + Reciprocal Rank Fusion k=60, lalu pass LLM-as-reranker dengan Qwen3-8B. Akurasi sekitar 81% pada query kompleks, jauh di atas baseline dense-only.
  • Sub-project B. Conversation Brain. Satu LLM call memutuskan intent (factual / lead / handoff / refuse), routing ke handler yang tepat (RAG / tool / refusal / eskalasi), rewrite query dengan coreference resolution, dan ekstrak slot BANT (project type, timeline, budget, contact). Skip retrieval pada 60%+ pesan.
  • Sub-project C. Safety Layer. 4 guard di atas orchestrator: rate limiter sliding window (20 per 5 menit, 200 per hari per nomor), regex injection guard dengan 12 pola jailbreak EN/ID, masking PII di output untuk email, nomor HP Indonesia, kartu kredit, plus budget token per sesi 50K yang trigger auto-handoff sebelum percakapan runaway menguras kredit.
  • Sub-project D. Web Widget Channel. Floating bubble Vite + Preact yang di-embed di situs manapun lewat satu tag <script>. Streaming Server-Sent Events, bundle 48 KB gzipped (single file, CSS di-inject lewat JS), sesi UUID di localStorage. Reuse orchestrator yang sama dengan WhatsApp lewat channel adapter tipis.
  • Sub-project E. Production Deployment. Docker Compose 4 service (app + Chroma + Redis + Caddy), L1 embedding cache di SQLite, L2 response cache di Redis dengan PII-safe write guard, Langfuse Cloud tracing per turn percakapan, Promptfoo CI eval gate setiap PR, systemd timer restart Puppeteer harian, Cloudflare WAF di depan.

Tool terstruktur zero-hallucination

Data harga dan portfolio disimpan sebagai file JSON, BUKAN di-embed ke vector database. Saat brain deteksi pertanyaan harga, dia panggil get_pricing(project_type) yang baca file dan format reply. LLM tidak pernah lihat angka harga mentah di context-nya, jadi tidak bisa karang atau salah quote. Ini deviasi sengaja dari tutorial RAG “embed semuanya” dan jadi reliability win paling besar dalam testing production.

Language stickiness dengan smart switching

Setelah regression di mana bot flip ke English di tengah percakapan karena user kirim “thanks”, brain prompt ditulis ulang dengan rule session-sticky: default ke bahasa yang dipakai assistant di reply terakhir, override hanya kalau pesan terbaru punya 3+ content word di bahasa lain (kecuali kata courtesy yang sering di-borrow). 6 contoh eksplisit di prompt cover edge case kayak code-switching ala Jakarta tech crowd.

Anti-hallucination relevance gate

Saat skor retrieval rendah dan query user substansial (lebih dari 25 karakter), bot return reply sopan “Aku belum nemu info pasti di knowledge base, bisa kasih konteks?” bukan biarkan LLM generate dari chunk yang tidak relevan. Query conversational pendek (greeting) bypass gate ini supaya LLM bisa respond natural. Ini catch bug nyata di mana pertanyaan kayak “1 USD” trigger LLM ngarang kurs; gate plus pattern refuse di brain sekarang block seluruh kelas halusinasi data realtime.

Infrastruktur lean

Semua jalan di flat-rate Featherless plan untuk LLM call unlimited (Qwen3-8B brain, Qwen3-8B reranker, Qwen2.5-7B generator, Qwen3-Embedding-4B) plus satu VPS kecil. Service pendukung (ChromaDB, Redis, Caddy, Cloudflare WAF, Langfuse Cloud, Promptfoo CI di GitHub Actions) jalan di tier gratis atau open-source. L1 embedding cache eliminasi panggilan LLM di query berulang; L2 response cache (saat Redis di-wire) cache reply FAQ-style selama 24 jam dengan bypass otomatis kalau ada PII.

Hasil

  • Test coverage → 150 unit test lulus (146 backend node:test + 4 widget vitest), zero TypeScript error di strict mode, dengan seam dependency-injection di orchestrator buat isolation test yang bersih.
  • Bundle widget → 48 KB gzipped single file. Satu tag <script> embed seluruh experience chat termasuk styling. Turun dari 211 KB setelah Preact swap dan plugin CSS-inject-by-JS.
  • Channel parity → WhatsApp dan widget web share orchestrator pipeline yang persis sama. Tambah channel baru (Telegram, web SDK, voice) cukup adapter tipis, bukan rewrite.
  • Stack ownership → Full ownership code dan kemampuan self-host versus per-seat SaaS chatbot (Intercom Fin, Botpress, ChatBot.com) yang lock-in customer ke platform proprietary. Hindari surprise vendor pricing dan full kontrol atas data, prompt, dan model selection.
  • Bug yang ketangkep lewat end-to-end testing → Sesi Playwright nemu race condition SSE di mana req.on("close") fire prematurely setelah body parsing Express, bikin semua request widget hang 0 bytes. Bug ini akan ship ke production senyap kalau testing berhenti di level unit. Lesson logged: selalu jalankan flow browser nyata sebelum claim feature complete.

Diagram arsitektur

Agen route setiap pesan masuk lewat decision pipeline ini sebelum retrieval apapun terjadi:

pesan masuk (WhatsApp atau widget web)

[Safety: rate limit → injection guard → token budget]

[Brain LLM 1-shot: intent + tool + rewrite query + slot BANT + language]

  ├─ refuse     → refusal canned (no retrieval, no LLM gen)
  ├─ handoff    → forward ke admin lewat WhatsApp push
  ├─ tool=pricing   → baca pricing.json (no RAG, no hallucination)
  ├─ tool=portfolio → baca portfolio.json (no RAG)
  └─ factual + tool=null → jalur RAG

                       [cek L2 response cache]
                       hit  → kembalikan reply cached
                       miss → embed query (L1 cache) → hybrid retrieve →
                              LLM rerank → relevance gate → generate →
                              PII mask → write cache (jika no PII)

[Lead capture: BANT scoring, hot lead (≥70) → push admin]
[Memory sesi: window 7 hari, 6 turn terakhir ke brain]
[Reply: filter stripDashes → SSE chunk atau WA send]

Rasional Tech Stack

  • Featherless vs OpenAI: billing flat-rate, bukan per-token, jadi tidak ada cost spike saat traffic burst. Family Qwen3 paling kuat untuk Indonesia + multilingual menurut benchmark MMTEB, no-logging policy align dengan tujuan data minimization.
  • ChromaDB vs Pinecone: open source, native hybrid BM25+dense sejak v1.x, jalan di Docker network yang sama dengan app, bisa swap ke Qdrant nanti lewat interface abstract VectorStore kalau scale menuntut.
  • Preact vs React: 40 KB win di bundle size, drop-in compat alias di Vite, kode komponen sama. Kritis untuk widget embed di mana setiap KB count.
  • whatsapp-web.js vs WhatsApp Cloud API: zero per-message cost untuk portfolio dan pilot deployment, drop-in replaceable dengan WAHA self-host atau Cloud API untuk production at scale.
  • Caddy vs nginx: auto-HTTPS lewat Let’s Encrypt tanpa config, memory footprint lebih kecil, Caddyfile separuh baris dari config nginx ekivalen.

Tangkapan Layar

Chatbot AI Customer Support WhatsApp: Tangkapan Layar 1
Chatbot AI Customer Support WhatsApp: Tangkapan Layar 2
Chatbot AI Customer Support WhatsApp: Tangkapan Layar 3
Chatbot AI Customer Support WhatsApp: Tangkapan Layar 4
Chatbot AI Customer Support WhatsApp: Tangkapan Layar 5

Brief singkat

Kirim scope, timeline, dan anggaran perkiraan. Saya balas dengan estimasi atau penolakan singkat kalau tidak cocok.