Chatbot-Integration

​

Überblick

• Der API-Key bleibt auf dem Server. Alles, was im Browser liegt, kann ausgelesen werden.
• Der Proxy begrenzt die Anfragen pro Besucher. VARIOS AI sieht nur die Adresse des Webhosts, nicht die der einzelnen Besucher.
• Der Proxy begrenzt die Größe der Anfragen und kann den Gesprächsverlauf kürzen und filtern.

Browser (Chat-Widget)  →  Proxy auf dem Webhost  →  VARIOS AI  /api/v1/chat/completions
                          hält den API-Key                     Assistent, Wissensdatenbank,
                          Rate-Limiting                        Modell, DLP, Kostenlimit
                          Verlauf kürzen

​

Vorbereitung in VARIOS AI

​

Den Assistenten für den Chatbot gestalten

• Beschreiben Sie, wofür der Chatbot zuständig ist, und weisen Sie ihn an, Fragen außerhalb dieses Bereichs freundlich abzulehnen.
• Legen Sie fest, dass Antworten nicht rechtsverbindlich sind und der Chatbot bei Unsicherheit auf Telefon, E-Mail oder Kontaktformular verweist, statt zu raten.
• Weisen Sie den Assistenten an, keine personenbezogenen Daten abzufragen. Besucher sollen keine Namen, Adressen oder Aktenzeichen eingeben müssen.

• Kurz, in einfacher Sprache, in der Sprache der Anfrage.
• Immer die passende Seite der eigenen Webseite als vollständige URL im Antworttext nennen. Über die API werden die Quellen-Fußnoten der Wissensdatenbank entfernt. Nur was der Assistent selbst in den Text schreibt, kommt beim Besucher an.
• Keine Markdown-Tabellen oder komplexe Formatierungen, wenn das Widget sie nicht darstellen kann.

​

Die API ansprechen

​

Antwort in einem Stück

curl -X POST 'https://varios-ai.example.com/api/v1/chat/completions' \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer YOUR_API_KEY' \
  -d '{
    "model": "ASSISTANT_ID",
    "stream": false,
    "messages": [
      { "role": "user", "content": "Wie beantrage ich einen neuen Personalausweis?" },
      { "role": "assistant", "content": "Sie können den Ausweis persönlich im Bürgerbüro beantragen ..." },
      { "role": "user", "content": "Welche Unterlagen brauche ich dafür?" }
    ]
  }'

​

Streaming

const response = await fetch('/chat', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ model: 'ASSISTANT_ID', stream: true, messages }),
});

const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = '';

while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  buffer += decoder.decode(value, { stream: true });

  const lines = buffer.split('\n');
  buffer = lines.pop();
  for (const line of lines) {
    if (!line.startsWith('data: ')) continue;
    const payload = line.slice(6);
    if (payload === '[DONE]') break;
    const chunk = JSON.parse(payload);
    appendToAnswer(chunk.choices[0]?.delta?.content ?? '');
  }
}

​

Fehler

​

Proxy auf dem Webhost

​

Variante A: Nur Webserver-Konfiguration

limit_req_zone $binary_remote_addr zone=chat:10m rate=20r/m;

server {
    # ... bestehende Konfiguration der Webseite ...

    location = /chat {
        limit_req zone=chat burst=5 nodelay;      # 20 Anfragen pro Minute je IP
        limit_req_status 429;
        client_max_body_size 16k;                 # begrenzt Verlauf und Nachrichtenlänge

        if ($request_method != POST) { return 405; }

        proxy_pass https://varios-ai.example.com/api/v1/chat/completions;
        proxy_set_header Authorization "Bearer YOUR_API_KEY";
        proxy_set_header Host varios-ai.example.com;
        proxy_ssl_server_name on;
        proxy_http_version 1.1;
        proxy_buffering off;                      # Streaming durchreichen
        proxy_read_timeout 120s;

        proxy_intercept_errors on;                # Fehler von VARIOS AI abfangen
        error_page 401 402 500 502 503 504 = @chat_fallback;
    }

    location @chat_fallback {
        default_type application/json;
        return 503 '{"error":"Der Assistent ist gerade nicht erreichbar. Bitte nutzen Sie unser Kontaktformular."}';
    }
}

