Challenge 1.1: Was ist das AI SDK?

THINK

Wenn Du mit Claude, GPT und Gemini arbeiten willst — brauchst Du für jeden eine andere Library? Andere Typen? Andere Fehlerbehandlung?

OVERVIEW

AI SDK Architektur: Dein Code verbindet sich über AI SDK Core, UI und RSC mit Providern wie Anthropic, OpenAI und Google

Das AI SDK sitzt zwischen Deinem Code und den LLM-Providern. Es bietet eine einheitliche API — egal welchen Provider Du nutzt. Drei Bibliotheken, ein Interface.

WHY

Ohne AI SDK: Für jeden Provider eine andere API, andere Typen, andere Fehlerbehandlung. Provider wechseln bedeutet den halben Code umschreiben. Jeder Provider hat eigene SDKs mit unterschiedlichen Interfaces.

Mit AI SDK: Eine API für alle Provider. Du wechselst den Provider, indem Du eine Import-Zeile und den Modell-Namen aenderst. Der Rest Deines Codes bleibt identisch.

WALKTHROUGH

Schicht 1: Die drei Bibliotheken

Das AI SDK besteht aus drei Teilen. In diesem Level arbeiten wir ausschliesslich mit AI SDK Core:

Bibliothek	Package	Einsatz
AI SDK Core	`ai`	Backend: Text generieren, Tools, Agents, Structured Output
AI SDK UI	`ai` (gleicher Import)	Frontend: Framework-agnostische Hooks für Chat-UIs
AI SDK RSC	`ai` (gleicher Import)	React Server Components: Streaming React Components

AI SDK Core ist das Fundament. Alles andere baut darauf auf. Wenn Du generateText oder streamText nutzt, nutzt Du AI SDK Core.

Schicht 2: Installation und Setup

Falls Du das Briefing-Setup durchlaufen hast, sind ai und @ai-sdk/anthropic bereits installiert und Dein API-Key liegt in der .env-Datei. Du kannst diesen Abschnitt ueberspringen.

Zwei Packages — das AI SDK selbst und ein Provider-Package:

npm install ai @ai-sdk/anthropic

ai ist das Kern-Package mit allen Funktionen (generateText, streamText, Output, etc.). @ai-sdk/anthropic ist der Provider — er weiss, wie man mit der Anthropic API kommuniziert.

Dein API-Key wird als Environment Variable gesetzt — am besten in einer .env-Datei (wird von tsx automatisch geladen):

echo 'ANTHROPIC_API_KEY=sk-ant-...' > .env

Schicht 3: Dein erster generateText Call

Das “Hello World” des AI SDK — ein einzelner API-Call der Text generiert:

import { generateText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

const result = await generateText({
  model: anthropic('claude-sonnet-4-5-20250514'),  // ← Provider + Modell
  prompt: 'Was ist TypeScript in einem Satz?',
});

console.log(result.text);         // ← Der generierte Text
console.log(result.usage);        // ← Token-Verbrauch: { promptTokens, completionTokens, totalTokens }
console.log(result.finishReason); // ← Warum gestoppt: 'stop' | 'length' | 'tool-calls'

Drei Zeilen Code, drei Informationen zurück:

result.text — der generierte Text als String
result.usage — wie viele Tokens verbraucht wurden (wichtig für Kosten)
result.finishReason — warum das LLM aufgehoert hat zu generieren

Das model-Argument ist der einzige Ort, an dem der Provider vorkommt. Alles andere (prompt, result.text, result.usage) ist Provider-unabhängig.

TRY

Aufgabe: Installiere das AI SDK und den Anthropic Provider. Fuehre einen generateText Call aus und logge Text, Usage und Finish Reason.

// TODO 1: Installiere die Packages
// npm install ai @ai-sdk/anthropic

// TODO 2: Importiere generateText und den Anthropic Provider
// import { ... } from 'ai';
// import { ... } from '@ai-sdk/anthropic';

// TODO 3: Setze den API-Key als Environment Variable
// export ANTHROPIC_API_KEY="sk-ant-..."

// TODO 4: Rufe generateText auf
// const result = await generateText({
//   model: ???,
//   prompt: ???,
// });

// TODO 5: Logge die drei Ergebnisse
// console.log(result.???);  // Text
// console.log(result.???);  // Token-Verbrauch
// console.log(result.???);  // Warum gestoppt

Checkliste:

ai und @ai-sdk/anthropic installiert
generateText importiert und aufgerufen
result.text, result.usage und result.finishReason geloggt
ANTHROPIC_API_KEY als Environment Variable gesetzt

Lösung anzeigen

import { generateText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

const result = await generateText({
  model: anthropic('claude-sonnet-4-5-20250514'),
  prompt: 'Was ist TypeScript in einem Satz?',
});

console.log('Text:', result.text);
console.log('Usage:', result.usage);
console.log('Finish Reason:', result.finishReason);

Erklärung: generateText ist eine async Funktion, die ein Result-Objekt zurueckgibt. Das model-Argument erstellt eine Anthropic-Modell-Instanz mit dem Modell-Namen claude-sonnet-4-5-20250514. Der prompt ist der User-Input. Die drei geloggten Properties geben Dir den generierten Text, den Token-Verbrauch und den Grund für das Stoppen.

Ausfuehren:

npx tsx challenge-1-1.ts

Erwarteter Output (ungefaehr):

Text: TypeScript ist eine typisierte Obermenge von JavaScript, die statische Typpruefung...
Usage: { promptTokens: 14, completionTokens: 42, totalTokens: 56 }
Finish Reason: stop

COMBINE

Derselbe Prompt wird an generateText mit Anthropic und OpenAI gesendet und erzeugt zwei separate Outputs

Uebung: Aendere den Provider — ersetze anthropic durch openai. Was musst Du ändern?

Installiere den OpenAI Provider: npm install @ai-sdk/openai
Aendere den Import: import { openai } from '@ai-sdk/openai'
Aendere die Model-Zeile: model: openai('gpt-4o')
Setze OPENAI_API_KEY als Environment Variable

Der Rest des Codes bleibt identisch — result.text, result.usage, result.finishReason funktionieren genauso. Das ist die Provider-Austauschbarkeit des AI SDK.

Optional Stretch Goal: Fuehre beide Provider nacheinander aus (Anthropic und OpenAI) mit demselben Prompt und vergleiche die Outputs.