Chatbot & KI-Apps 2. Mai 2026 13 min Lesezeit

Chatbot entwickeln mit Claude Code: Von 0 zu Production 2026

Ein Chatbot der wirklich funktioniert braucht mehr als einen API-Call: Kontext-Management, Persönlichkeit, Tool Use, RAG für firmenspezifisches Wissen — und eine UI die Nutzer nicht frustriert. Claude Code baut das alles.

Chatbot-Architektur: Die Entscheidungen die zählen

Kontext-Strategie: Wie viel Chat-History mitschicken? Token-Budget balancieren — zu wenig bedeutet Gedächtnisverlust, zu viel bedeutet hohe Kosten.
Persönlichkeit: System-Prompt definiert Ton, Domäne, Grenzen — Claude Code generiert optimierte System-Prompts aus einer einfachen Beschreibung.
Tool Use: Soll der Chatbot Aktionen ausführen? DB-Abfragen, APIs, Kalender → Function Calling einrichten.
RAG: Firmen-Dokumente, FAQs, Produktinfos → Vektordatenbank + Retrieval für domänenspezifisches Wissen.
UI: Standalone-App, einbettbares Widget, oder Integration in WhatsApp/Telegram über Webhooks.

Multi-Turn Conversation mit Kontext-Management

CoreConversation-Engine mit Window-Management

# Das Herzstück: Kontext intelligent kürzen
class ChatSession {
  constructor(systemPrompt, maxTokens = 4000) {
    this.system = systemPrompt;
    this.messages = [];
    this.maxTokens = maxTokens;
    this.sessionId = crypto.randomUUID();
  }

  async send(userMessage) {
    this.messages.push({ role: 'user', content: userMessage });

    // Token-Schätzung: ~4 chars = 1 token
    while (this.estimateTokens() > this.maxTokens) {
      if (this.messages.length <= 2) break;
      this.messages.splice(0, 2); // Ältestes User+Assistant Pair entfernen
    }

    const response = await claude.messages.create({
      model: 'claude-sonnet-4-6',
      max_tokens: 1024,
      system: this.system,
      messages: this.messages
    });

    const reply = response.content[0].text;
    this.messages.push({ role: 'assistant', content: reply });

    await db.chatMessages.create({
      sessionId: this.sessionId,
      userMessage, reply,
      timestamp: new Date()
    });

    return reply;
  }

  estimateTokens() {
    return this.messages.reduce((sum, m) =>
      sum + Math.ceil(m.content.length / 4), 0);
  }
}

System-Prompt Engineering mit Claude Code

PromptOptimierten System-Prompt generieren

# Prompt an Claude Code:
Erstelle einen System-Prompt für einen Kundenservice-Chatbot:
- Firma: TechShop GmbH (Online-Shop für Elektronik)
- Kann: Bestellstatus abfragen, FAQ beantworten, Rückgaben einleiten
- Kann NICHT: Preise ändern, Rabatte gewähren, Eskalationen über €500
- Tonalität: freundlich, professionell, kurze Antworten
- Bei Unklarheit: eskalieren an human@techshop.de
- Antwortet auf Deutsch, wechselt bei englischen Fragen zu Englisch

# Claude Code generiert:
Du bist Max, der Kundenservice-Assistent von TechShop GmbH.

Deine Aufgaben:
- Bestellstatus abrufen (Tool: check_order_status)
- Häufige Fragen beantworten (Lieferzeit, Rückgaben, Garantie)
- Rückgabeprozesse einleiten (Tool: initiate_return)

Grenzen:
- Preisanpassungen, Rabatte: IMMER ablehnen
- Beträge über 500 Euro oder emotionale Eskalationen: an human@techshop.de

Stil: Kurz und klar. Max 3 Sätze pro Antwort.

System-Prompt Iteration: Erstellt Claude Code einen Prompt, teste ihn mit 5-10 Edge-Cases. Beschreibe was nicht funktioniert — Claude Code iteriert den Prompt bis das Verhalten stimmt.

Tool Use: Chatbot der Aktionen ausführt

Tool UseBestellstatus und Datenbank-Aktionen

