Einen Chatbot mit Claude Code entwickeln

Chatbot-Entwicklung mit Claude Code

Die Entwicklung eines KI-Chatbots umfasst viele Elemente: UI-Implementierung, API-Integration, Konversationsverwaltung, Streaming-Verarbeitung und mehr. Mit Claude Code können Sie einen Chatbot, der all diese Elemente integriert, in kurzer Zeit erstellen.

Grundlegende Chat-UI-Implementierung

> Erstelle eine Chatbot-Komponente in React.
> Mit Streaming-Antworten, Konversationsverlauf und Eingabeformular.

import { useState, useRef, useEffect } from "react";

interface Message {
  id: string;
  role: "user" | "assistant";
  content: string;
}

export function ChatBot() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  const sendMessage = async () => {
    if (!input.trim() || isLoading) return;

    const userMessage: Message = {
      id: crypto.randomUUID(),
      role: "user",
      content: input,
    };

    setMessages((prev) => [...prev, userMessage]);
    setInput("");
    setIsLoading(true);

    const assistantId = crypto.randomUUID();
    setMessages((prev) => [
      ...prev,
      { id: assistantId, role: "assistant", content: "" },
    ]);

    try {
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          messages: [...messages, userMessage].map(({ role, content }) => ({
            role,
            content,
          })),
        }),
      });

      const reader = response.body!.getReader();
      const decoder = new TextDecoder();

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value);
        setMessages((prev) =>
          prev.map((m) =>
            m.id === assistantId
              ? { ...m, content: m.content + chunk }
              : m
          )
        );
      }
    } catch (error) {
      setMessages((prev) =>
        prev.map((m) =>
          m.id === assistantId
            ? { ...m, content: "Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut." }
            : m
        )
      );
    }

    setIsLoading(false);
  };

  return (
    <div className="flex flex-col h-[600px] border rounded-lg">
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((msg) => (
          <div
            key={msg.id}
            className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
          >
            <div
              className={`max-w-[70%] p-3 rounded-lg ${
                msg.role === "user"
                  ? "bg-blue-600 text-white"
                  : "bg-gray-100 text-gray-900"
              }`}
            >
              {msg.content}
            </div>
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

      <div className="border-t p-4 flex gap-2">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && sendMessage()}
          placeholder="Nachricht eingeben..."
          className="flex-1 p-2 border rounded-lg"
          disabled={isLoading}
        />
        <button
          onClick={sendMessage}
          disabled={isLoading}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50"
        >
          Senden
        </button>
      </div>
    </div>
  );
}

Streaming-fähige API-Route

Eine API-Route, die die Anthropic-API im Backend aufruft und per Streaming zurückgibt.

import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic();

export async function POST(request: Request) {
  const { messages } = await request.json();

  const stream = await client.messages.stream({
    model: "claude-sonnet-4-20250514",
    max_tokens: 1024,
    system: "Sie sind ein freundlicher und höflicher Assistent. Bitte antworten Sie auf Deutsch.",
    messages,
  });

  const encoder = new TextEncoder();

  const readable = new ReadableStream({
    async start(controller) {
      for await (const event of stream) {
        if (
          event.type === "content_block_delta" &&
          event.delta.type === "text_delta"
        ) {
          controller.enqueue(encoder.encode(event.delta.text));
        }
      }
      controller.close();
    },
  });

  return new Response(readable, {
    headers: { "Content-Type": "text/plain; charset=utf-8" },
  });
}

Persistierung des Konversationsverlaufs

Konversationen in der Datenbank speichern, um sie später fortsetzen zu können.

import { db } from "@/lib/database";

export async function saveConversation(
  userId: string,
  messages: Message[]
) {
  return db.conversation.upsert({
    where: { id: `${userId}-current` },
    update: {
      messages: JSON.stringify(messages),
      updatedAt: new Date(),
    },
    create: {
      id: `${userId}-current`,
      userId,
      messages: JSON.stringify(messages),
    },
  });
}

export async function loadConversation(userId: string): Promise<Message[]> {
  const conv = await db.conversation.findUnique({
    where: { id: `${userId}-current` },
  });
  return conv ? JSON.parse(conv.messages as string) : [];
}

RAG (Retrieval-Augmented Generation) einbinden

