Die Anthropic Claude API ist 2026 zur ersten Wahl für Entwickler geworden, die zuverlässige, sichere und leistungsstarke KI-Anwendungen bauen. Mit Claude Code lässt sich die API nahtlos in TypeScript-Projekte integrieren — von einfachen Chatbots über mehrstufige Agenten bis zu multimodalen Dokumenten-Workflows. Dieser Guide zeigt dir alle wesentlichen API-Features mit konkreten Code-Beispielen.

Was du in diesem Guide lernst

API Setup Streaming Tool Use Vision Caching

Vollständige TypeScript-Beispiele für Messages API, Streaming-Responses, Function Calling, multimodale Eingaben und Prompt-Caching — produktionsreif und 2026 aktuell.

1. Claude API Setup: @anthropic-ai/sdk und Modell-Übersicht

Der Einstieg in die Anthropic Claude API beginnt mit der Installation des offiziellen TypeScript-SDK. Das Paket @anthropic-ai/sdk bietet vollständige Typen, Streaming-Support und automatische Retry-Logik.

# Installation
npm install @anthropic-ai/sdk dotenv

# .env
ANTHROPIC_API_KEY=sk-ant-api03-...
// client.ts — API-Client initialisieren
import Anthropic from '@anthropic-ai/sdk';
import 'dotenv/config';

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
  // Optional: eigener Timeout, Max-Retries
  timeout: 30_000,
  maxRetries: 3,
});

export { client };

Anthropic bietet 2026 drei Modell-Familien mit unterschiedlichen Leistungs-/Kosten-Profilen:

ModellStärkenEinsatz
claude-opus-4-6Höchste Intelligenz, komplexes ReasoningAgenten, Research, Strategieaufgaben
claude-sonnet-4-6Ausgewogen — Qualität & GeschwindigkeitProduktions-Apps, Coding, Analyse
claude-haiku-4-5Schnellstes Modell, günstigste KostenKlassifikation, Routing, Real-Time-Chat
 
// Erster API-Call: einfache Anfrage
import { client } from './client';

async function quickTest() {
  const msg = await client.messages.create({
    model: 'claude-sonnet-4-6',
    max_tokens: 256,
    messages: [{ role: 'user', content: 'Hallo Claude!' }],
  });
  console.log(msg.content[0].text);
}

quickTest();

2. Messages API: System Prompts, Parameter und Konversationen

Die Messages API ist das Herzstück der Claude-Integration. Sie unterstützt System-Prompts für persistentes Verhalten, mehrstufige Konversationen und feine Steuerung über Parameter wie temperature und stop_sequences.

// messages-api.ts — vollständige Konfiguration
import { client } from './client';

interface ChatMessage {
  role: 'user' | 'assistant';
  content: string;
}

async function chat(
  history: ChatMessage[],
  userInput: string
): Promise<string> {
  const response = await client.messages.create({
    model: 'claude-sonnet-4-6',
    max_tokens: 1024,
    temperature: 0.7,          // Kreativität: 0.0–1.0
    stop_sequences: ['---END---'],  // Optional: frühes Stoppen
    system: `Du bist ein hilfreicher KI-Assistent für deutsche Entwickler.
Antworte präzise und gib Code-Beispiele wenn sinnvoll.
Verwende immer Markdown für Code-Blöcke.`,
    messages: [
      ...history,
      { role: 'user', content: userInput },
    ],
  });

  const text =
    response.content[0].type === 'text'
      ? response.content[0].text
      : '';

  console.log(`Tokens: input=${response.usage.input_tokens}, output=${response.usage.output_tokens}`);
  return text;
}

// Multi-Turn Konversation aufbauen
const history: ChatMessage[] = [];

async function conversation() {
  const reply1 = await chat(history, 'Was ist TypeScript?');
  history.push({ role: 'user', content: 'Was ist TypeScript?' });
  history.push({ role: 'assistant', content: reply1 });

  const reply2 = await chat(history, 'Zeig ein Beispiel mit Interfaces.');
  console.log(reply2);
}

