Web-Chatbot mit lokaler KI

Was dieser Artikel über Web-Chatbots behandelt

• Wie ein Web-Chatbot mit lokaler KI funktioniert.
• Welche Bestandteile eine Chatbot-Oberfläche braucht.
• Wie Frontend, Backend und Sprachmodell zusammenspielen.
• Wie RAG und Dokumentensuche in den Web-Chatbot integriert werden.
• Datenschutz, Performance und typische Stolpersteine.

Einleitung: Web-Chatbot mit lokaler KI

Ein Web-Chatbot auf der eigenen Website ist heute Standard für viele Unternehmen. Er beantwortet Fragen, leitet Nutzer und entlastet Support-Teams. Wenn die KI lokal läuft, bleiben alle Gespräche und Daten im eigenen Netzwerk. Das ist besonders für datenschutzsensible Branchen interessant.

Ein lokaler Web-Chatbot besteht aus mehreren Teilen: der sichtbaren Chat-Oberfläche im Browser, einem Backend, das Anfragen entgegennimmt, und dem Sprachmodell mit optionaler Wissensdatenbank. Wer diese Komponenten versteht, kann einen eigenen Chatbot bauen oder ein bestehendes Tool anpassen.

Warum brauche ich einen lokalen Web-Chatbot?

Cloud-Chatbots sind einfach einzubinden, aber sie senden Nutzeranfragen an externe Anbieter. Für viele Unternehmen ist das problematisch. Lokale Chatbots bieten:

• Datenschutz: Keine Übertragung personenbezogener Daten.
• Kontrolle: Eigenes Modell, eigene Inhalte, eigene Logs.
• Kosten: Keine Gebühren pro Nachricht.
• Anpassung: Markenstimme, spezielles Wissen, individuelle Antworten.
• Verfügbarkeit: Keine Abhängigkeit von externen APIs.

Web-Chatbot kurz erklärt

Ein typischer Ablauf:

1. Nutzer schreibt in Chatfenster: Eine JavaScript-Komponente auf der Webseite nimmt die Eingabe entgegen.
2. Anfrage ans Backend: Frontend sendet die Nachricht an einen lokalen Server.
3. RAG optional: Das Backend sucht relevante Dokumentenchunks aus der Wissensdatenbank.
4. Prompt bauen: Das Sprachmodell bekommt Frage und Kontext.
5. Antwort generieren: Das Modell erzeugt eine Antwort.
6. Antwort anzeigen: Backend schickt Antwort zurück, Frontend zeigt sie an.

Wichtige Begriffe:

• Frontend: Sichtbare Chat-Oberfläche im Browser.
• Backend: Server, der zwischen Frontend und KI vermittelt.
• API: Schnittstelle, über die Anfragen und Antworten ausgetauscht werden.
• Streaming: Antwort wird Stück für Stück übertragen, nicht auf einmal.
• Session: Gesprächsverlauf, den das Modell im Blick behält.
• RAG: Wissensdatenbank für faktenbasierte Antworten.

Für wen ist ein Web-Chatbot gedacht?

• Für Website-Betreiber, die Nutzerfragen automatisieren wollen.
• Für Unternehmen mit Datenschutzanforderungen.
• Für Support-Teams, die häufige Fragen entlasten wollen.
• Für Entwickler, die individuelle Chatlösungen bauen.

Wichtige Begriffe rund um Web-Chatbots

• Open WebUI: Web-Chat-Oberfläche für Ollama.
• AnythingLLM: RAG-Plattform mit Chat-Oberfläche.
• FastAPI: Python-Framework für ein einfaches Backend.
• WebSocket: Protokoll für schnelle, bidirektionale Kommunikation.
• SSE: Server-Sent Events, oft für Streaming-Antworten.
• CORS: Sicherheitsmechanismus, der bestimmt, welche Webseiten auf die API zugreifen dürfen.

Frontend: Die Chat-Oberfläche

Das Frontend besteht meist aus HTML, CSS und JavaScript. Es zeigt eine Chatbox, Eingabefeld und Nachrichtenverlauf. Ein einfaches Beispiel:

<div id="chat-container">
  <div id="messages"></div>
  <input type="text" id="user-input" placeholder="Frage stellen...">
  <button onclick="sendMessage()">Senden</button>
</div>

Das JavaScript sendet die Nachricht:

