Arsitektur (Panduan Vibe Coder)

Penjelasan mendalam tentang RAG pipeline untuk developer yang ingin memahami cara kerjanya.

Gambaran Umum RAG Pipeline

LaunchChat menggunakan Retrieval Augmented Generation (RAG) untuk menjawab pertanyaan berdasarkan dokumentasi Anda.

1. Ingesti

Parse → Potong → Embed → Simpan

2. Pengambilan

Query → Pencarian Vektor → Peringkat

3. Pembuatan

Konteks → LLM → Jawaban + Kutipan

Ingestion Pipeline

1. Parsing

Konten diparse dari berbagai sumber menjadi teks biasa:

Notion: Parsing blok per blok dengan mempertahankan hierarki
DOCX: Diekstrak melalui mammoth.js
Markdown: Diparse dengan remark/unified
Website: Di-crawl dan dibersihkan dari navigasi/footer

2. Chunking

Teks dipotong menjadi potongan yang tumpang tindih untuk pengambilan optimal:

{
  targetSize: 400,    // tokens per chunk
  overlap: 50,        // token overlap between chunks
  preserveHeadings: true,  // keep heading context
  minChunkSize: 100   // minimum viable chunk
}

Setiap potongan mempertahankan hierarki heading induknya untuk konteks.

3. Embedding

Potongan dikonversi menjadi vektor 1536 dimensi:

Model: text-embedding-3-small
Dimensions: 1536
Provider: OpenAI (via OpenRouter)

4. Penyimpanan

Vektor disimpan di PostgreSQL dengan ekstensi pgvector:

-- content_chunks table
id: uuid
knowledge_base_id: uuid
page_id: string
page_title: string
content: text
embedding: vector(1536)
parent_heading: string

Strategi Pengambilan

Pencarian Hybrid

Kami menggunakan proses pengambilan dua tahap:

Vector Search: Pencarian Vektor: Kesamaan kosinus menggunakan operator <=> pgvector
Keyword Fallback: Fallback Kata Kunci: Jika hasil vektor memiliki kesamaan rendah, kami menambahkan potongan yang cocok dengan kata kunci

Penilaian Kesamaan

-- Vector similarity query
SELECT *, 1 - (embedding <=> query_embedding) as similarity
FROM content_chunks
WHERE knowledge_base_id = $1
ORDER BY embedding <=> query_embedding
LIMIT 5

Pembuatan Jawaban

Penilaian Kepercayaan

Sebelum membuat jawaban, kami menghitung skor kepercayaan:

confidence = bestSimilarity + (hasMultipleChunks ? 0.1 : 0) + 0.2
// Capped at 1.0

if (confidence < threshold) {
  return refusalMessage;  // Don't hallucinate
}

Ekstraksi Kutipan

LLM diinstruksikan untuk menggunakan format [Source N]. Kami mengurai ini dan menautkan ke halaman asli:

// Extract citations from answer
const citationPattern = /\[Source (\d+)\]/g;
const matches = answer.matchAll(citationPattern);

// Map to original pages
citations = matches.map(m => chunks[m[1] - 1])

Praktik Terbaik Dokumentasi

Strukturkan dokumen Anda untuk pengambilan AI yang optimal:

Lakukan

Gunakan heading yang jelas dan deskriptif
Jaga setiap bagian fokus pada satu topik
Sertakan contoh dan cuplikan kode
Definisikan istilah dan akronim
Perbarui dokumen saat fitur berubah

Hindari

Halaman yang sangat panjang tanpa struktur
Konten duplikat di berbagai halaman
Informasi yang usang atau bertentangan
Penggunaan gambar berlebihan tanpa alt text
Halaman yang hanya berisi navigasi

Template Prompt AI

Salin prompt ini ke Cursor, Windsurf, atau Claude Code untuk membantu mengintegrasikan LaunchChat:

I'm integrating LaunchChat, an AI-powered support widget.

Widget Setup:
1. Add to HTML: <script>window.LaunchChatConfig = {widgetId: "ID"}</script>
   <script src="https://domain.com/widget.js" async></script>

2. For React/Next.js, create a client component that:
   - Sets window.LaunchChatConfig
   - Dynamically loads widget.js
   - Cleans up on unmount

API Reference:
- window.LaunchChatWidget.open() - Open chat
- window.LaunchChatWidget.close() - Close chat
- window.LaunchChatWidget.on(event, callback) - Listen to events
- Events: 'open', 'close', 'message', 'escalate', 'feedback'

Help me integrate this into my [FRAMEWORK] app.