Die wichtigsten Parameter im Überblick:

3. Streaming: Echtzeit-Antworten mit messages.stream()

Streaming Streaming ist entscheidend für gute UX in Chat-Anwendungen. Claude sendet Tokens sofort, sobald sie generiert werden — der Nutzer sieht Antworten in Echtzeit statt auf die komplette Response zu warten.

// streaming.ts — Server-side Streaming
import { client } from './client';

async function streamResponse(prompt: string) {
  const stream = await client.messages.stream({
    model: 'claude-sonnet-4-6',
    max_tokens: 2048,
    messages: [{ role: 'user', content: prompt }],
  });

  // Tokens einzeln ausgeben
  for await (const event of stream) {
    if (
      event.type === 'content_block_delta' &&
      event.delta.type === 'text_delta'
    ) {
      process.stdout.write(event.delta.text);
    }
  }

  // Finale Message + Usage nach Abschluss
  const finalMsg = await stream.finalMessage();
  console.log('\n--- Done ---');
  console.log(`Total tokens: ${finalMsg.usage.input_tokens + finalMsg.usage.output_tokens}`);
}

streamResponse('Erkläre Async/Await in TypeScript ausführlich.');
// Next.js Route Handler mit StreamingTextResponse
import { client } from './client';
import { NextRequest } from 'next/server';

export async function POST(req: NextRequest) {
  const { prompt } = await req.json();

  const stream = await client.messages.stream({
    model: 'claude-haiku-4-5',
    max_tokens: 1024,
    messages: [{ role: 'user', content: prompt }],
  });

  // ReadableStream für Frontend-EventSource
  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(new TextEncoder().encode(event.delta.text));
        }
      }
      controller.close();
    },
  });

  return new Response(readable, {
    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
  });
}
// Frontend: EventSource-Alternative mit fetch + ReadableStream
async function streamToUI(prompt: string, outputEl: HTMLElement) {
  const response = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt }),
  });

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

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

4. Tool Use (Function Calling): Agenten und externe APIs

Tool Use Mit Tool Use kann Claude externe Funktionen aufrufen — Datenbankabfragen, API-Calls, Berechnungen. Claude entscheidet selbst, wann ein Tool benötigt wird, und du führst es aus.

// tool-use.ts — Tools definieren und ausführen
import { client } from './client';
import Anthropic from '@anthropic-ai/sdk';

// Tool-Definitionen (JSON Schema)
const tools: Anthropic.Tool[] = [
  {
    name: 'get_weather',
    description: 'Gibt das aktuelle Wetter für eine Stadt zurück.',
    input_schema: {
      type: 'object',
      properties: {
        city: { type: 'string', description: 'Stadtname' },
        unit: { type: 'string', enum: ['celsius', 'fahrenheit'] },
      },
      required: ['city'],
    },
  },
  {
    name: 'search_database',
    description: 'Durchsucht die Produktdatenbank nach einem Begriff.',
    input_schema: {
      type: 'object',
      properties: {
        query: { type: 'string' },
        limit: { type: 'number', description: 'Max. Ergebnisse' },
      },
      required: ['query'],
    },
  },
];

// Echte Tool-Implementierungen
async function executeTool(name: string, input: Record<string, unknown>) {
  switch (name) {
    case 'get_weather':
      return { temp: 22, condition: 'Sonnig', city: input.city };
    case 'search_database':
      return { results: ['Produkt A', 'Produkt B'], total: 2 };
    default:
      throw new Error(`Unknown tool: ${name}`);
  }
}