async function sendMessage() {
  const input = document.getElementById('user-input');
  const text = input.value;
  input.value = '';

  const response = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message: text })
  });

  const data = await response.json();
  document.getElementById('messages').innerHTML += `<p>${data.reply}</p>`;
}

Für ein besseres Nutzererlebnis empfiehlt sich Streaming. Dann erscheint die Antwort Wort für Wort, anstatt erst am Ende der Generierung.

Backend: API zwischen Browser und KI

Ein einfaches FastAPI-Backend:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import requests

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/api/chat")
async def chat(payload: dict):
    frage = payload["message"]
    antwort = requests.post(
        "http://localhost:11434/api/generate",
        json={
            "model": "llama3.1:8b",
            "prompt": frage,
            "stream": False
        }
    ).json()
    return {"reply": antwort["response"]}

Das Backend kann erweitert werden um RAG, Session-Verwaltung, Nutzerauthentifizierung und Rate-Limiting.

RAG im Web-Chatbot

Wer faktenbasierte Antworten geben will, ergänzt die Wissensdatenbank:

1. Dokumente laden und chunken.
2. Embeddings erzeugen und in Chroma oder Qdrant speichern.
3. Bei jeder Anfrage passende Chunks suchen.
4. Chunks und Frage zusammen in den Prompt einbauen.

Beispiel:

Hier sind Auszüge aus der Dokumentation:
{chunks}

Beantworte die folgende Frage nur anhand dieser Auszüge:
{frage}

Sicherheit und Datenschutz

• CORS richtig konfigurieren: Nicht jede Webseite darf auf die API zugreifen.
• HTTPS erzwingen: Verschlüsselte Verbindung verhindert Mithören.
• Authentifizierung: Sessions oder API-Keys für geschützten Zugriff.
• Rate-Limiting: Verhindert Missbrauch.
• Logging vermeiden: Chatverläufe nur bei Bedarf und DSGVO-konform speichern.

Typische Stolpersteine beim Web-Chatbot

• CORS-Fehler: Frontend und Backend dürfen nicht einfach zusammenarbeiten.
• Kein Streaming: Nutzer müssen lange auf Antworten warten.
• Session-Verlust: Ohne Speicher vergisst der Bot den Kontext.
• RAG-Qualität: Schlechte Chunks oder falsche Embedding-Modelle liefern schlechte Antworten.
• Zu viele Nutzer gleichzeitig: Lokale Hardware kann begrenzte parallele Anfragen verarbeiten.

Weiterführende Links und Infos

• BotServ.de Open WebUI
• BotServ.de AnythingLLM mit Docker
• BotServ.de Lokales RAG
• FastAPI
• Open WebUI

FAQ: Web-Chatbot mit lokaler KI

Brauche ich Programmierkenntnisse? Für einfache Integrationen mit Open WebUI reichen wenig Kenntnisse. Für maßgeschneiderte Lösungen ist mehr Erfahrung nötig.

Ist ein lokaler Web-Chatbot langsam? Je nach Modell und Hardware kann es etwas länger dauern als Cloud-Anbieter. Moderne GPUs und kleinere Modelle liefern aber akzeptable Zeiten.

Kann ich den Chatbot auf einer Unterseite einbinden? Ja. Das Frontend lässt sich in beliebige Webseiten integrieren.

Wie aktualisiere ich das Wissen des Chatbots? Dokumente in die Vektordatenbank neu einlesen oder Chunks aktualisieren.

Ist lokaler Betrieb für Kundenwebsites geeignet? Ja, wenn Datenschutz und Verfügbarkeit gewährleistet sind. Für sehr hohe Lasten kann ein Cloud-Server ergänzt werden.

Quellen und weiterführende Literatur

• FastAPI: https://fastapi.tiangolo.com/
• Open WebUI: https://openwebui.com/
• Ollama API: https://ollama.com/
• AnythingLLM: https://useanything.com/

Zusammenfassung: Web-Chatbot mit lokaler KI

Ein Web-Chatbot mit lokaler KI besteht aus Frontend, Backend und Sprachmodell. RAG ermöglicht faktenbasierte Antworten aus eigenen Dokumenten. Lokaler Betrieb schützt Daten und spart laufende Kosten. Wichtig sind gute CORS-Konfiguration, HTTPS, Streaming und durchdachte Session-Verwaltung. Wer diese Bausteine beherrscht, kann einen eigenen, datenschutzkonformen Website-Assistenten betreiben.