LangChain.js mit Claude Code: LLM-Anwendungen 2026
ChatModels, LCEL, Prompt Templates, RAG, Agents und LangGraph — der vollständige Praxis-Guide für produktionsreife KI-Apps in TypeScript.
6. Mai 2026·12 min Lesezeit·TypeScript / LangChain 0.3
LangChain.js hat sich in 2026 zur führenden Framework-Lösung für produktionsreife LLM-Anwendungen in JavaScript und TypeScript entwickelt. In Kombination mit Claude Code — Anthropics leistungsstarkem CLI-Agenten — entstehen Workflows, die früher Wochen an Entwicklungszeit erfordert hätten, jetzt in Stunden. Dieser Guide zeigt dir die wichtigsten Bausteine: von der ersten ChatModel-Integration bis hin zu komplexen State-Maschinen mit LangGraph.
Die Beispiele basieren auf LangChain 0.3.x, dem aktuellen Stable Release, und nutzen durchgängig TypeScript für maximale Typsicherheit. Alle Snippets sind direkt ausführbar — ohne Boilerplate, ohne Ablenkung.
Voraussetzungen
Node.js ≥ 20, TypeScript ≥ 5.4, ein OpenAI- oder Anthropic-API-Key. Claude Code als lokaler Dev-Agent empfohlen.
1. LangChain Setup & ChatModels
Der Einstieg in LangChain.js beginnt mit der Installation der relevanten Pakete. Das Kernpaket langchain stellt alle abstrakten Klassen bereit; die Provider-Pakete (@langchain/openai, @langchain/anthropic) liefern die konkreten Implementierungen.
Alle LangChain-Provider implementieren das BaseChatModel-Interface. Das bedeutet: du kannst zwischen GPT-4o, Claude 3.7 und Gemini wechseln, ohne deinen Business-Code anzufassen — nur die Initialisierung ändert sich.
src/models/chat-models.ts
import { ChatOpenAI } from"@langchain/openai";
import { ChatAnthropic } from"@langchain/anthropic";
import { HumanMessage, SystemMessage, AIMessage } from"@langchain/core/messages";
// GPT-4o mit Streamingconstgpt4o = newChatOpenAI({
model: "gpt-4o",
temperature: 0.7,
streaming: true,
apiKey: process.env.OPENAI_API_KEY,
});
// Claude 3.7 Sonnet — aktuell stärkstes Anthropic-Modellconstclaude37 = newChatAnthropic({
model: "claude-3-7-sonnet-20250219",
temperature: 0.5,
maxTokens: 8192,
apiKey: process.env.ANTHROPIC_API_KEY,
});
// Einfacher Invoke-Call mit Messages-Arrayasync functionbasicChat() {
constresponse = awaitclaude37.invoke([
newSystemMessage("Du bist ein präziser TypeScript-Experte."),
newHumanMessage("Erkläre Generics in TypeScript in 3 Sätzen."),
]);
console.log(response.content);
console.log("Tokens verwendet:", response.usage_metadata?.total_tokens);
}
// Streaming für lange Antwortenasync functionstreamChat() {
conststream = awaitgpt4o.stream([
newHumanMessage("Schreibe einen Blogbeitrag über LangChain.js"),
]);
for await (constchunkofstream) {
process.stdout.write(chunk.content asstring);
}
}
Model-Auswahl 2026: Welches Modell für welchen Use-Case?
Modell
Stärken
Typischer Use-Case
Kosten/1M Tokens
Claude 3.7 Sonnet
Reasoning, Code, Long Context
Komplexe Agents, Code-Review
~$3 In / $15 Out
GPT-4o
Multimodal, Schnelligkeit
Chat-UIs, Image-Input
~$2.50 In / $10 Out
Claude 3.5 Haiku
Geschwindigkeit, niedrige Latenz
Klassifikation, schnelle NLP
~$0.25 In / $1.25 Out
Gemini 1.5 Flash
1M Context Window
Dokumenten-Analyse, Long RAG
~$0.075 In / $0.30 Out
Tipp: Provider-Wechsel ohne Code-Änderungen
Setze LANGCHAIN_MODEL als Umgebungsvariable und lade das Modell dynamisch. So kannst du in der Entwicklung günstigere Modelle nutzen und in Produktion auf leistungsstärkere umschalten.
2. LCEL: LangChain Expression Language
Die LangChain Expression Language (LCEL) ist das Herzstück von LangChain 0.3. Statt imperativer Verkettung nutzt LCEL den Pipe-Operator (|) um Komponenten deklarativ zu verbinden — ähnlich wie Unix-Pipes oder RxJS-Streams.
LCELDas Pipe-Prinzip
Jede LCEL-Komponente implementiert das Runnable-Interface mit invoke(), stream() und batch(). Der Pipe-Operator (pipe() oder |) gibt eine neue RunnableSequence zurück.
Der erste Schritt in einer Chain bestimmt den Input-Typ. Wenn dein Prompt {"{"}{"{thema}"}, {"{niveau}"} erwartet, musst du ein Objekt übergeben — kein String. TypeScript warnt hier zuverlässig.
3. Prompt Templates & OutputParsers
Gute Prompts sind strukturiert, wiederverwendbar und typsicher. LangChain bietet ChatPromptTemplate, StructuredOutputParser und JsonOutputParser für alle gängigen Patterns.
PromptsChatPromptTemplate mit System & Human Messages
src/prompts/structured-prompts.ts
import { ChatPromptTemplate, MessagesPlaceholder } from"@langchain/core/prompts";
import { StructuredOutputParser, JsonOutputParser } from"@langchain/core/output_parsers";
import { z } from"zod";
// Komplexes Template mit System + Human + MessagesPlaceholderconstchatTemplate = ChatPromptTemplate.fromMessages([
[
"system",
`Du bist {persona}. Deine Stärken: {staerken}.
Antworte IMMER auf Deutsch. Sei präzise, nicht länger als {max_saetze} Sätze.`,
],
newMessagesPlaceholder("chat_history"), // dynamische History
["human", "{user_input}"],
]);
// partial(): Werte vorausfüllen — nützlich für fixe KonfigurationconstcodeReviewTemplate = awaitchatTemplate.partial({
persona: "Senior TypeScript-Entwickler",
staerken: "Clean Code, SOLID, Performance",
max_saetze: "5",
});
// StructuredOutputParser mit Zod-SchemaconstreviewSchema = z.object({
qualitaet: z.enum(["sehr gut", "gut", "verbesserungswürdig", "schlecht"]),
probleme: z.array(z.string()).describe("Liste der gefundenen Probleme"),
empfehlungen: z.array(z.string()).describe("Konkrete Verbesserungsvorschläge"),
score: z.number().min(0).max(10).describe("Code-Qualitäts-Score 0-10"),
});
conststrukturierterParser = StructuredOutputParser.fromZodSchema(reviewSchema);
// Format-Anweisungen automatisch generieren und in Prompt einfügenconstformatAnweisungen = strukturierterParser.getFormatInstructions();
constreviewPrompt = ChatPromptTemplate.fromTemplate(
`Reviewe folgenden TypeScript-Code:\n\n{code}\n\n{format_anweisungen}`
);
constreviewChain = reviewPrompt
.pipe(model)
.pipe(strukturierterParser);
constreviewErgebnis = awaitreviewChain.invoke({
code: `function add(a, b) { return a + b; }`,
format_anweisungen: formatAnweisungen,
});
// reviewErgebnis ist vollständig typisiert dank Zod!// reviewErgebnis.score, reviewErgebnis.probleme usw.
JsonOutputParser: Flexibel ohne Schema
src/parsers/json-parser.ts
import { JsonOutputParser } from"@langchain/core/output_parsers";
// Wenn du kein fixes Schema willst — z.B. für dynamische StrukturenconstjsonParser = newJsonOutputParser();
constextraktionPrompt = ChatPromptTemplate.fromTemplate(
`Extrahiere alle Entitäten aus diesem Text als JSON-Array.
Format: [{{"name": "...", "typ": "Person|Ort|Organisation", "kontext": "..."}}]
Text: {text}`
);
constentitaetenChain = extraktionPrompt
.pipe(model)
.pipe(jsonParser);
// Streaming JSON — für Echtzeit-Updates in UIconststream = awaitentitaetenChain.stream({
text: "Elon Musk gründete SpaceX in Hawthorne, Kalifornien.",
});
for await (constchunkofstream) {
// Partial JSON-Objekte als sie ankommen
console.log(chunk);
}
4. RAG mit Vectorstore
Retrieval Augmented Generation (RAG) ist das meistgenutzte LangChain-Pattern in Produktionsanwendungen. Das Prinzip: Eigene Dokumente werden in Embeddings umgewandelt, in einem Vectorstore gespeichert und bei Anfragen semantisch gesucht — der LLM bekommt nur relevante Kontext-Chunks.
Nutze HyDE (Hypothetical Document Embeddings): Lass das LLM erst eine hypothetische Antwort generieren, embedde diese und nutze sie für die Suche. Das verbessert die Recall-Rate um oft 20–40%.
5. Agents & Tools
Agents sind das mächtigste Muster in LangChain: Das LLM entscheidet dynamisch, welche Tools es in welcher Reihenfolge aufruft, um eine Aufgabe zu lösen. LangChain bietet createReactAgent als Standard-Implementierung des ReAct-Patterns (Reason + Act).
AgentEigene Tools definieren mit DynamicTool
src/agents/tools.ts
import { DynamicTool, DynamicStructuredTool } from"@langchain/core/tools";
import { createReactAgent } from"langchain/agents";
import { AgentExecutor } from"langchain/agents";
import { z } from"zod";
// Einfaches Tool — Input ist immer ein StringconstwetterTool = newDynamicTool({
name: "get_weather",
description: "Gibt aktuelle Wetterdaten für eine Stadt zurück. Input: Stadtname.",
func: async (stadtName: string) => {
// Echter API-Callconstresponse = awaitfetch(
`https://api.openweathermap.org/data/2.5/weather?q=${stadtName}&appid=${process.env.OWM_KEY}&units=metric&lang=de`
);
constdata = awaitresponse.json();
return`${data.name}: ${data.main.temp}°C, ${data.weather[0].description}`;
},
});
// StructuredTool — mehrere typisierte Parameter via ZodconstdatenbankTool = newDynamicStructuredTool({
name: "query_database",
description: "Führt eine Datenbankabfrage durch und gibt die Ergebnisse zurück.",
schema: z.object({
tabelle: z.string().describe("Name der Tabelle"),
limit: z.number().default(10).describe("Maximale Anzahl Ergebnisse"),
filter: z.string().optional().describe("WHERE-Klausel (optional)"),
}),
func: async ({ tabelle, limit, filter }) => {
// Sanitize und Query ausführenconstsql = `SELECT * FROM ${tabelle} ${filter ? `WHERE ${filter}` : ""} LIMIT ${limit}`;
// ... DB-Call hierreturnJSON.stringify({ rows: [], sql });
},
});
// Calculator Tool (eingebaut)import { Calculator } from"@langchain/community/tools/calculator";
constcalculator = newCalculator();
// Agent erstellen — ReAct-Patternconsttools = [wetterTool, datenbankTool, calculator];
constagent = awaitcreateReactAgent({
llm: model,
tools: tools,
});
constagentExecutor = newAgentExecutor({
agent: agent,
tools: tools,
verbose: true, // Thought-Action-Observation loggen
maxIterations: 10, // Endlosschleifen verhindern
returnIntermediateSteps: true,
});
// Agent aufrufenconstergebnis = awaitagentExecutor.invoke({
input: "Wie ist das Wetter in Berlin? Und wieviel ist 847 * 293?",
});
console.log(ergebnis.output);
console.log("Schritte:", ergebnis.intermediateSteps.length);
6. LangGraph: State Machines für komplexe Workflows
LangGraph ist die nächste Evolutionsstufe nach einfachen Agents. Statt linearer Ketten baut LangGraph gerichtete Graphen mit zustandsbehafteten Nodes — ideal für Multi-Step-Reasoning, Human-in-the-Loop und Fehlerbehandlung.
LangGraphStateGraph: Kernkonzepte
State: Geteilter Zustand — TypeScript-Interface, das alle Nodes lesen/schreiben
Nodes: Funktionen, die den State transformieren (async möglich)
Edges: Verbindungen zwischen Nodes — statisch oder dynamisch (conditional)
Checkpointer: Persistenz des States zwischen Runs (für HITL)
Sobald diese Umgebungsvariablen gesetzt sind, werden alle LangChain- und LangGraph-Aufrufe automatisch zu LangSmith übertragen — inkl. Tokens, Latenz, Errors und Zwischenschritte. Kein Code-Change nötig.
LangGraph vs. einfache Agents: Wann was?
Nutze AgentExecutor für einfache Tool-Nutzung mit klarem Ende. Nutze LangGraph wenn du Schleifen, Fehlerbehandlung, parallele Branches, Human-in-the-Loop oder persistenten State zwischen mehreren Gesprächen brauchst.
Starte deinen kostenlosen Trial und entdecke, wie Claude Code deine LangChain-Entwicklung beschleunigt — von der ersten Chain bis zur produktionsreifen Agent-Pipeline.