Vertiefung · Chatbot mit eigenem Wissen · Lektion R.7 · 25 Min.

Selbst bauen: ein Kunden-Chatbot mit Claude Code und der Claude-API

Danach hast du mit Claude Code einen kleinen Kunden-Chatbot gebaut, der aus deinem Wissen antwortet, Quellen nennt, als KI gekennzeichnet ist und dessen API-Schlüssel sicher auf dem Server liegt – und du kennst die Kosten.

Stand 23. Oktober 2026 · Wir prüfen die Inhalte regelmäßig gegen die aktuellen Programme. Was ist neu?

Hier baust du deinen Kunden-Chatbot selbst. Voraussetzung ist die Vertiefung „Deine eigene Web-App“: Du kennst Claude Code, den Plan-Modus, GitHub und Netlify. Die gute Nachricht: Für die meisten kleinen Betriebe braucht es keine komplizierte Suchtechnik. Wenn dein Wissen unter etwa 500 Seiten liegt, gibst du es Claude einfach bei jeder Frage komplett mit – Anthropic empfiehlt das selbst. Und mit Prompt Caching kostet das sehr wenig.

Schritt für Schritt

Plane im Plan-Modus.

Sag Claude:Ich will einen kleinen Chatbot für meine Website bauen. Er soll nur aus diesen Wissensdateien antworten: [Liste]. Er läuft auf Netlify, die Claude-API wird über eine Netlify-Funktion aufgerufen, damit der Schlüssel geheim bleibt. Plan mit mir: Aussehen, KI-Hinweis, Regeln aus meinen Projekt-Anweisungen (R.3), Quellenangaben, Schutz gegen Missbrauch. Schreib den Plan in PLAN.md. Bau noch nichts.

Versteh die wichtigste Sicherheitsregel. Der API-Schlüssel für Claude gehört nur auf den Server – bei Netlify in eine Funktion, deren Schlüssel als Umgebungsvariable hinterlegt ist. Er darf nie im Browser-Code stehen, sonst kann ihn jeder kopieren und auf deine Kosten nutzen. Zwei Stolperfallen bei Netlify: Die Umgebungsvariable muss für „Functions“ gelten, und nach einer Änderung braucht es eine neue Veröffentlichung.

Hol einen API-Schlüssel in der Claude Console wie in Lektion A.5, mit eigenem Namen („Website-Chatbot“) und einem Ausgabenlimit. Trag ihn selbst bei Netlify ein, nie im Chat.

Lass bauen – mit Wissen direkt im Auftrag. Bei kleinen Wissenssammlungen gibt die Funktion dein Wissen bei jeder Frage komplett mit. Claude kann mit der Funktion Citations genau die Stellen aus deinen Dokumenten nennen, auf die er sich stützt. Lass beides einbauen, dazu Prompt Caching, damit das immer gleiche Wissen nicht jedes Mal voll bezahlt wird.

Sag Claude:Bau den Chatbot nach PLAN.md. Gib das Wissen als Dokumente mit, nutze Citations für Quellenangaben und Prompt Caching für das Wissen. Nimm Claude Haiku. Begrenze die Antwortlänge, die Fragen pro Besucher und Stunde und die Länge einer Frage. Zeig den KI-Hinweis über dem Eingabefeld.

Rechne die Kosten. Mit Claude Haiku 5.5 kosten eine Million Eingabe-Tokens 0,10 $ und gecachte Eingaben nur 0,01 $ pro Million; Ausgaben 0,50 $ pro Million (bei Aufträgen bis 100.000 Tokens). Beispiel: 20 Seiten Wissen (etwa 10.000 Tokens), 300 Fragen im Monat mit je kurzer Antwort – das liegt im Bereich von wenigen Cent bis unter einem Euro im Monat, je nachdem, wie oft der Cache greift. Netlify ist für kleine Seiten kostenlos (W.7). Das Ausgabenlimit in der Console schützt dich vor Überraschungen.

Teste mit deinem Katalog aus R.4 – erst lokal in der Vorschau, dann online. Dieselbe Messlatte: keine erfundene Antwort, keine verbotene Zusage, Trickversuche abgelehnt. Zusätzlich prüfst du: Steht der KI-Hinweis da? Ist der Schlüssel nirgends im Browser zu finden?

Sag Claude:Prüf, ob der API-Schlüssel irgendwo im Browser-Code, im Sicherungsbuch oder bei GitHub landen kann. Und ob jemand über den Chatbot beliebige Fragen auf meine Kosten stellen könnte, die nichts mit meinem Geschäft zu tun haben.

Bei viel Wissen: Suche statt alles mitgeben. Wird dein Wissen sehr groß (deutlich über 500 Seiten), braucht der Chatbot eine Suche, die vorher die passenden Stellen auswählt (RAG). Supabase bietet dafür eine Vektorsuche in der Datenbank. Anthropic beschreibt ein verbessertes Verfahren („Contextual Retrieval“), das Fehlgriffe der Suche deutlich verringert. Das ist der nächste Schritt für Fortgeschrittene – lass dir den Weg von Claude erklären, wenn du so weit bist.

Hängst du irgendwo fest? Frag deinen Claude – so oft du willst, auch zu jedem einzelnen Schritt.
Sag Claude:Ich mache gerade die Lektion „R.7 Selbst bauen: ein Kunden-Chatbot mit Claude Code und der Claude-API“ im AWA Campus und hänge bei diesem Schritt: … Erklär ihn mir bitte einfacher, Schritt für Schritt. Ich bin Anfänger.
Geschafft, wenn …
  • dein Chatbot online ist, aus deinem Wissen antwortet und Quellen nennt,
  • der KI-Hinweis sichtbar ist und ein Weg zum Menschen genannt wird,
  • der API-Schlüssel nur auf dem Server liegt und ein Ausgabenlimit gesetzt ist,
  • der Testkatalog auch online bestanden ist.
Wörter erklärt
  • API-Schlüssel: das Passwort, mit dem dein Programm die Claude-API nutzt und das auf deine Rechnung läuft.
  • Netlify-Funktion: ein kleines Programm auf dem Server, das geheime Schlüssel nutzen kann, ohne sie dem Browser zu zeigen.
  • Citations: Quellenangaben, die genau zeigen, aus welcher Stelle deiner Dokumente eine Antwort stammt.
  • Prompt Caching: Claude merkt sich wiederkehrende Teile eines Auftrags kurz, sodass sie günstiger werden.
  • Vektorsuche: eine Suche nach Bedeutung statt nach genauen Wörtern, Grundlage vieler RAG-Systeme.