Fallstudie
Fenado AI
Agentische KI-Plattform, die Texteingaben in funktionale Webanwendungen verwandelt.
50K
Nutzer generieren Apps
Full-Stack
Output aus einer Eingabe
Echtzeit
WebSocket-Generierung
Die Herausforderung
Eine KI, die Code schreibt, nicht Fragmente
Die meisten KI-Code-Tools erzeugen Bruchstuecke. Eine Funktion hier, eine Komponente dort. Fenados Gruender wollte etwas anderes: eine Plattform, bei der ein Nutzer "baue mir ein Lagerverwaltungssystem" eingibt und eine funktionierende Anwendung mit React-Frontend, FastAPI-Backend, MongoDB-Datenbank und JWT-Authentifizierung erhaelt. Kein manuelles Verdrahten. Kein Copy-Paste-Zusammenbau.
Das technische Problem hatte drei Ebenen. Erstens musste der KI-Agent eine vage Eingabe in spezifische Bildschirme, Datenmodelle und API-Routen zerlegen. Zweitens musste jeder Bildschirm in Echtzeit ueber WebSockets gerendert werden, damit Nutzer ihre Anwendung entstehen sehen konnten. Drittens musste der Output kompilieren und laufen. Fehlerhafte Imports oder fehlende Abhaengigkeiten haetten das Vertrauen bei der ersten Generierung zerstoert.
Das Geschaeftsmodell erforderte Stripe-Abo-Abrechnung in drei Stufen ($199/Monat, $1.999/Monat, $9.999/Monat), Teamzusammenarbeit mit Budget-Kontrollen pro Mitglied und eine macOS-Desktop-App fuer lokale Entwicklung. All das musste als ein Produkt ausgeliefert werden.
Was wir gebaut haben
Eingabe rein. Anwendung raus.
Agentische KI-Pipeline mit LangChain
Ein Nutzer gibt eine Texteingabe ein. LangChain-Agenten zerlegen diese Eingabe in einen strukturierten Plan: Bildschirme, Datenmodelle, API-Endpunkte und Komponentenhierarchie. Jeder Agent behandelt ein Anliegen. Der Planner-Agent bildet die Anwendungsarchitektur ab. Der Designer-Agent generiert Bildschirm-Layouts. Der Code-Agent schreibt React-Komponenten und FastAPI-Routen. Die Agenten koordinieren sich ueber einen gemeinsamen Zustandsgraphen und leiten Artefakte weiter, ohne erneut abzufragen.
Echtzeit-Generierung ueber WebSockets
Nutzer sehen ihre Anwendung im Browser entstehen. Sobald jeder LangChain-Agent einen Schritt abschliesst, sendet der Server das Ergebnis ueber eine WebSocket-Verbindung. Bildschirmdesigns erscheinen nacheinander. Code-Dateien streamen in den Projektbaum. Fortschrittsanzeigen zeigen, welcher Agent aktiv ist und was er produziert. Diese Feedbackschleife verwandelte eine 60-Sekunden-Wartezeit in ein fesselndes Build-Erlebnis, das Nutzer auf der Seite hielt.
Full-Stack-Anwendungs-Output
Jede generierte Anwendung wird mit einem React 19-Frontend mit shadcn/ui-Komponenten, einem FastAPI-Backend mit MongoDB und integrierter JWT-Authentifizierung ausgeliefert. Das Template-System erzwingt konsistente Projektstruktur: API-Routen folgen RESTful-Konventionen, Datenbankmodelle enthalten Validierung, und das Frontend verbindet sich ueber typisierte API-Clients mit dem Backend. Nutzer laden das Projekt herunter oder deployen es, und es laeuft mit einem einzigen Befehl.
Stripe-Abrechnung und Teamzusammenarbeit
Drei Stripe-Abo-Stufen steuern den Zugang: Business fuer $199/Monat, Business Plus fuer $1.999/Monat und Business Express fuer $9.999/Monat. Jede Stufe legt Generierungslimits und Feature-Gates fest. Teambesitzer laden Mitglieder per E-Mail ein, weisen Pro-Mitglied-Budgets zu und verfolgen die Generierungsnutzung in der Organisation. Stripe-Webhooks verarbeiten Upgrades, Downgrades und fehlgeschlagene Zahlungen ohne manuellen Eingriff.
Plattform-Infrastruktur
- Bildschirm-fuer-Bildschirm KI-Designgenerierung. Der Planner-Agent bildet jeden Bildschirm ab, bevor der Code-Agent ihn schreibt, sodass der Output einer kohaerenten visuellen Hierarchie folgt.
- macOS-Desktop-App fuer lokale Entwicklung. Nutzer generieren Anwendungen im Browser, oeffnen sie dann in der Desktop-App, um sie zu bearbeiten, auszufuehren und von ihrem Rechner aus zu deployen.
- Firebase-Authentifizierung mit rollenbasierter Zugriffskontrolle, die einzelne Nutzer von Teambesitzern und Organisationsmitgliedern trennt.
- Template-System mit bewussten Vorgaben: FastAPI + MongoDB im Backend, React 19 + shadcn/ui im Frontend und JWT-Authentifizierung vorverdrahtet ueber beide Schichten.
Architektur
Wie die Pipeline funktioniert
Schritt 1
Eingabeerfassung
Der Nutzer beschreibt in einfachem Text, was er moechte. Der Planner-Agent parst die Eingabe in eine strukturierte Spezifikation: Bildschirmanzahl, Datenentitaeten, Beziehungen und Authentifizierungsanforderungen.
Schritt 2
Bildschirmdesign
Der Designer-Agent generiert Bildschirm-fuer-Bildschirm-Layouts. Jeder Bildschirm wird einer Route in der fertigen Anwendung zugeordnet. Komponentenplatzierung, Datenbindungen und Navigationsfluss werden definiert, bevor Code geschrieben wird.
Schritt 3
Code-Generierung
Der Code-Agent schreibt React-Komponenten, FastAPI-Routen, MongoDB-Modelle und JWT-Middleware. Jede Datei wird ueber WebSockets an den Client gestreamt, sobald sie fertig ist. Der Output folgt den Konventionen des Template-Systems.
Schritt 4
Ausgabe
Das zusammengestellte Projekt umfasst ein funktionierendes Frontend, Backend, Datenbankschema und eine Authentifizierungsschicht. Nutzer laden das Projekt herunter oder oeffnen es in der macOS-Desktop-App. Die Anwendung laeuft mit einem einzigen Befehl.
Ergebnisse
Produktionszahlen
50K
Nutzer generieren funktionale Webanwendungen
Full-Stack
Frontend + Backend + API aus einer einzigen Eingabe
3 Stufen
Stripe-Abo-Plaene von $199 bis $9.999/Monat
Kontakt
Gespraech starten
Erzaehlen Sie uns von Ihrem Projekt. Wir antworten innerhalb von 24 Stunden mit einem klaren Plan, geschaetztem Zeitrahmen und Preisrahmen.
Standort
VAE & Indien
Nachricht erhalten
Wir prüfen Ihr Projekt und melden uns innerhalb von 24 Stunden.
Sie erreichen uns auch unter hello@savibm.com