// Agenten-Loop: Multi-Turn mit Tool Use
async function agentLoop(userMessage: string) {
  const messages: Anthropic.MessageParam[] = [
    { role: 'user', content: userMessage },
  ];

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

    // Keine Tools mehr → fertig
    if (response.stop_reason === 'end_turn') {
      const text = response.content.find(b => b.type === 'text');
      return text?.text ?? '';
    }

    // Tool-Calls sammeln und ausführen
    if (response.stop_reason === 'tool_use') {
      messages.push({ role: 'assistant', content: response.content });

      const toolResults: Anthropic.ToolResultBlockParam[] = [];

      for (const block of response.content) {
        if (block.type !== 'tool_use') continue;
        const result = await executeTool(block.name, block.input as Record<string, unknown>);
        toolResults.push({
          type: 'tool_result',
          tool_use_id: block.id,
          content: JSON.stringify(result),
        });
      }

      messages.push({ role: 'user', content: toolResults });
    }
  }
}

agentLoop('Wie ist das Wetter in Berlin? Suche dann nach Regenjacken.')
  .then(console.log);

5. Vision und Multimodal: Bilder, PDFs und Dokument-Analyse

Claude unterstützt neben Text auch Bilder, Screenshots und PDFs als Eingabe. Das ermöglicht OCR-Workflows, Diagramm-Analyse, Screenshot-Testing und automatisierte Dokumenten-Verarbeitung.

// vision.ts — Bild per URL analysieren
import { client } from './client';

async function analyzeImageUrl(imageUrl: string, question: string) {
  const response = await client.messages.create({
    model: 'claude-sonnet-4-6',
    max_tokens: 1024,
    messages: [
      {
        role: 'user',
        content: [
          {
            type: 'image',
            source: {
              type: 'url',
              url: imageUrl,
            },
          },
          { type: 'text', text: question },
        ],
      },
    ],
  });

  return response.content[0].text;
}

// Base64-Bild (z.B. Screenshot aus Playwright)
import * as fs from 'fs';

async function analyzeBase64Image(imagePath: string) {
  const data = fs.readFileSync(imagePath).toString('base64');
  const response = await client.messages.create({
    model: 'claude-sonnet-4-6',
    max_tokens: 1024,
    messages: [
      {
        role: 'user',
        content: [
          {
            type: 'image',
            source: {
              type: 'base64',
              media_type: 'image/png',
              data,
            },
          },
          { type: 'text', text: 'Beschreibe diesen Screenshot detailliert.' },
        ],
      },
    ],
  });
  return response.content[0].text;
}
// PDF-Analyse mit Document Block
async function analyzePdf(pdfPath: string) {
  const pdfData = fs.readFileSync(pdfPath).toString('base64');
  const response = await client.messages.create({
    model: 'claude-sonnet-4-6',
    max_tokens: 2048,
    messages: [
      {
        role: 'user',
        content: [
          {
            type: 'document',
            source: {
              type: 'base64',
              media_type: 'application/pdf',
              data: pdfData,
            },
          },
          {
            type: 'text',
            text: 'Extrahiere alle wichtigen Informationen aus diesem Dokument und erstelle eine strukturierte Zusammenfassung.',
          },
        ],
      },
    ],
  });

  return response.content[0].text;
}

// Vision-Prompting Best Practices:
// 1. Spezifische Fragen stellen ("Was steht in Tabelle 2?", nicht "Erkläre alles")
// 2. Für OCR: "Transkribiere den Text exakt wie im Bild"
// 3. Für Charts: "Welche Werte hat die blaue Linie im März?"
// 4. Mehrere Bilder vergleichen: Content-Array mit mehreren image-Blöcken

6. Prompt-Caching: Kosten senken mit cache_control

Prompt-Caching Prompt-Caching ist eines der mächtigsten Features der Claude API für Produktions-Anwendungen. Oft wiederholte Inhalte — System-Prompts, Tool-Definitionen, lange Dokumente — werden gecacht und bei folgenden Requests nicht erneut berechnet. Das senkt Kosten um bis zu 90% für Cache-Hits.

// caching.ts — cache_control: ephemeral setzen
import { client } from './client';

