Wie Coderblock aus einem einzigen Prompt eine Full-Stack-Web-App macht

Eine App kann mit einem einzigen Satz beginnen. Doch um aus diesem Satz ein funktionsfähiges Produkt zu machen, braucht es weit mehr: eine Benutzeroberfläche, Anwendungslogik, persistente Daten, Authentifizierung, Berechtigungen, Dateien, Zahlungen und Infrastruktur.

Mit Coderblock werden diese Ebenen nicht getrennt voneinander entwickelt. Du beschreibst, was du erstellen möchtest, und die Plattform generiert eine echte Full-Stack-Web-App, die du direkt in einer Live-Entwicklungsumgebung testen kannst. Von diesem Moment an wird der Chat zu deinem Arbeitsbereich: Du siehst, was erstellt wurde, kannst es ausprobieren und weiter verändern, indem du einfach das gewünschte Ergebnis beschreibst.

Der erste Prompt ist daher keine endgültige Spezifikation. Er ist der Beginn eines Gesprächs mit deinem Produkt.

Am Anfang steht die Produktbeschreibung

Der erste Prompt muss nicht alle Antworten enthalten. Er sollte dem Agenten genügend Kontext geben, um zu verstehen, was du für wen entwickelst und welche Abläufe am wichtigsten sind. Zum Beispiel:

Erstelle eine Buchungsplattform für ein kleines Fitnessstudio. Besucher sollen Kurse ansehen, ein Konto erstellen, einen Platz buchen und ihre zukünftigen Buchungen einsehen können. Das Personal benötigt ein Admin-Dashboard, um Kurse und Anwesenheiten zu verwalten.

Schon diese wenigen Zeilen enthalten mehrere miteinander verbundene Elemente: einen öffentlichen Katalog, Benutzerkonten, Buchungen, persönliche Bereiche und eine Administratorrolle. Coderblock nutzt diese Informationen, um die Anwendung End-to-End zu erstellen – vom Frontend bis zum Backend. Wenn du schneller starten möchtest, kannst du außerdem eine von 32 verfügbaren Produktvorlagen auswählen. Sie decken Szenarien wie E-Commerce, Buchungen, Dashboards, Wellness und Gaming ab. Mit mehr als 20 Funktionsvorlagen lassen sich zudem häufig benötigte Elemente wie Authentifizierung, Zahlungen, Warenkörbe, Chats und Admin-Bereiche schnell hinzufügen.

Die Vorlage bietet dir eine konkrete Grundlage. Im Chat machst du daraus deine eigene Version des Produkts.

Von der Beschreibung zur Benutzeroberfläche – in wenigen Sekunden

Coderblock generiert das Frontend mit React, Vite, TypeScript und Tailwind CSS und stellt es sofort unter einer eigenen Entwicklungsadresse bereit: <app>.coderblock.dev. Hier wird aus deiner Idee etwas, das du sehen und tatsächlich benutzen kannst.

Sobald ein Produkt Gestalt annimmt, lassen sich viele Entscheidungen leichter treffen. Ein Dashboard kann alle erforderlichen Funktionen enthalten, aber eine unklare visuelle Hierarchie haben. Eine Tabelle kann funktionieren, auf Mobilgeräten jedoch zu überladen wirken. Ein Ablauf kann grundsätzlich richtig sein, aber einen Schritt zu viel erfordern.

Statt zum ursprünglichen Briefing zurückzukehren, setzt du einfach das Gespräch fort:

• Fixiere die Navigationsleiste und füge ein Menü für Mobilgeräte hinzu.
• Zeige auf der Karte jedes Kurses die noch verfügbaren Plätze an.
• Füge Filter für Trainer und Schwierigkeitsgrad hinzu.
• Erstelle für das Personal eine Wochenansicht der Anwesenheiten.
• Verwende eine ruhigere Farbpalette und erhöhe den Kontrast der Formulare.

Dank Hot Reload wird die Vorschau innerhalb weniger Sekunden aktualisiert.

Das Ergebnis ist ein sehr einfacher Kreislauf: beschreiben → ansehen → testen → ändern

