Anthropic Claude API mit TypeScript: KI-Anwendungen entwickeln 2026
6. Mai 202611 min LesezeitVon Agentic Movers Team
Die Anthropic Claude API ist 2026 die leistungsstärkste Plattform für den Aufbau produktionsreifer KI-Anwendungen.
In diesem Guide lernst du alles — vom SDK-Setup über Tool Use, Vision und Streaming bis hin zu Prompt Caching
und der Batch API — mit vollständigen TypeScript-Beispielen, die du sofort verwenden kannst.
1. Anthropic SDK Setup & Messages API
SDK
Der einfachste Einstieg in die Claude API beginnt mit dem offiziellen Anthropic TypeScript SDK.
Es abstrahiert HTTP-Details, übernimmt Retry-Logik und bietet vollständige TypeScript-Typen für alle API-Objekte.
Claude Code — das offizielle Anthropic-CLI — setzt selbst auf dieses SDK, weshalb du mit exakt denselben
Patterns arbeitest wie Anthropics eigene Tooling-Teams.
Installation
# NPM
npm install @anthropic-ai/sdk
# oder Yarn
yarn add @anthropic-ai/sdk
# TypeScript-Typen sind im Paket enthalten — kein @types nötig
Das SDK unterstützt Node.js ab Version 18 sowie moderne Deno- und Bun-Runtimes.
Stelle sicher, dass du tsconfig.json mit "moduleResolution": "bundler"
oder "node16" konfigurierst, damit die ESM-Exports korrekt aufgelöst werden.
API Key konfigurieren
// .env (niemals in Git committen!)
ANTHROPIC_API_KEY=sk-ant-api03-...
Sicherheit: Nutze dotenv in der Entwicklung und Umgebungsvariablen
im Deployment (Railway, Fly.io, Vercel). Der API Key darf niemals im Frontend-Code landen —
alle Claude-API-Calls gehören auf den Server.
Erste Nachricht: Messages API
Die Messages API ist das Herzstück von Claude. Sie nimmt eine Liste von
Nachrichten entgegen und gibt eine strukturierte Antwort zurück — inklusive Nutzungsstatistiken,
Stopground und dem gewählten Modell.
import Anthropic from'@anthropic-ai/sdk';
const client = newAnthropic();
async functionbasicMessage() {
const message = await client.messages.create({
model: 'claude-opus-4-5', // Aktuell stärkstes Modell
max_tokens: 1024,
messages: [
{
role: 'user',
content: 'Erkläre den Unterschied zwischen Promises und async/await in TypeScript.',
},
],
});
// content ist immer ein Array — je nach stop_reason können mehrere Blöcke enthalten seinconst textBlock = message.content.find(b => b.type === 'text');
console.log(textBlock?.text);
// Nutzungsstatistiken für Kostenkontrolle
console.log(`Tokens: ${message.usage.input_tokens} in / ${message.usage.output_tokens} out`);
}
basicMessage();
Modellauswahl 2026
Modell
Stärke
Ideal für
Kosten (Input/1M)
claude-opus-4-5
Höchste Intelligenz
Komplexe Reasoning-Tasks
$15
claude-sonnet-4-5
Ausgewogen
Produktions-Apps, Chatbots
$3
claude-haiku-3-5
Schnell & günstig
Klassifizierung, Extraktion
$0.25
System-Prompt & Multi-Turn
const conversation = await client.messages.create({
model: 'claude-sonnet-4-5',
max_tokens: 2048,
system: 'Du bist ein erfahrener TypeScript-Entwickler. Antworte präzise und mit Codebeispielen.',
messages: [
{ role: 'user', content: 'Was ist ein Generic in TypeScript?' },
{ role: 'assistant', content: 'Generics ermöglichen typsichere, wiederverwendbare Komponenten...' },
{ role: 'user', content: 'Zeig mir ein praktisches Beispiel mit einer Repository-Klasse.' },
],
});
Multi-Turn-Konversationen werden durch einfaches Anhängen von Nachrichten an das Array realisiert.
Du kannst den gesamten Konversationsverlauf auf dem Client halten und bei jedem API-Call mitschicken —
Claude selbst ist zustandslos.
2. Tool Use / Function Calling
Tool Use
Tool Use (auch bekannt als Function Calling) ist das mächtigste Feature der Claude API.
Damit kann Claude strukturierte Aufrufe an externe Funktionen, APIs oder Datenbanken machen —
und du weißt immer genau, welche Parameter es übergeben will. Das Ergebnis liefert du zurück,
Claude integriert es in seine Antwort. So entstehen echte Agenten-Pipelines.
async functionrunToolUse() {
const response = await client.messages.create({
model: 'claude-sonnet-4-5',
max_tokens: 1024,
tools,
messages: [
{ role: 'user', content: 'Wie ist das Wetter gerade in München?' },
],
});
// stop_reason === 'tool_use' wenn Claude ein Tool aufrufen möchteif (response.stop_reason === 'tool_use') {
const toolUseBlock = response.content.find(b => b.type === 'tool_use');
if (toolUseBlock && toolUseBlock.type === 'tool_use') {
console.log(`Claude ruft Tool auf: ${toolUseBlock.name}`);
console.log('Parameter:', toolUseBlock.input);
// Tool ausführen (hier: simuliert)const weatherResult = awaitfetchWeather(
(toolUseBlock.input as { location: string }).location
);
// Ergebnis zurück an Claude schickenconst finalResponse = await client.messages.create({
model: 'claude-sonnet-4-5',
max_tokens: 1024,
tools,
messages: [
{ role: 'user', content: 'Wie ist das Wetter gerade in München?' },
{ role: 'assistant', content: response.content },
{
role: 'user',
content: [
{
type: 'tool_result',
tool_use_id: toolUseBlock.id,
content: JSON.stringify(weatherResult),
},
],
},
],
});
const finalText = finalResponse.content.find(b => b.type === 'text');
console.log('Antwort:', finalText?.text);
}
}
}
// Simulierte Wetter-APIasync functionfetchWeather(location: string) {
// In der Produktion: echte API hier einfügenreturn { temperature: 18, unit: 'celsius', condition: 'Bewölkt', location };
}
Multi-Step Tool Calling (Agentic Loop)
Für komplexe Aufgaben ruft Claude mehrere Tools hintereinander auf. Der klassische Agentic Loop
wiederholt die Tool-Ausführung, bis stop_reason === 'end_turn' erscheint:
Tool Choice steuern: Mit tool_choice: { type: "auto" } entscheidet Claude selbst.
{ type: "any" } erzwingt einen Tool-Call. { type: "tool", name: "get_weather" }
erzwingt ein bestimmtes Tool. Für End-Turn ohne Tools: { type: "none" }.
3. Vision & Multimodal
Vision
Claude versteht Bilder nativ. Du kannst Screenshots, Diagramme, Dokumente, Fotos und UI-Mockups
direkt an die API schicken — entweder als URL oder als Base64-kodierte Daten. Die Vision-Funktion
lässt sich nahtlos mit Tool Use kombinieren, sodass Claude ein Bild analysieren und gleichzeitig
externe Funktionen aufrufen kann.
Bildgrößen-Limits: Maximale Bildgröße ist 5 MB (Base64). Claude skaliert Bilder intern
auf max. 1568 px auf der längsten Seite. Für Dokument-OCR empfiehlt sich mindestens 300 DPI.
Claude versteht PDFs nicht direkt — rendere Seiten zuerst als Bilder (z.B. mit pdf2pic).
4. Streaming Responses
Streaming
Streaming liefert Claude-Antworten Token für Token — ohne auf die vollständige Antwort zu warten.
Das verbessert die wahrgenommene Performance drastisch, besonders bei langen Ausgaben.
Das Anthropic SDK bietet zwei Streaming-APIs: die low-level stream()-Methode und
die High-level-Wrapper mit Event-Callbacks.
Basis-Streaming mit for await...of
import Anthropic from'@anthropic-ai/sdk';
const client = newAnthropic();
async functionstreamResponse() {
const stream = client.messages.stream({
model: 'claude-sonnet-4-5',
max_tokens: 1024,
messages: [
{
role: 'user',
content: 'Schreibe ein detailliertes TypeScript-Tutorial über Generics mit 5 praktischen Beispielen.',
},
],
});
// Tokens direkt ausgeben wenn sie ankommenfor await (const event of stream) {
if (
event.type === 'content_block_delta' &&
event.delta.type === 'text_delta'
) {
process.stdout.write(event.delta.text); // Kein Newline — fortlaufend ausgeben
}
}
// Finale vollständige Message nach Abschlussconst finalMessage = await stream.finalMessage();
console.log(`\n\nTokens: ${finalMessage.usage.input_tokens} in / ${finalMessage.usage.output_tokens} out`);
}
Streaming + Tool Use: Bei Tool-Calls liefert das Delta partial_json
statt Text. Du kannst die JSON-Fragmente sammeln und nach content_block_stop parsen —
oder stream.finalMessage() abwarten, das dir das vollständige Tool-Call-Objekt gibt.
5. Prompt Caching
Cache
Prompt Caching ist eines der wirkungsvollsten Cost-Reduction-Features der Claude API.
Häufig wiederholte Inhalte — System-Prompts, Dokumenten-Kontexte, Few-Shot-Beispiele — werden
serverseitig gecacht. Cache-Hits kosten bis zu 90% weniger als normale Tokens.
Die TTL beträgt 5 Minuten (Haiku) bzw. werden bei jedem Hit verlängert.
Cache Control: Ephemeral
const response = await client.messages.create({
model: 'claude-sonnet-4-5',
max_tokens: 1024,
// System-Prompt cachen — wird bei jedem Request gelesen, aber nur einmal berechnet
system: [
{
type: 'text',
text: largeSystemPrompt, // Z.B. 50.000 Tokens Kontext
cache_control: { type: 'ephemeral' }, // <-- Cache-Markierung
},
],
messages: [
{ role: 'user', content: 'Was sind die wichtigsten Punkte aus Kapitel 3?' },
],
});
Caching-Strategie für große Dokumente
const largeDocument = fs.readFileSync('./knowledge-base.txt', 'utf-8');
const fewShotExamples = fs.readFileSync('./examples.txt', 'utf-8');
async functionqueryWithCache(question: string) {
const response = await client.messages.create({
model: 'claude-opus-4-5',
max_tokens: 2048,
system: [
{
type: 'text',
text: 'Du bist ein KI-Assistent für technische Dokumentation. Antworte präzise und verweise auf spezifische Abschnitte.',
},
{
type: 'text',
// Großes Dokument cachen — bis zu 90% Kostenersparnis ab dem 2. Request
text: `\n\n<knowledge_base>\n${largeDocument}\n</knowledge_base>`,
cache_control: { type: 'ephemeral' },
},
],
messages: [
{
role: 'user',
content: [
{
type: 'text',
// Few-Shot-Beispiele ebenfalls cachen
text: `<examples>\n${fewShotExamples}\n</examples>\n\nFrage: `,
cache_control: { type: 'ephemeral' },
},
{
type: 'text',
text: question, // Nur die Frage ist nicht gecacht
},
],
},
],
});
// Cache-Statistiken in den Usage-Feldern
console.log('Cache-Statistiken:', {
cache_creation: response.usage.cache_creation_input_tokens,
cache_read: response.usage.cache_read_input_tokens,
uncached: response.usage.input_tokens,
});
return response.content.find(b => b.type === 'text')?.text;
}
Kostenvergleich mit Prompt Caching
Beispiel: RAG-Chatbot mit 50.000 Token System-Prompt (claude-opus-4-5)
Szenario
Preis / Request
100 Requests / Tag
Ohne Caching
$0.75 (50K × $15/M)
$75.00
1. Request (Cache Write)
$0.94 (1.25× Preis)
$0.94
Folge-Requests (Cache Hit)
$0.075 (90% günstiger)
$7.43
Ersparnis ab Tag 1
—
$66.63 (89%)
Cache-Breakpoints: Maximale Effizienz
// Bis zu 4 Cache-Breakpoints pro Request erlaubt// Setze sie an Stellen die sich zwischen Requests NICHT ändernconst response = await client.messages.create({
model: 'claude-sonnet-4-5',
max_tokens: 1024,
system: [
{
type: 'text',
text: roleDefinition, // Ändert sich nie → Cache
cache_control: { type: 'ephemeral' },
},
],
messages: [
{
role: 'user',
content: [
{
type: 'text',
text: staticDocumentContext, // Ändert sich täglich → Cache
cache_control: { type: 'ephemeral' },
},
{
type: 'text',
text: userQuestion, // Jeder Request anders → kein Cache
},
],
},
],
});
// Wichtig: Caching erfordert min. 1024 Tokens im Cache-Segment (Haiku: 2048)
Wann Caching sich lohnt: Mindestens 1.024 gecachte Tokens (bei Haiku: 2.048)
und Wiederverwendung innerhalb von 5 Minuten. Ideal für: RAG-Systeme, Chatbots mit großen
System-Prompts, Code-Review-Tools mit Codebasis-Kontext, mehrsprachige Assistenten mit
Glossar-Kontext.
6. Batch API & Production
Batch
Die Message Batches API ist für asynchrone Massenverarbeitung optimiert:
bis zu 10.000 Requests in einem Batch, 50% Kostenersparnis gegenüber synchronen Calls,
und 24-Stunden-SLA. Perfekt für Nacht-Jobs, Datenverarbeitung, Content-Generierung in Massen
und jede Aufgabe, bei der Echtzeit-Antworten nicht nötig sind.
Batch erstellen
import Anthropic from'@anthropic-ai/sdk';
const client = newAnthropic();
async functioncreateBatchJob(texts: string[]) {
// Requests vorbereiten (jeder mit eindeutiger custom_id)const requests = texts.map((text, idx) => ({
custom_id: `request-${idx}-${Date.now()}`,
params: {
model: 'claude-haiku-3-5', // Günstiges Modell für Batch-Verarbeitung
max_tokens: 512,
messages: [
{
role: 'user'as const,
content: `Klassifiziere diesen Text als positiv, neutral oder negativ. Antworte nur mit einem Wort.\n\nText: "${text}"`,
},
],
},
}));
// Batch startenconst batch = await client.beta.messages.batches.create({ requests });
console.log(`Batch erstellt: ${batch.id}`);
console.log(`Status: ${batch.processing_status}`);
console.log(`Requests: ${batch.request_counts.processing} verarbeitet`);
return batch.id;
}
Rate Limits: Claude API hat Limits per Minute (RPM) und per Tag (TPM). Implementiere exponentielles Backoff mit retry: { maxRetries: 3 } im Client-Konstruktor.
Error Handling: Fange Anthropic.APIError und behandle 529 (Overloaded) mit Retry, 401 (Auth) als Fatal, 400 (Invalid Request) als Bug.
Token-Tracking: Logge usage.input_tokens und usage.output_tokens pro Request für Kostentransparenz und Alerting.
Timeouts: Setze timeout: 60000 für normale Requests, 300000 für Batch-Polls. Streaming-Requests benötigen höhere Timeouts.
Idempotency: Nutze custom_id in Batches für Deduplizierung und sichere Retry-Logik.
Batch API Kostenersparnis: 50% auf alle Modelle. 10.000 claude-haiku-3-5 Requests
mit je 500 Input-Tokens kosten synchron $1.25 — per Batch nur $0.625. Für grosse Datenverarbeitungs-Pipelines
spart das hunderte Dollar pro Monat.
Fazit: Claude API in TypeScript meistern
Die Anthropic Claude API bietet 2026 ein vollständiges Toolkit für produktionsreife KI-Anwendungen.
Die wichtigsten Takeaways:
Messages API — Der Einstieg: einfach, typsicher, vollständig mit dem offiziellen SDK.
Tool Use — Der Schlüssel zu echten Agenten: Claude koordiniert externe Funktionen autonom.
Vision — Multimodale Inputs eröffnen Dokumentenanalyse, UI-Testing und visuelle RAG-Systeme.
Streaming — Essenziell für UX: Nutzer sehen sofort Antworten statt auf vollständige Responses zu warten.
Prompt Caching — Bis zu 90% Kostenersparnis bei großen System-Prompts — immer aktivieren.
Batch API — 50% günstiger für alles was nicht real-time braucht: Analyse, Content, Klassifizierung.
Claude Code — Anthropics eigenes CLI, das auf demselben SDK aufbaut — nutzt alle diese Features
intern. Im Claude Code Mastery Kurs lernst du, wie du diese Konzepte in
vollständige Produkte umsetzt: von der ersten API-Integration bis zur produktionsreifen
Multi-Agent-Pipeline mit Monitoring, Cost-Tracking und automatischer Fehlerbehandlung.
Claude-API-Modul im Kurs
Im Claude Code Mastery Kurs: vollständiges Anthropic-API-Modul mit Tool Use, Vision, Prompt Caching, Batch API und Production-Best-Practices.