# Benötigte Module: proxy, proxy_http, headers, ssl
SSLProxyEngine on

<Location "/chat">
    Require method POST
    LimitRequestBody 16384
    RequestHeader set Authorization "Bearer YOUR_API_KEY"
    ProxyPass "https://varios-ai.example.com/api/v1/chat/completions" flushpackets=on timeout=120
    ProxyPassReverse "https://varios-ai.example.com/api/v1/chat/completions"
    ProxyErrorOverride On 401 402 500 502 503 504
    ErrorDocument 401 /chat-fallback.json
    ErrorDocument 402 /chat-fallback.json
    ErrorDocument 500 /chat-fallback.json
    ErrorDocument 502 /chat-fallback.json
    ErrorDocument 503 /chat-fallback.json
    ErrorDocument 504 /chat-fallback.json
</Location>

# Statische Ausweichantwort im Webroot ablegen, Inhalt:
# {"error":"Der Assistent ist gerade nicht erreichbar. Bitte nutzen Sie unser Kontaktformular."}
<Files "chat-fallback.json">
    Header set Content-Type "application/json"
</Files>

# Dynamische Konfiguration (File-Provider), Traefik v3
http:
  routers:
    chat:
      rule: "Host(`www.example.org`) && Path(`/chat`) && Method(`POST`)"
      entryPoints: [websecure]
      middlewares: [chat-ratelimit, chat-auth, chat-path]
      service: varios-ai
      tls: {}

  middlewares:
    chat-ratelimit:
      rateLimit:
        average: 20        # Anfragen pro Minute je IP
        period: 1m
        burst: 5
    chat-auth:
      headers:
        customRequestHeaders:
          Authorization: "Bearer YOUR_API_KEY"
    chat-path:
      replacePath:
        path: /api/v1/chat/completions

  services:
    varios-ai:
      loadBalancer:
        passHostHeader: false
        servers:
          - url: "https://varios-ai.example.com"
        responseForwarding:
          flushInterval: 100ms     # Streaming durchreichen

• Den Verlauf kürzen. Die Größenbegrenzung deckelt nur die Gesamtgröße der Anfrage. Das Widget im Browser sollte deshalb selbst nur die letzten Nachrichten mitsenden.
• Systemnachrichten filtern. Eine system-Nachricht aus dem Browser wird von VARIOS AI mit dem Systemprompt des Assistenten zusammengeführt. Der Assistent bleibt wirksam, aber Besucher können ihm zusätzliche Anweisungen mitgeben. Das Widget sollte keine Systemnachrichten senden; verhindern lässt es sich nur mit Variante B.
• Das Kostenlimit von VARIOS AI kommt als 429 beim Browser an, genau wie das eigene Rate-Limit. Das Widget zeigt in beiden Fällen dieselbe Meldung, etwa „Bitte versuchen Sie es später erneut”.

​

Variante B: Kleiner eigener Proxy

import express from 'express';
import rateLimit from 'express-rate-limit';

const VARIOS_URL = process.env.VARIOS_URL;       // https://varios-ai.example.com
const API_KEY = process.env.VARIOS_API_KEY;      // nur auf dem Server
const ASSISTANT_ID = process.env.ASSISTANT_ID;
const MAX_HISTORY = 10;                          // Nachrichten, die mitgesendet werden
const MAX_MESSAGE_LENGTH = 2000;                 // Zeichen pro Nutzernachricht

const app = express();
app.set('trust proxy', 1);                       // hinter einem Reverse Proxy oder CDN
app.use(express.json({ limit: '64kb' }));

// Deckel pro Besucher: 20 Anfragen pro Minute je IP
const perMinute = rateLimit({
  windowMs: 60 * 1000,
  limit: 20,
  standardHeaders: 'draft-7',
  message: { error: 'Zu viele Anfragen. Bitte warten Sie einen Moment.' },
});

// Deckel pro Tag je IP, gegen dauerhafte Skripte
const perDay = rateLimit({
  windowMs: 24 * 60 * 60 * 1000,
  limit: 300,
  standardHeaders: 'draft-7',
  message: { error: 'Das Tageslimit ist erreicht. Bitte nutzen Sie unser Kontaktformular.' },
});