Mit jedem Schritt nähert sich das Produkt ein wenig mehr deiner ursprünglichen Vorstellung.

Wenn aus der Benutzeroberfläche eine echte App wird

An diesem Punkt arbeitest du nicht mehr nur an einer Benutzeroberfläche.

Ein echtes Produkt benötigt persistente Daten, Benutzer, Berechtigungen und Backend-Logik. Deshalb verbindet Coderblock das Frontend bei Standard-Web-Apps mit einem eigenen Supabase-Projekt, das Postgres, Supabase Auth, Storage, Row Level Security und Deno Edge Functions umfasst.

Der Agent kann das Datenbankschema direkt auf Grundlage des Gesprächs entwerfen und aktualisieren. Beim Fitnessstudio könnte er das Produkt beispielsweise in Entitäten wie Kurse, Kalender, Profile und Buchungen übersetzen und die erforderlichen Beziehungen zwischen ihnen definieren.

Du kannst dabei weiterhin ausschließlich in Produktanforderungen denken.

Füge eine Warteliste hinzu, wenn ein Kurs ausgebucht ist, und erlaube dem Personal, die nächste Person aufzunehmen, sobald ein Platz frei wird.

Diese Anforderung verändert nicht nur eine einzelne Ansicht. Sie kann neue Daten, Regeln und Verhaltensweisen erfordern. Coderblock behandelt diese Änderungen als Teil derselben Anwendung, ohne dass du API-Routen oder Migrationen manuell konfigurieren musst.

Im Tab Backend des Editors kannst du dennoch sehen, was im Hintergrund geschieht: Tabellen, authentifizierte Benutzer, Storage und Funktionen. Für Enterprise-Web-Platform-Projekte verwendet Coderblock stattdessen eine Backend-Architektur auf Basis von Python, FastAPI und Neon Postgres.

Der Datenzugriff richtet sich nach der Benutzeridentität

Sobald Konten und persönliche Daten vorhanden sind, wird eine weitere grundlegende Frage wichtig: Wer darf was sehen? Auch das kannst du direkt im Gespräch beschreiben:

Füge eine Anmeldung und Benutzerkonten mit getrennten Zugriffsrechten für Kunden und Personal hinzu.

Coderblock kann Supabase Auth, Registrierungs- und Anmeldeseiten, Sitzungsverwaltung sowie geschützte Routen konfigurieren. Auf Wunsch lässt sich auch Social Login hinzufügen. Jede App enthält bereits eine Profiltabelle und eine grundlegende Rollenstruktur, mit der der Agent unterschiedliche Erlebnisse für Kunden, Mitarbeitende und Administratoren erstellen kann.

Die Authentifizierung eines Benutzers allein reicht jedoch nicht aus. Die Zugriffsregeln müssen bis auf die Datenebene reichen. Mit Row Level Security kannst du beispielsweise sicherstellen, dass Kunden ausschließlich ihre eigenen Buchungen sehen, während das Personal Zugriff auf die Verwaltungsansicht hat.

Du musst daher weder selbst ein JWT-System entwickeln noch Passwörter mit eigener Logik verwalten oder separate Tabellen für Zugangsdaten erstellen. Supabase Auth übernimmt die Identitätsverwaltung, während Richtlinien festlegen, was einzelne Benutzer mit den Daten tun dürfen.

Auch Zahlungen beginnen im Chat

Wenn dein Produkt bereit für die Monetarisierung ist, musst du nicht das Tool wechseln. Du fügst einfach eine neue Anforderung hinzu:

Ermögliche Mitgliedern, 9,99 € pro Monat zu bezahlen.

Coderblock kann den gesamten Stripe-Ablauf verwalten: Produkte, Preise, Checkout, Benutzeroberfläche und Backend-Logik. Im standardmäßig verwalteten Modus richtet der Agent ein Stripe-Konto für das Projekt ein, nachdem er einige grundlegende Informationen wie das Land und den Unternehmensnamen abgefragt hat. API-Schlüssel sind nicht erforderlich, und die Plattform verwaltet den Zahlungs-Webhook. Die Einrichtung für den Zahlungsempfang und die Identitätsprüfung können später über den vom Agenten bereitgestellten, von Stripe gehosteten Link abgeschlossen werden.

