Der Stack hinter einer KI-App

Kein Zauber, ein Stapel Werkzeuge

Du chattest mit einer KI-App, und es fühlt sich an wie Magie. Es ist ein Stapel aus konkreten, benannten Werkzeugen, jedes mit einer Aufgabe. Diese Lesson nennt sie beim Namen, Schicht für Schicht, so wie eine echte App tatsächlich gebaut wird.

Wir gehen von der Oberfläche bis zu den Daten. An jeder Schicht steht das Werkzeug, was es tut und welche Alternativen es gibt. Kein Code, nur die Landkarte und die Namen, damit du am Ende deinen eigenen Stack zusammenstellen kannst.

Die Basis, auf der alles steht, ist eine ganz normale moderne Web-App. Hier ist noch nichts KI-spezifisch. Wir gehen es kurz durch, damit klar ist, worauf die spannenden Schichten aufsetzen.

Ein Wort zu shadcn/ui, weil das Prinzip gleich wiederkommt: Es ist keine Bibliothek, die du importierst. Die Komponenten werden in deinen Code kopiert, sie gehören dir und du darfst sie ändern. Genau dieselbe Idee triffst du im nächsten Step bei AI Elements wieder.

Alternativen

Das ist das Herzstück. Vier Werkzeuge aus einem Ökosystem, dem Vercel-AI-Stack, die füreinander gemacht sind. Wenn du diese vier verstehst, ergeben die meisten modernen KI-Apps plötzlich Sinn.

AI SDK: die Basis

Das AI SDK ist das Fundament der ganzen App-Schicht. Es gibt dir eine einheitliche Schnittstelle zu jedem Anbieter, sodass du das Modell wechseln kannst, ohne deinen Code umzuschreiben. Es liefert freien Text (streamen oder am Stück), strukturierte Ausgabe, die gegen ein Schema geprüft wird, das Aufrufen von Werkzeugen und den Agenten-Loop (mehr im nächsten Step). Auf der Oberfläche streamt sein Chat-Hook die Antwort Wort für Wort.

AI Gateway: ein Schlüssel für alle Anbieter

Das AI Gateway sitzt vor dem SDK. Statt fünf Schlüssel und fünf SDKs pro Anbieter zu jonglieren, nutzt du einen Schlüssel und schreibst das Modell als Text, etwa anthropic/claude-… oder openai/…. Dazu kommt Fallback, wenn ein Anbieter ausfällt, Lastverteilung und eine Stelle, an der du Verbrauch und Kosten siehst. Der Preis ist Durchreichung ohne Aufschlag. Optional, aber es räumt den Schlüssel-Wildwuchs weg.

AI Elements: die fertige Chat-Oberfläche

AI Elements ist ein Satz fertiger React-Komponenten für KI-Chats: Conversation, Message, PromptInput, Response, Reasoning, Sources. Wie bei shadcn/ui werden sie in deinen Code kopiert und gehören dir, keine Blackbox. Sie docken direkt an den Chat-Hook des AI SDK an. Du baust keine Chat-Oberfläche mehr von null.

Streamdown: streamende Antworten sauber rendern

Während die Antwort streamt, ist das Markdown ständig halbfertig: offene Code-Blöcke, hängendes Fett, kaputte Tabellen. Streamdown ist ein Ersatz für die übliche Markdown-Anzeige, genau dafür gebaut: Es schließt unfertige Teile sauber ab und härtet die Ausgabe ab (sichere Links und Bilder), mit Code-Highlighting, Mathe und Diagrammen eingebaut. Die Response-Komponente von AI Elements nutzt es unter der Haube.

Wie die vier zusammenschnappen

Alternativen pro Werkzeug

Jedes der vier lässt sich tauschen. Das Set ist bequem, aber kein Zwang.

Du fragst: „Finde die neuesten Zahlen zu X und fass sie zusammen." Ein einfaches Modell würde aus seinem Training raten. Ein Agent sucht erst im Web, liest, und schreibt dann. Für diese Schicht hast du zwei konkrete Wege.

Weg 1: AI-SDK-nativ

Das AI SDK bringt den Agenten-Loop schon mit. Du gibst ihm Werkzeuge, es läuft die Schleife (Modell entscheidet, ruft ein Werkzeug, sieht das Ergebnis, entscheidet erneut), und du setzt eine Stopp-Bedingung, damit es nicht endlos kreist. Für einen Chatbot oder einen fokussierten Werkzeug-Agenten reicht das vollkommen.

Weg 2: Mastra

Wenn du mehr brauchst als eine Schleife (mehrstufige Workflows mit Verzweigungen, strukturiertes Memory, RAG-Pipelines und Evals als feste Bausteine), greifst du zu Mastra. Das ist ein TypeScript-Agent-Framework, das auf dem AI SDK aufbaut und genau dieses Produktions-Gerüst drumherum ergänzt. Sechs Bausteine: Agenten, Workflows, Werkzeuge, Memory, RAG, Evals. Du wirfst das AI SDK nicht weg, Mastra sitzt obendrauf.

MCP: der Universal-Stecker für Werkzeuge