app.post('/chat', perMinute, perDay, async (req, res) => {
  const incoming = Array.isArray(req.body.messages) ? req.body.messages : [];

  // Nur Nutzer- und Assistentennachrichten durchlassen, Verlauf kürzen
  const messages = incoming
    .filter((m) => m && (m.role === 'user' || m.role === 'assistant') && typeof m.content === 'string')
    .map((m) => ({ role: m.role, content: m.content.slice(0, MAX_MESSAGE_LENGTH) }))
    .slice(-MAX_HISTORY);

  if (messages.length === 0 || messages.at(-1).role !== 'user') {
    return res.status(400).json({ error: 'Es fehlt eine Nutzernachricht.' });
  }

  const upstream = await fetch(`${VARIOS_URL}/api/v1/chat/completions`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${API_KEY}`,
    },
    body: JSON.stringify({ model: ASSISTANT_ID, stream: true, messages }),
    signal: AbortSignal.timeout(120_000),
  });

  if (!upstream.ok) {
    // Kostenlimit, ungültiger Key oder Störung: feste Ausweichantwort statt Fehlertext
    return res.status(503).json({
      error: 'Der Assistent ist gerade nicht erreichbar. Bitte nutzen Sie unser Kontaktformular.',
    });
  }

  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  req.on('close', () => upstream.body?.cancel().catch(() => {}));

  for await (const chunk of upstream.body) {
    res.write(chunk);
  }
  res.end();
});

app.listen(3000);

• Der Verlauf wird auf die letzten zehn Nachrichten gekürzt und jede Nachricht auf 2.000 Zeichen begrenzt. Das hält Kosten und Antwortzeit stabil und verhindert, dass ein Skript beliebig große Anfragen absetzt.
• Systemnachrichten aus dem Browser werden verworfen. Der Systemprompt kommt ausschließlich aus dem Assistenten.
• Fehler von VARIOS AI werden nicht an den Browser durchgereicht, sondern durch eine feste Ausweichantwort ersetzt. Besucher sehen keine internen Fehlermeldungen.
• Beim Abbruch durch den Besucher wird auch die Verbindung zu VARIOS AI beendet, damit dort kein Prozess weiterläuft.

​

Für beide Varianten empfohlen

• Bot-Schutz vor der ersten Nachricht, etwa ein unsichtbares Captcha, wenn der Chatbot öffentlich und ohne Anmeldung erreichbar ist.
• Herkunft prüfen: Der Pfad nimmt nur Anfragen von der eigenen Webseite an, etwa über den Origin-Header oder ein Sitzungs-Cookie.
• Protokollierung ohne Inhalte: Anzahl der Anfragen, Antwortzeiten und Fehler protokollieren, aber nicht die Nachrichten der Besucher.
• Liegt die Webseite hinter einem CDN mit eigenen Regeln für Rate-Limiting, kann der Deckel pro Besucher auch dort gesetzt werden.

​

Das Chat-Widget

• KI-Kennzeichnung: Der Chatbot weist sich vor der ersten Nachricht als automatisches System aus. Ein Hinweis, dass Antworten nicht rechtsverbindlich sind und keine personenbezogenen Daten eingegeben werden sollen, gehört an dieselbe Stelle.
• Verlauf nur im Browser: Der Gesprächsverlauf liegt im sessionStorage des Besuchers und wird bei jeder Anfrage mitgesendet. Der Proxy speichert nichts.
• Barrierefreiheit: Tastaturbedienung, beschriftete Schaltflächen, eine Statusmeldung, wenn die Antwort vollständig ist, und ausreichende Kontraste. Viele fertige Widgets erfüllen das nicht vollständig; prüfen Sie es vor dem Einsatz mit einem Screenreader.
• Übergabe an Menschen: Eine dauerhaft sichtbare Schaltfläche für Telefon, E-Mail oder Kontaktformular, unabhängig davon, ob der Assistent sie im Text nennt.
• Startvorschläge: Drei bis fünf Beispielfragen zu den häufigsten Anliegen senken die Hürde für die erste Nachricht.