const LARGE_SYSTEM_PROMPT = `Du bist ein spezialisierter KI-Assistent für TypeScript-Entwicklung.
[... 10.000 Zeichen Kontext, Richtlinien, Beispiele, Firmenwissen ...]
Diese umfangreiche Wissensbasis wird bei jedem Request gecacht.`;

async function cachedChat(userMessage: string) {
  const response = await client.messages.create({
    model: 'claude-sonnet-4-6',
    max_tokens: 1024,
    system: [
      {
        type: 'text',
        text: LARGE_SYSTEM_PROMPT,
        cache_control: { type: 'ephemeral' }, // ← Cache-Marker
      },
    ],
    messages: [{ role: 'user', content: userMessage }],
  });

  // Cache-Stats auswerten
  const usage = response.usage as typeof response.usage & {
    cache_creation_input_tokens?: number;
    cache_read_input_tokens?: number;
  };

  if (usage.cache_read_input_tokens) {
    console.log(`✅ Cache-Hit: ${usage.cache_read_input_tokens} Tokens aus Cache gelesen`);
  } else if (usage.cache_creation_input_tokens) {
    console.log(`📦 Cache erstellt: ${usage.cache_creation_input_tokens} Tokens gecacht`);
  }

  return response.content[0].text;
}
// Cache-Strategie für komplexe Agenten
async function agentWithCaching(
  conversationHistory: Anthropic.MessageParam[],
  newMessage: string
) {
  // 1. System Prompt gecacht (ändert sich nie)
  // 2. Tools gecacht (stabile Definitionen)
  // 3. Lange Konversations-History gecacht
  // 4. Nur neues user-Message ist nicht gecacht

  const cachedTools: Anthropic.Tool[] = [
    {
      name: 'search',
      description: 'Suche in der Wissensdatenbank',
      input_schema: { type: 'object', properties: { q: { type: 'string' } }, required: ['q'] },
      // cache_control auf letztem Tool setzen
    },
    {
      name: 'calculate',
      description: 'Führt Berechnungen durch',
      input_schema: { type: 'object', properties: { expr: { type: 'string' } }, required: ['expr'] },
      cache_control: { type: 'ephemeral' }, // ← Alle Tools bis hier gecacht
    },
  ];

  // History mit Cache-Breakpoint am Ende
  const messages = [
    ...conversationHistory.slice(0, -1).map(m => m),
    // Letzter History-Eintrag: gecacht
    ...(conversationHistory.length > 0 ? [{
      ...conversationHistory[conversationHistory.length - 1],
      // cache_control am letzten Block des letzten History-Turns setzen
    }] : []),
    { role: 'user' as const, content: newMessage },
  ];

  return client.messages.create({
    model: 'claude-sonnet-4-6',
    max_tokens: 1024,
    system: [{
      type: 'text',
      text: LARGE_SYSTEM_PROMPT,
      cache_control: { type: 'ephemeral' },
    }],
    tools: cachedTools,
    messages,
  });
}

Cache-Strategie Checkliste

Cache-Tip

Setze cache_control: ephemeral immer auf den letzten Block eines gecachten Abschnitts. Alles davor im selben Array wird mitgecacht. Optimale Cache-Punkte: (1) Ende des System-Prompts, (2) letztes Tool in der Tool-Liste, (3) vorletzter Konversations-Turn. Cache-TTL: ca. 5 Minuten (Standard) bis 1 Stunde (Extended bei großem Volumen).

Nächste Schritte mit der Claude API

Du hast jetzt alle wesentlichen Features der Anthropic Claude API kennengelernt. Der nächste Schritt ist die Integration in deine Produktions-Architektur:

Die Kombination aus Messages API, Streaming, Tool Use, Vision und Prompt-Caching macht die Claude API zur komplettest ausgestatteten LLM-Plattform für 2026 — bereit für einfache Chatbots bis zu komplexen autonomen Agenten.