Quick StartIntegrationAPI ReferenceCustomizationArchitecture

Architektur (Vibe-Coder-Leitfaden)

Tiefgehender Einblick in die RAG-Pipeline für Entwickler, die verstehen möchten, wie es funktioniert.

RAG-Pipeline-Übersicht

LaunchChat nutzt Retrieval Augmented Generation (RAG), um Fragen basierend auf Ihrer Dokumentation zu beantworten.

1. Aufnahme

Parsen → Aufteilen → Einbetten → Speichern

2. Abruf

Abfrage → Vektorsuche → Ranking

3. Generierung

Kontext → LLM → Antwort + Quellenangaben

Aufnahme-Pipeline

1. Parsen

Inhalte werden aus verschiedenen Quellen in Klartext umgewandelt:

  • Notion: Block-für-Block-Parsing unter Beibehaltung der Hierarchie
  • DOCX: Extraktion über mammoth.js
  • Markdown: Parsing mit remark/unified
  • Website: Gecrawlt und von Navigation/Footer bereinigt

2. Aufteilung

Text wird in überlappende Chunks für optimalen Abruf aufgeteilt:

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

Jeder Chunk behält seine übergeordnete Überschriftenhierarchie für den Kontext bei.

3. Einbettung

Chunks werden in 1536-dimensionale Vektoren umgewandelt:

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

4. Speicherung

Vektoren werden in PostgreSQL mit der pgvector-Erweiterung gespeichert:

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

Abrufstrategie

Hybride Suche

Wir verwenden einen zweistufigen Abrufprozess:

  1. Vector Search: Vektorsuche: Kosinus-Ähnlichkeit mit dem <=>-Operator von pgvector
  2. Keyword Fallback: Keyword-Fallback: Bei niedriger Ähnlichkeit der Vektorergebnisse fügen wir keyword-basierte Chunks hinzu

Ähnlichkeitsbewertung

-- 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

Antwortgenerierung

Konfidenzbewertung

Vor der Generierung berechnen wir einen Konfidenzwert:

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

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

Quellenextraktion

Das LLM wird angewiesen, das Format [Quelle N] zu verwenden. Wir parsen diese und verlinken zu den Originalseiten:

// 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])

Best Practices für Dokumentation

Strukturieren Sie Ihre Docs für optimalen KI-Abruf:

Empfohlen

  • Klare, beschreibende Überschriften verwenden
  • Abschnitte auf ein Thema fokussieren
  • Beispiele und Code-Snippets einbinden
  • Begriffe und Abkürzungen definieren
  • Docs aktualisieren, wenn sich Funktionen ändern

Vermeiden

  • Sehr lange Seiten ohne Struktur
  • Doppelte Inhalte über mehrere Seiten
  • Veraltete oder widersprüchliche Informationen
  • Übermäßige Verwendung von Bildern ohne Alt-Text
  • Reine Navigationsseiten

KI-Prompt-Vorlage

Kopieren Sie diesen Prompt in Cursor, Windsurf oder Claude Code, um die Integration von LaunchChat zu unterstützen:

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.