--- title: "SaaS mit KI bauen (Modern Stack)" description: "Bau ein SaaS mit KI auf dem Modern Stack: von der Idee zum Scaffold, Clerk Auth, Convex-Datenbank, Stripe-Payments, dann live. Der ganze Pfad, vom Agent." type: "guide" locale: "de-CH" category: "Build" canonical: "https://agenticschool.dev/de/ratgeber/build-a-saas-with-ai" datePublished: "2026-06-13" dateModified: "2026-06-13" --- # SaaS mit KI bauen (Modern Stack) - Kategorie: Build - Keywords: build a saas with ai, build app with claude code, modern app stack, tanstack convex clerk stripe, how to build a saas - Kanonische URL: https://agenticschool.dev/de/ratgeber/build-a-saas-with-ai - Sprache: de-CH > Bau ein SaaS mit KI auf dem Modern Stack: von der Idee zum Scaffold, Clerk Auth, Convex-Datenbank, Stripe-Payments, dann live. Der ganze Pfad, vom Agent. Du kannst 2026 ein echtes SaaS bauen und ausliefern, indem du einen AI-Coding-Agent über einen kleinen, bewährten Stack steuerst, und dieser Pillar-Guide ist die Karte, um das von Anfang bis Ende zu tun: von der Idee zum Scaffold, zur Authentifizierung, zur Datenbank, zu Payments, zum Livegang. Die Arbeit ist nicht mehr, jede Zeile zu tippen; sie ist, die richtigen Teile zu wählen, sie sauber zu verdrahten und zu verifizieren, was der Agent baut. Der Stack, den wir lehren, ist der, den ein Solo-Founder tatsächlich ausliefern und warten kann: ein modernes Framework für die App, Clerk für Auth, Convex für die Datenbank, Stripe für Payments und ein Agent wie Claude Code, der den Build steuert. Dieser Guide gibt dir die ganze Sequenz und verlinkt die Deep Dives, die Vergleiche hinter jeder Wahl und den Kurs, der jede Stufe im Detail durchgeht. Alles hier ist Stand Juni 2026. ## Der Modern SaaS Stack in einem Bild Ein SaaS sind dieselben drei Schichten wie jede App (ein Frontend, das der User sieht, ein Backend, das Logik und Secrets hält, und eine Datenbank, die Daten speichert) plus die wenigen Services, die aus einer App ein Business machen: Authentifizierung, damit User Accounts haben, eine Datenbank, die in Echtzeit synchronisiert, und Payments, damit du abrechnen kannst. Der 2026-Default für einen Solo-Founder oder ein kleines Team ist ein Framework für die App, Clerk für Auth, Convex für die reaktive Datenbank und Stripe für Payments, alles von einem Coding-Agent zusammengeklebt, den du steuerst. Du musst nicht genau diese Tools nutzen, aber du brauchst eine gute Wahl in jedem Slot. Unser Cornerstone-Artikel, Modern App Stack erklärt, legt das ganze Bild dar; dieser Guide ist der Build-Pfad hindurch. - App-Framework: rendert die UI und liefert die App aus (Next.js, TanStack Start, Astro und andere). - Auth: User-Accounts, Login und OAuth, von einem Provider übernommen, damit du nie selbst Passwörter speicherst. - Datenbank: wo deine Daten leben und synchronisieren; Convex ist reaktiv, sodass die UI live aktualisiert. - Payments: Stripe für Checkout, Subscriptions und Webhooks. Siehe den Artikel Modern App Stack erklärt für die ganze Karte. ## Schritt 1: von der Idee zum Scaffold Beginne damit, die Idee auf einen Job einzuengen, den dein Produkt gut macht, und lass dann deinen Agent das Projekt scaffolden. Die Disziplin, die hier zählt, ist Scope: Ein SaaS, das eine Sache klar macht, schlägt eines, das zehn Dinge vage macht, genau wie der favicon-maker-Build gelernt hat. Lass deinen Coding-Agent das Framework, die Versionskontrolle und einen Dev-Server aufsetzen und bring eine leere App lokal zum Laufen, bevor du irgendetwas hinzufügst. Schreib eine CLAUDE.md mit deinem Stack und deinen Konventionen, damit der Agent vom ersten Commit an auf deinen Regeln baut. Das Ziel dieser Stufe ist ein laufendes Skelett, das du deployen kannst, kein Feature, denn die leere Hülle früh auszuliefern entschärft alles, was folgt. - Eng auf einen Kern-Job einengen; widersteh Feature-Creep, bevor du irgendetwas ausgeliefert hast. - Lass den Agent Framework, Git und einen Dev-Server scaffolden und lokal laufen. - Füge eine CLAUDE.md hinzu, damit der Agent von Anfang an deinem Stack und deinen Konventionen folgt. - Course 3 Lektion: Architecture 101 erklärt, wie die Teile zusammenpassen, bevor du sie verdrahtest. ## Schritt 2: Authentifizierung mit Clerk hinzufügen Fast jedes SaaS braucht Accounts, und du solltest Login nie von Grund auf bauen: Eigene Auth zu rollen ist, wie Secrets leaken und Sessions brechen. Ein Auth-Provider übernimmt Signup, Login, OAuth (mit Google und anderen anmelden), Sessions und Sicherheit für dich, also verdrahtest du ein paar Komponenten und schützt deine Routes. Clerk ist der Default, den wir lehren, weil es schnell zu integrieren ist und sauber mit diesem Stack zusammenpasst, aber Auth0 und Supabase Auth sind je nach Bedarf valide Wahlen. Wir schlüsseln diese Entscheidung im Vergleich Clerk vs Auth0 vs Supabase Auth auf; was du auch wählst, das Prinzip ist dasselbe: Delegiere den sicherheitskritischen Teil an Spezialisten. Der Modern App Stack Kurs geht die komplette Clerk-Integration durch, inklusive Google OAuth und dem Dev-zu-Production-Schritt. - Roll nie deine eigene Auth; ein Provider übernimmt Login, OAuth, Sessions und Sicherheit. - Clerk ist hier der Default; wäge es in unserem Vergleich gegen Auth0 und Supabase Auth ab. - Verdrahte die Auth-Komponenten, dann schütze die Routes und Daten, die einen eingeloggten User brauchen. - Course 3 Lektion: Clerk-Authentifizierung und OAuth von Dev bis Production. ## Schritt 3: deine Daten in Convex modellieren Dein SaaS braucht einen Ort, um Daten zu speichern, die einen Refresh überleben und über User geteilt werden, und die moderne Wahl für diesen Stack ist Convex: eine reaktive Datenbank, bei der deine Queries die UI automatisch aktualisieren, wenn sich die zugrunde liegenden Daten ändern, sodass du weit weniger Synchronisations-Code schreibst. Du definierst dein Schema, schreibst Funktionen, die Daten lesen und schreiben, und das Frontend abonniert live Ergebnisse. Convex ist nicht die einzige Option (Supabase und Firebase sind starke Alternativen mit anderen Trade-offs), und wir legen diese Entscheidung im Vergleich Convex vs Supabase vs Firebase dar. Der Grund, warum reaktive Daten für einen Solo-Founder zählen, ist Hebelwirkung: Die Datenbank, die die Live-Updates für dich macht, ist ein System weniger, das du bauen und debuggen musst. Der Modern App Stack Kurs behandelt das Modellieren von Daten und das Schreiben von Convex-Funktionen vollständig. - Eine Datenbank speichert Daten dauerhaft und teilt sie über User und Sessions. - Convex ist reaktiv: Queries aktualisieren die UI live, also schreibst du weniger Sync-Code. - Vergleiche es gegen Supabase und Firebase in unserem Backend-Vergleich, bevor du dich festlegst. - Course 3 Lektion: Convex, deine reaktive Datenbank. Entwirf die API und das Schema vor der UI, wie der BizCollect-Build gelernt hat. ## Schritt 4: Kunden mit Stripe abrechnen Ein SaaS ist ein Business, also braucht es Payments, und Stripe ist der Standard für Checkout, Subscriptions und die Webhooks, die deine App mit dem synchron halten, was ein Kunde tatsächlich bezahlt hat. Der Ablauf hat zwei Hälften. Erst Checkout und Subscriptions: Du erstellst Products und Prices, schickst den Kunden zu Stripe zum Zahlen und bringst ihn zurück. Dann die Webhooks: Stripe sagt deinem Backend, wenn eine Zahlung erfolgreich ist, eine Subscription erneuert oder eine Karte fehlschlägt, und dein Code aktualisiert den User-Datensatz entsprechend. Die Falle, in die Einsteiger tappen, ist, den Redirect als Source of Truth zu behandeln; der Webhook ist es. Geh immer sicher mit Secrets um und halte deine Stripe-Keys aus dem Frontend-Code und aus Git heraus. Der Modern App Stack Kurs behandelt Stripe in zwei Lektionen: Checkout und Subscriptions, dann Webhooks, Proration und Coupons. - Stripe übernimmt Checkout, Subscriptions und die Billing-Edge-Cases, die du nicht selbst bauen solltest. - Webhooks, nicht der Redirect, sind die Source of Truth dafür, was ein Kunde bezahlt hat. - Halte Stripe-Secret-Keys im Backend und aus der Versionskontrolle heraus. - Course 3 Lektionen: Stripe Teil 1 (Checkout, Subscriptions) und Stripe Teil 2 (Webhooks, Proration, Coupons). ## Schritt 5: liefere es aus Die letzte Stufe ist die, die Einsteiger aufschieben und früh machen sollten: die App von deiner Maschine ins öffentliche Internet zu bringen, in Production, mit echten Keys. Das heisst, jeden Service (Auth, Datenbank, Payments) von seinem Entwicklungsmodus in Production zu bewegen, Umgebungsvariablen und Secrets korrekt zu behandeln, deine Domain aufzusetzen und die Seite bei der Search Console einzureichen, damit sie gefunden werden kann. Ausliefern ist kein einmaliges Ereignis am Ende; es ist ein Loop, den du vom leeren Scaffold an laufen lassen solltest, damit der Livegang langweilig statt furchteinflössend ist. Der Modern App Stack Kurs schliesst mit genau dem: der Dev-zu-Production-Migration, Search Console und Performance. Sobald es live ist, steuerst du den Agent, um Features genauso hinzuzufügen, wie du das Skelett gebaut hast, und verifizierst jede Änderung, bevor sie ausgeliefert wird. - Bewege Auth, Datenbank und Payments vom Entwicklungs- in den Production-Modus mit echten Keys. - Behandle Secrets und Umgebungsvariablen korrekt; committe nie Keys. - Setze deine Domain auf und reiche die Seite bei der Search Console ein, damit sie gefunden wird. - Course 3 Lektion: Livegang, die Dev-zu-Prod-Migration, Search Console und Performance. ## Steuere den Agent, vibe ihn nicht nur Ein SaaS mit KI zu bauen ist der klarste Fall für Agentic Engineering statt Vibe Coding. Ein Wochenend-Prototyp kann gevibet werden, aber ein Produkt mit echten Usern, ihren Daten und ihrem Geld kann es nicht: Ein stiller Bug in deinem Stripe-Webhook oder eine ungeschützte Convex-Query ist die Art Fehler, die Vertrauen oder Geld kostet. Also steuerst du den Agent und verifizierst seine Arbeit: plane, bevor er editiert, lies die Diffs bei allem, was Auth, Daten oder Payments berührt, und halte ein Quality Gate (Lint, Types, Tests) grün. Dieselben Agenten, die einen fragilen Haufen produzieren, wenn du alles ungeprüft annimmst, produzieren ein wartbares SaaS, wenn du der Engineer of Record bleibst. Echte Produkte werden so gebaut; der CallAssistant-Build ist ein funktionierendes SaaS, ausgeliefert auf genau dieser Disziplin, und der Pillar Was ist Agentic Engineering erklärt die Denkweise vollständig. - Vibe einen Prototyp; steuere und verifiziere alles mit echten Usern, Daten oder Payments. - Plane vor dem Editieren und lies jeden Diff, der Auth, Daten oder Geld berührt. - Halte ein Quality Gate grün, damit keine Regression in Production rutschen kann. - Siehe den CallAssistant-Build für ein ausgeliefertes SaaS und den Pillar Was ist Agentic Engineering für die Disziplin. ## Schritte ### 1. Das Projekt scaffolden Enge die Idee auf einen Kern-Job ein, dann lass deinen Coding-Agent Framework, Git und einen Dev-Server aufsetzen. Füge eine CLAUDE.md mit deinem Stack und deinen Konventionen hinzu und bring eine leere App lokal zum Laufen. ### 2. Authentifizierung hinzufügen Verdrahte einen Auth-Provider (Clerk per Default) für Signup, Login und OAuth und schütze die Routes und Daten, die einen eingeloggten User brauchen. Bau Login nie von Grund auf. ### 3. Deine Daten modellieren Definiere dein Schema und schreib Lese- und Schreibfunktionen in einer reaktiven Datenbank wie Convex, sodass das Frontend live Ergebnisse abonniert. Entwirf die Datenform vor der UI. ### 4. Payments hinzufügen Setze Stripe-Products und -Prices auf, füge Checkout und Subscriptions hinzu und behandle Webhooks als Source of Truth dafür, was ein Kunde bezahlt hat. Halte Secret-Keys im Backend. ### 5. In Production ausliefern Bewege Auth, Datenbank und Payments in den Production-Modus mit echten Keys, behandle Secrets korrekt, verbinde deine Domain und reiche die Seite bei der Search Console ein. ### 6. Iteriere, indem du den Agent steuerst Füge Features so hinzu, wie du das Skelett gebaut hast: plane vor dem Editieren, lies die Diffs bei allem, was Auth, Daten oder Payments berührt, und halte dein Quality Gate vor jedem Ausliefern grün. ## Häufige Fragen ### Wie baue ich ein SaaS mit KI? Steuere einen AI-Coding-Agent über einen bewährten Stack: scaffolde die App mit einem Framework, füge Authentifizierung mit einem Provider wie Clerk hinzu, speichere Daten in einer reaktiven Datenbank wie Convex, rechne Kunden mit Stripe ab und liefere in Production aus. Du wählst die Teile, verdrahtest sie sauber und verifizierst, was der Agent baut. ### Welchen Stack sollte ich 2026 nutzen, um ein SaaS zu bauen? Ein Solo-Founder-Default ist ein modernes App-Framework, Clerk für Authentifizierung, Convex für die reaktive Datenbank und Stripe für Payments, mit einem Coding-Agent, der den Build steuert. Du brauchst nicht genau diese Tools, aber eine gute Wahl in jedem Slot: Framework, Auth, Datenbank und Payments. ### Kann ich ein SaaS bauen, ohne Code von Hand zu schreiben? Du kannst das meiste bauen, indem du einen Agent steuerst, aber du solltest es nicht ungeprüft ausliefern. Ein SaaS behandelt echte User, Daten und Geld, also brauchst du genug Verständnis, um die Arbeit zu planen, Diffs bei Auth, Daten und Payments zu lesen und zu verifizieren, was der Agent gebaut hat. Das ist Agentic Engineering, nicht Vibe Coding. ### Soll ich Clerk, Auth0 oder Supabase Auth nutzen? Alle drei sind solide. Clerk ist schnell zu integrieren und passt sauber zu diesem Stack, Auth0 ist der enterprise-taugliche Platzhirsch, und Supabase Auth passt, wenn du schon auf Supabase bist. Das Prinzip zählt mehr als die Marke: Delegiere Auth an einen Provider, statt sie zu bauen. Siehe unseren Vergleich Clerk vs Auth0 vs Supabase Auth. ### Warum Convex statt Supabase oder Firebase? Convex ist reaktiv: Queries aktualisieren die UI automatisch, wenn sich Daten ändern, also schreibst du weniger Synchronisations-Code, was echte Hebelwirkung für ein kleines Team ist. Supabase (Postgres-basiert) und Firebase sind starke Alternativen mit anderen Trade-offs. Unser Vergleich Convex vs Supabase vs Firebase legt dar, was zu welchem Projekt passt. ### Brauche ich Stripe-Webhooks, oder reicht Checkout? Du brauchst Webhooks. Der Redirect nach der Zahlung ist keine zuverlässige Source of Truth, denn ein User kann den Tab schliessen, und Subscriptions erneuern oder fehlschlagen später ohne jeden Redirect. Stripe-Webhooks sagen deinem Backend, was tatsächlich passiert ist, damit deine App synchron bleibt. Der Modern App Stack Kurs behandelt Webhooks, Proration und Coupons.