Wenn du stattdessen dein eigenes Stripe-Konto verwenden möchtest, kannst du den BYOK-Modus auswählen. In diesem Fall fordert Coderblock STRIPE_SECRET_KEY über eine sichere Eingabeaufforderung für Umgebungsvariablen an und konfiguriert den Webhook automatisch. Das Secret verbleibt auf dem Server und wird weder in den generierten Code noch in den Chat eingefügt. Derselbe Ansatz kommt bei anderen Integrationen zum Einsatz, die Zugangsdaten benötigen. Anwendungen können über Coderblock AI Gateway außerdem KI-Funktionen integrieren. Das Gateway ist mit OpenAI kompatibel, verwendet einen projektspezifischen API-Schlüssel und erfasst die Nutzung verbrauchsabhängig.

Wenn das Projekt wächst, kommen Agent Teams ins Spiel

Je komplexer eine App wird, desto mehr Bereiche sind von einzelnen Entscheidungen betroffen.

Ein neues Admin-Dashboard kann gleichzeitig Änderungen am Frontend, an der Datenbank, an den Berechtigungen und an der Sicherheit erfordern. Eine neue Funktion kann Auswirkungen auf die UX und darauf haben, wie Benutzer mit dem Produkt interagieren.

Dafür bietet Coderblock Agent Teams: KI-Agenten, die auf Bereiche wie Frontend, Backend, UX, Sicherheit und Marketing spezialisiert sind. Du kannst sie innerhalb des Projekts hinzuziehen, um bestimmte Aspekte zu bearbeiten, ohne den Anwendungskontext zu verlieren. Der Vorteil besteht nicht einfach darin, mehr Agenten zu haben. Vielmehr behältst du eine einheitliche Produktsicht bei, während unterschiedliche Probleme mit spezialisiertem Fachwissen gelöst werden.

Der ursprüngliche Prompt wird somit nie zu einem unveränderlichen Dokument. Er bleibt der Ausgangspunkt eines Gesprächs, das sich gemeinsam mit der App weiterentwickelt.

Von der Entwicklungsumgebung in die Produktion

Wenn das Produkt fertig ist, ist auch der Schritt von der Vorschau in die Produktion unkompliziert. Mit Publish wird die App unter <app>.coderblock.app bereitgestellt – SSL inklusive. Für spätere Veröffentlichungen stehen schnelle Hot Updates zur Verfügung. So kannst du das Produkt kontinuierlich verbessern, ohne den Deployment-Prozess jedes Mal neu aufzusetzen. Wenn du eine eigene Domain verwenden möchtest, kannst du sie unter Settings → Domains verbinden und dem Assistenten zur DNS-Konfiguration folgen. Alternativ kannst du die Domain direkt in Coderblock kaufen: Checkout, DNS und SSL werden vollständig innerhalb der Plattform verwaltet. Für Teams, die Coderblock in ihren bestehenden Entwicklungsworkflow integrieren möchten, ist außerdem eine GitHub-Integration verfügbar.

Ein Gespräch wird zum Produkt

Der Prozess beginnt mit einer Beschreibung, endet aber nicht mit der ersten Generierung.

Beschreibe die Idee. Sieh zu, wie sie Gestalt annimmt. Teste die App. Füge weiteren Kontext hinzu. Optimiere sie. Veröffentliche sie.

Das ist das Modell der dialogbasierten Entwicklung mit Coderblock. Der Wert eines Prompts liegt nicht darin, vor dem Start jedes Detail der Anwendung vorherzusehen. Entscheidend ist, der KI genügend Kontext zu geben, um eine erste funktionsfähige Version zu erstellen – und genügend Flexibilität zu bewahren, um sie gemeinsam mit dir weiterzuentwickeln.

Mit anderen Worten: Du musst nicht alles entwerfen, bevor du mit der Entwicklung beginnst. Du kannst entwickeln, ansehen und während des Prozesses entscheiden.