# Claude mit Tools verbinden
const tools = [{
  name: 'check_order_status',
  description: 'Bestellstatus für eine Bestellnummer abrufen',
  input_schema: {
    type: 'object',
    properties: {
      order_id: { type: 'string', description: 'Bestellnummer' }
    },
    required: ['order_id']
  }
}];

async function chatWithTools(messages) {
  const response = await claude.messages.create({
    model: 'claude-sonnet-4-6',
    max_tokens: 1024,
    tools,
    messages
  });

  if (response.stop_reason === 'tool_use') {
    const toolCall = response.content.find(b => b.type === 'tool_use');
    const result = await executeToolCall(toolCall.name, toolCall.input);

    return chatWithTools([
      ...messages,
      { role: 'assistant', content: response.content },
      { role: 'user', content: [{
        type: 'tool_result',
        tool_use_id: toolCall.id,
        content: JSON.stringify(result)
      }]}
    ]);
  }

  return response.content[0].text;
}

RAG: Chatbot mit eigenem Unternehmenswissen

RAGFAQ-Datenbank und Dokumente einbinden

# Retrieval Augmented Generation für Unternehmens-FAQs
async function ragChatbot(userQuestion, sessionMessages) {
  // 1. Relevante Dokumente finden via Embedding-Suche
  const embedding = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: userQuestion
  });

  const relevantDocs = await vectorDb.similarity_search(
    embedding.data[0].embedding,
    { limit: 3, threshold: 0.75 }
  );

  // 2. Kontext in System-Prompt einfügen
  const contextBlock = relevantDocs.length > 0
    ? `\n\nRelevante Informationen:\n${relevantDocs.map(d => d.content).join('\n\n')}`
    : '';

  return claude.messages.create({
    model: 'claude-sonnet-4-6',
    max_tokens: 1024,
    system: BASE_SYSTEM_PROMPT + contextBlock,
    messages: [...sessionMessages, { role: 'user', content: userQuestion }]
  });
}

# Dokumente indexieren (einmalig beim Setup):
async function indexDocument(text, metadata) {
  const chunks = chunkText(text, 500); // 500-Token-Chunks
  for (const chunk of chunks) {
    const embedding = await getEmbedding(chunk);
    await vectorDb.insert({ content: chunk, embedding, metadata });
  }
}

Einbettbares Chat-Widget

WidgetEin-Zeilen-Integration für jede Website

<!-- Einbinden mit einer Zeile: -->
<script src="https://your-app.com/widget.js"
        data-chatbot-id="YOUR_ID"></script>

// widget.js — Shadow DOM für Style-Isolation
class ChatWidget extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'closed' });
    shadow.innerHTML = `
      <style>
        .chat-btn { position:fixed; bottom:24px; right:24px;
          width:56px; height:56px; border-radius:50%;
          background:#6366f1; cursor:pointer; border:none;
          font-size:24px; color:white; }
        .chat-win { position:fixed; bottom:90px; right:24px;
          width:360px; height:500px; background:white;
          border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.15);
          display:none; flex-direction:column; overflow:hidden; }
        .chat-win.open { display:flex; }
      </style>
      <button class="chat-btn" id="toggle">💬</button>
      <div class="chat-win" id="window">
        <div id="messages" style="flex:1;overflow-y:auto;padding:16px"></div>
        <input id="input" placeholder="Nachricht..." style="border-top:1px solid #e2e8f0;padding:12px">
      </div>
    `;
    shadow.getElementById('toggle')
      .addEventListener('click', () =>
        shadow.getElementById('window').classList.toggle('open'));
  }
}
customElements.define('chat-widget', ChatWidget);
document.body.appendChild(document.createElement('chat-widget'));

Produktions-Checklist: Rate-Limiting pro User/IP, Session-Timeout (30 min inaktiv), Content-Moderation (kein Prompt-Injection), Kosten-Cap pro Session, DSGVO-konforme Speicherung (Consent, Lösch-API).

Chatbot-Modul im Kurs

Im Claude Code Mastery Kurs: vollständiger Chatbot-Stack mit Kontext-Management, RAG-Integration, Tool Use und einbettbarem Widget — direkt produktionsreif. Mit Schritt-für-Schritt-Aufbau vom ersten API-Call zur fertigen Kundenservice-Lösung.

14 Tage kostenlos testen →