Für einen Chatbot, der auf Basis interner Dokumente antwortet, ist eine RAG-Architektur effektiv.

import { searchDocuments } from "@/lib/vector-search";

async function generateRAGResponse(query: string, conversationHistory: Message[]) {
  // Relevante Dokumente suchen
  const relevantDocs = await searchDocuments(query, { limit: 5 });
  const context = relevantDocs
    .map((doc) => `---\n${doc.title}\n${doc.content}\n---`)
    .join("\n");

  const systemPrompt = `Beantworten Sie die Frage anhand der folgenden Dokumente.
Wenn die Informationen nicht in den Dokumenten enthalten sind, antworten Sie mit „Diese Information konnte nicht gefunden werden".

${context}`;

  return client.messages.stream({
    model: "claude-sonnet-4-20250514",
    max_tokens: 1024,
    system: systemPrompt,
    messages: conversationHistory,
  });
}

Zur Erweiterung durch MCP-Server-Integration siehe den MCP-Server-Leitfaden, für effektives Prompt-Design die 5 Tipps zur Verbesserung von Prompts.

Zusammenfassung

Mit Claude Code können Sie effizient einen Chatbot entwickeln, der Chat-UI, Streaming-API, Konversationsverwaltung und RAG-Architektur umfasst. Ein schrittweiser Ansatz zum Hinzufügen von Funktionen ist dabei besonders effektiv.

Weitere Details finden Sie in der offiziellen Claude Code-Dokumentation und der Anthropic API-Referenz.

Produktions-Upgrade 2026

Ein Chatbot ist eine Anwendung, die eine Nachricht entgegennimmt, den nötigen Kontext behält und eine passende Antwort in Dialogform liefert. Praktisch betrachtet ist er ein Eingang für Support, Vertrieb, Suche oder interne Abläufe. Die eigentliche Herausforderung ist nicht das Chatfenster, sondern die Grenze: Was darf der Bot beantworten, wann muss er Unsicherheit zeigen, und wann übergibt er an einen Menschen?

Mit Claude Code lohnt sich ein enger Start. Ein Bot für die zehn häufigsten Supportfragen ist leichter zu testen als ein allgemeiner Assistent. Ein klares Ziel reduziert Kosten, schützt vertrauliche Daten und macht sichtbar, ob der Bot tatsächlich Umsatz, Entlastung oder bessere Nutzerbindung erzeugt.

Architektur-Tabelle

Schicht	Aufgabe	Produktionshinweis
React UI	Eingabe, Verlauf, Ladezustand und Retry anzeigen	Der Einstieg steht in der React useState Dokumentation
API-Route	API-Schlüssel schützen und Anfragen normalisieren	Größenlimits, Authentifizierung und Timeout einbauen
Streaming	Teilantworten sofort an die Oberfläche senden	Grundlagen finden Sie bei MDN Streams API
Verlaufsspeicher	Wiederaufnahme, Audit und Verbesserung ermöglichen	Nur nötige Daten speichern und Löschung planen
RAG	Produktdokumente oder interne Richtlinien durchsuchen	Ohne starke Quelle darf der Bot nicht raten
Webhooks	Ereignisse an CRM, Tickets oder Slack senden	Siehe Claude Code Webhook Implementation
Analytics	Erfolg, Eskalation und CTA-Klicks messen	Vertiefung: Claude Code Analytics Implementation

Für den API-Vertrag ist Claude Code API Development der passende nächste Schritt: Rollen, Inhalte, Systemanweisung und Stream bleiben sauber getrennt. Diese Struktur macht spätere Kanäle oder ein anderes Frontend einfacher.

Ausführbare Streaming-Demo

Speichern Sie die Datei als chatbot-stream-demo.mjs und führen Sie node chatbot-stream-demo.mjs aus. Der Code nutzt keinen externen Dienst. Er zeigt nur, wie Verlauf und Streaming zuverlässig zusammenspielen.

const encoder = new TextEncoder();
const decoder = new TextDecoder();

const faq = new Map([
  ["password", "Open the account page, choose Reset password, and follow the email link."],
  ["pricing", "The pricing page explains plans. For a custom quote, collect team size and required features."],
  ["refund", "Refund requests should be routed to support with the order id and purchase email."],
]);

