Aufbau eines sicheren, performanten RAG-Chatbots: Architektur und Entwicklungsreise

Für Szkolenia Skin Atelier haben wir einen vollständig individuellen, selbst gehosteten und sicheren KI-Chatbot gebaut. Er nutzt Retrieval-Augmented Generation (RAG), um Nutzerfragen direkt auf Basis der tatsächlichen Website-Inhalte zu beantworten, erfasst potenzielle Leads, versendet automatische Benachrichtigungen und ist gegen DDoS und API-Missbrauch geschützt.

• →Next.js App Router für das Frontend und lokalisiertes Routing.
• →Vercel AI SDK mit Google Gemini für gestreamte Konversationsantworten.
• →Lokale Vektorsuche und Embeddings für sichere Retrieval-Augmented Generation.
• →Lead-Erfassung und E-Mail-Benachrichtigungen auf Nodemailer-Basis.

Chat-Walkthrough

Falls das Video nicht startet, öffnen Sie es direkt: MP4 direkt ansehen.

Technische Architektur: So funktioniert es

Der Chatbot ist mit Next.js, Vercel AI SDK, Google Gemini und Nodemailer gebaut und läuft als selbst gehostete Node.js-Anwendung.

1. Die RAG-Pipeline (Retrieval-Augmented Generation)

Statt ein teures Modell neu zu trainieren oder zu fine-tunen, geben wir dem LLM die faktischen Website-Inhalte zur Abfragezeit direkt mit.

• →Die Vektordatenbank: Ein Crawler-Skript liest Sitemaps und Seiten aus, verarbeitet den Text zu semantischen Absätzen und wandelt sie mit dem gemini-embedding-001-Modell in mathematische Vektorrepräsentationen um. Gespeichert wird lokal in einer kompakten Flat-File-Datenbank (knowledge.json).
• →Der Retrieval-Schritt: Stellt ein Nutzer eine Frage, bettet die API die Frage dynamisch ein und berechnet die Cosine Similarity zwischen dem Fragevektor und allen Absätzen unserer Datenbank.
• →Kontext-Zusammenstellung:Die 8 semantisch relevantesten Absätze werden abgerufen und als „Source of Truth“ in den System-Prompt des LLM injiziert.

2. Large Language Model & Streaming

Die Generierung übernimmt Googles Gemini 3.5 Flash über das Vercel AI SDK. Das stellt sicher:

• →Mehrsprachigkeit: Der Chatbot erkennt die Eingabesprache automatisch und antwortet in derselben Sprache.
• →Niedrige Latenz: Antworten streamen Zeichen für Zeichen in die UI und halten das Engagement hoch.
• →Kosteneffizienz: Mit gemini-3.5-flash bleiben die API-Kosten pro Anfrage bei Bruchteilen eines Cents.

3. Lead-Erfassung & Benachrichtigungs-Engine

Wenn ein Nutzer Interesse an der Buchung einer Schulung äußert oder Kontaktdaten hinterlässt, reagiert das System aktiv.

• →Tool Calling: Das Modell ruft ein JSON-Schema-validiertes captureLead-Tool auf, sobald Kontaktdaten auftauchen.
• →SMTP-Mailer: Das Backend verbindet sich über Nodemailer mit SMTP und mailt Leads sofort an die Administratoren.

4. Dynamische Konfigurationsebene

Damit Website-Betreiber Prompt-Richtlinien, Markenfarben, Begrüßungstexte, Links und Avatar-Icons ohne Code-Änderungen anpassen können, haben wir die Konfiguration in eine JSON-Datei ausgelagert. API-Route und React-Widget laden diese Konfiguration bei Bedarf — Änderungen greifen sofort.

5. IP-Rate-Limiting ohne Abhängigkeiten

Öffentlich erreichbare KI-Endpoints sind häufige Ziele für DDoS-Angriffe und die Erschöpfung von API-Kontingenten. Zum Schutz unseres Backends haben wir einen effizienten Sliding-Window-Rate-Limiter in reinem TypeScript entwickelt. Er blockiert Missbrauch mit HTTP 429 Too Many Requests, bevor auch nur eine Vektorberechnung, ein Gemini-Token oder eine SMTP-E-Mail verbraucht wird.

Die Entwicklungsreise: Iterative Meilensteine