Beide Wege nutzen Werkzeuge, und MCP (Model Context Protocol) ist der Standard, um sie anzustecken. Stell es dir vor wie USB-C für KI-Werkzeuge: Eine Datenquelle oder ein Werkzeug, das als MCP-Server bereitsteht, kann jeder MCP-fähige Agent nutzen, ohne Sonderverkabelung. AI SDK und Mastra sind beide MCP-fähig. Ein Werkzeug einmal gebaut, überall einsteckbar.

Alternativen, vor allem in Python

Die beiden Wege oben sind TypeScript. Daneben gibt es ein ganzes Paralleluniversum, besonders in Python, wo die meisten Agent-Frameworks zu Hause sind.

Der Agent nennt dich beim Namen und kennt dein Projekt. Es fühlt sich an, als würde er dich kennen. Tut er nicht. Die App stellt sein Wissen für jede Nachricht frisch zusammen, ein geschichteter Auftrag, bevor das Modell deine Frage überhaupt sieht.

Memory über Sessions: mem0

Der Kontext einer Nachricht ist weg, wenn der Chat endet. Für „erinnere dich nächste Woche an mich" brauchst du eine eigene Memory-Schicht. mem0 macht genau das: Es zieht wichtige Fakten über Nutzer und Verlauf heraus, speichert sie und holt die passenden in spätere Prompts zurück. Gibt es als Cloud oder selbst gehostet. Wer Mastra nutzt, bekommt Memory dort schon mitgeliefert, mem0 ist die eigenständige Variante.

Memory-Alternativen: von fertig bis selbstgebaut

Die Datenbank: Neon

Gespräche, Nutzer und Einstellungen leben in einer Datenbank. Neon ist serverless Postgres: Es fährt im Leerlauf auf null herunter, und sein Markenzeichen ist Branching wie bei Git, eine volle Kopie der Datenbank in Sekunden und für fast nichts (ideal für eine eigene Vorschau-Datenbank pro Änderung). Du sprichst mit ihr über ein ORM wie Drizzle, also typsichere Abfragen statt rohem SQL.

Auth: bündeln oder trennen

Wer kommt rein. Drei konkrete Wege. Gebündelt: Neon Auth (läuft unter der Haube auf Better Auth) speichert Nutzer und Sessions direkt in deinem Postgres, ein Dienst weniger. Eigener Anbieter: Logto, eine Open-Source-Alternative zu Auth0 (OIDC, Social-Login, SSO, MFA), selbst gehostet oder als Cloud. Selbst gebaut: mit Low-Level-Bausteinen wie arctic einen eigenen OIDC-Flow, mehr Kontrolle, mehr Arbeit.

Storage: für Dateien und Artefakte

Text gehört in Postgres, aber Dateien (Uploads, generierte Bilder, Dokumente) gehören in Objekt-Storage. Drei Optionen mit derselben Schnittstelle, du tauschst nur den Endpunkt: R2 (Cloudflare, keine Egress-Gebühren, gut wenn viel rausgeht), S3 (AWS, der reife Standard), MinIO (selbst gehostet, lokal oder im eigenen Netz). Neon hat zusätzlich Storage in einer frühen Phase, falls du es gebündelt willst.

Alternativen pro Schicht

Die App läuft, alles wirkt gut. Dann kommt die Rechnung. Oder sie wird langsam schlechter, und niemand merkt es. Beides kommt aus derselben Lücke: Es wird nichts gemessen.

Kosten im Blick: Tokens und Caching

Jeder Modell-Aufruf und jeder Agenten-Schritt verbraucht Tokens, also Geld und Zeit. Du protokollierst Tokens, Schritte, Kosten und Antwortzeit. Ein Werkzeug wie tokenlens zählt Tokens und Kosten über verschiedene Modelle hinweg. Caching verwendet Teile wieder, die du schon geschickt hast, und senkt so die Kosten.

Die Schicht, die fast alle weglassen: Evals

Jetzt der ehrliche Teil. Die meisten Stacks haben alles bisher Genannte und lassen eine Schicht weg: Evals. Also ein automatisches, wiederholbares Prüfen, dass der Agent nach einer Änderung weiter gute Antworten gibt. Manche Frameworks wie Mastra bringen Evals als festen Baustein mit, sonst baust du dir ein kleines Eval-Set selbst.

Das ist dieselbe Lücke wie der Sprung vom Vibe Coding zum Agentic Engineering. Eine Demo beweist, dass es einmal ging. Eine Eval beweist, dass es verlässlich geht. Ohne sie ist jede Änderung ein Glücksspiel. Tiefer dazu in Von Vibe Coding zu Agentic Coding.

Werkzeuge dafür

Die ganze Lesson in einer Bewegung: Eine Nachricht kommt über AI Elements herein, das AI SDK streamt sie, das Gateway wählt einen Anbieter, der Agenten-Loop (SDK-nativ oder Mastra) nutzt Werkzeuge über MCP, die Kontext-Schicht und mem0 sagen ihm, was er weiß, Neon und das Storage merken sich alles, und tokenlens plus Evals wachen über Kosten und Qualität.

Bündeln oder best-of-breed

Das ist die eigentliche Meta-Entscheidung. Ein Ökosystem (der Vercel-AI-Stack plus Neon für alles) bringt dich am schnellsten von der Idee zur App. Best-of-Breed (Mastra, Logto, R2, mem0 dort einsetzen, wo sie stärker sind) gibt dir mehr Kraft und weniger Abhängigkeit. Die meisten echten Stacks mischen beides.

Wohin als Nächstes