const history = [];

function chooseAnswer(question) {
  const normalized = question.toLowerCase();
  for (const [keyword, answer] of faq) {
    if (normalized.includes(keyword)) return answer;
  }
  return "I could not find a safe answer in the FAQ. I will hand this to a human operator.";
}

async function* streamText(text) {
  for (const token of text.split(/(\s+)/)) {
    await new Promise((resolve) => setTimeout(resolve, 15));
    yield encoder.encode(token);
  }
}

async function ask(question) {
  history.push({ role: "user", content: question });
  const answer = chooseAnswer(question);
  process.stdout.write(`\nUser: ${question}\nAssistant: `);

  let fullAnswer = "";
  for await (const chunk of streamText(answer)) {
    const token = decoder.decode(chunk);
    fullAnswer += token;
    process.stdout.write(token);
  }

  history.push({ role: "assistant", content: fullAnswer });
}

await ask("How do I reset my password?");
await ask("Can I see pricing before talking to sales?");

console.log(`\n\nSaved ${history.length} messages.`);

In der echten Anwendung ersetzen Sie chooseAnswer durch den Claude-Aufruf. Die Reihenfolge bleibt gleich: Nutzerfrage speichern, Antwort streamen, finale Antwort speichern. So vermeiden Sie den failure mode, bei dem die UI Text zeigt, aber die Datenbank eine leere Antwort enthält.

Reale Use Cases

Erster use case: Lead-Qualifizierung für SaaS. Der Bot beantwortet Fragen zu Preis, Sicherheit, Integrationen und Beschaffung. Erst bei hoher Absicht leitet er zu einem Beratungsgespräch weiter. Dadurch wird Vertrieb nicht ersetzt, sondern besser vorbereitet.

Zweiter Fall: interner Helpdesk. Urlaub, Reisekosten, VPN, Gerätewechsel und Onboarding wiederholen sich ständig. Mit RAG kann der Bot die richtige Richtlinie zitieren und per Webhook ein Ticket anlegen, wenn eine Freigabe nötig ist.

Dritter Fall: Lern- oder Content-Seite. Wenn Leser fragen, ob sie API, Webhooks oder Analytics zuerst lernen sollen, empfiehlt der Bot passende Artikel und führt bei Bedarf zu training. Dieser workflow ist natürlicher als ein allgemeines Banner.

Vierter Fall: Incident Intake. Der Bot sammelt Fehlermeldung, Zeitpunkt, Browser, Konto und Reproduktionsschritte. Das Ziel ist nicht sofortige Lösung, sondern ein vollständiger Übergabestand für Support oder Engineering.

Konkrete Fehler und Risiken

Senden Sie keinen unbegrenzten Verlauf an das Modell. Lange Verläufe erhöhen Kosten, machen Antworten langsamer und können alte Anweisungen wieder aktivieren. Fassen Sie ältere Abschnitte zusammen und speichern Sie nur nötige Inhalte.

Lassen Sie RAG nicht raten. Wenn die Suche keine belastbare Quelle findet, muss der Bot Unsicherheit aussprechen und eine menschliche Route anbieten. Für Support und Compliance ist diese Grenze entscheidend.

Streaming ist kein reiner UI-Effekt. Abgebrochene Verbindungen, Doppelklicks, leere Sprechblasen und endlose Ladezustände sind reale Fehler. Deaktivierte Buttons, Abbruchlogik, Timeout und klare Retry-Texte gehören in die erste Version.

Veröffentlichen Sie nicht ohne Messung. Zählen Sie ungelöste Fragen, Eskalationen, CTA-Klicks und Gespräche, die zu Kauf oder Beratung führen. Viele Nachrichten können auch bedeuten, dass der Bot verwirrt.

Monetarisierungs-CTA

Der kommerzielle CTA sollte eine klare nächste Aktion anbieten: Implementierungsreview, Workshop, Vorlage oder Beratung. Für ClaudeCodeLab führt die sinnvolle Route zu training, weil dort aus dem Artikel eine praktische Umsetzung werden kann.

Der Lesepfad ist: hier das Konzept verstehen, mit Claude Code API Development die API bauen, mit webhooks Systeme verbinden und mit analytics die Wirkung messen.