Frontend vs. Backend: Was ein AI-App-Builder wirklich generiert

Eine Benutzeroberfläche ist noch keine App

AI-App-Builder können eine einfache Beschreibung innerhalb weniger Minuten in eine funktionsfähige Benutzeroberfläche verwandeln.

Doch was bedeutet es wirklich, wenn wir sagen, eine AI habe „eine App erstellt“? Nicht alle Builder liefern dieselbe Art von Ergebnis. Manche generieren hauptsächlich die Benutzeroberfläche: Seiten, Schaltflächen, Formulare und visuelle Komponenten, mit denen sich eine Idee erkunden oder ein Prototyp erstellen lässt. Andere erzeugen zusätzlich den Code, der die Oberfläche mit echten Daten und externen Diensten verbindet.

Ein Full-Stack-Builder muss sich dagegen um deutlich mehr kümmern: Frontend, Backend, Datenbank, Authentifizierung, Berechtigungen und Bereitstellung. Der Unterschied zwischen Frontend und Backend ist daher entscheidend, um zu beurteilen, was ein AI-Builder tatsächlich erstellt hat. Außerdem hilft dieses Verständnis dabei, bessere Prompts zu schreiben und mögliche Lücken zu erkennen, bevor ein Projekt in Produktion geht.

Was das Frontend generiert

Das Frontend umfasst alles, was Nutzer im Browser sehen und womit sie direkt interagieren.

Dazu können gehören:

• Seiten, Menüs, Formulare, Schaltflächen, modale Fenster und Tabellen;
• responsive Layouts für Desktop und Mobilgeräte;
• Validierung der von Nutzern eingegebenen Daten;
• Lade-, Fehler-, Erfolgs- und Leerzustände;
• Aufrufe von Backend-Diensten;
• sitzungsbezogene Elemente wie Kontomenüs und Einstellungen;
• lokaler Zustand der Benutzeroberfläche, etwa ein ausgewählter Filter oder ein geöffnetes Fenster.

In Coderblock verwenden die generierten Frontends React, Vite, TypeScript und Tailwind CSS. Stell dir zum Beispiel vor, du möchtest eine Plattform zur Buchung von Dienstleistungen erstellen. Das Frontend könnte einen Dienstleistungskatalog, einen Verfügbarkeitskalender, ein Buchungsformular, einen persönlichen Kundenbereich und ein Admin-Dashboard generieren.

Auf den ersten Blick könnte das bereits wie ein vollständiges Produkt wirken. Es gibt jedoch einen wichtigen Unterschied: Eine Benutzeroberfläche kann funktionsfähig aussehen, ohne tatsächlich funktionsfähig zu sein. Eine Schaltfläche kann auf einen Klick reagieren, ohne Daten zu speichern. Ein Dashboard kann Informationen anzeigen, die direkt im Code hinterlegt sind. Ein Formular kann eine Erfolgsmeldung ausgeben, ohne wirklich eine Buchung erstellt zu haben.

All das ist für einen Prototyp nützlich, entspricht aber noch keiner einsatzbereiten Anwendung.

Frontend-Validierung reicht nicht aus

Ein einfaches Beispiel: Ein Buchungsformular könnte verhindern, dass Nutzer ein Datum in der Vergangenheit auswählen. Das ist eine sinnvolle Regel für die Benutzerfreundlichkeit, aber keine Sicherheitsmaßnahme.

Regeln, die im Browser angewendet werden, lassen sich verändern oder umgehen. Deshalb muss das Backend die Anfrage erneut prüfen, bevor es sie akzeptiert und speichert. Dasselbe gilt für Preise, Berechtigungen, Bestände, Benutzerrollen und Abonnements. Das Frontend übermittelt, was der Nutzer tun möchte. Das Backend entscheidet, ob der Vorgang tatsächlich ausgeführt werden darf.

Was das Backend generiert

Wenn das Frontend der sichtbare Teil der App ist, übernimmt das Backend die Daten, Regeln und Vorgänge, die nicht vom Browser abhängig sein dürfen.

Ein vollständiges Backend kann sich um Folgendes kümmern:

• Tabellen, Spalten, Beziehungen und Indizes der Datenbank;
• Authentifizierung und Sitzungsverwaltung;
• Berechtigungen für unterschiedliche Nutzer und Rollen;
• serverseitige Validierung und Geschäftslogik;
• Dateispeicherung;
• Integrationen mit Zahlungs- oder AI-Diensten;
• Funktionen, die Anmeldedaten und private Informationen verwenden.

In den standardmäßigen Web-Apps von Coderblock erhält jedes Projekt eine eigene Supabase-Umgebung mit Postgres, Supabase Auth, Storage und Deno Edge Functions. Projekte der Enterprise Web Platform verwenden stattdessen Python und FastAPI sowie eine Neon Postgres-Datenbank.

Die Datenbank entsteht im Gespräch

Einer der Vorteile eines AI-App-Builders besteht darin, dass du das Datenbankschema nicht unbedingt von Hand erstellen musst. Stattdessen kannst du direkt im Prompt beschreiben, was du benötigst.

Zum Beispiel:

„Füge Buchungen mit Kunde, Dienstleistung, Startzeit, Status und Gesamtpreis hinzu. Kunden dürfen nur ihre eigenen Buchungen sehen, während Administratoren alle Buchungen einsehen können.“

Auf Grundlage einer solchen Anfrage kann der Agent die erforderlichen Tabellen und Beziehungen entwerfen, sie mit der Benutzeroberfläche verbinden und die Zugriffsregeln konfigurieren. Genau hier zeigt sich der Unterschied zwischen dem Generieren einer Benutzeroberfläche und dem Erstellen einer echten Anwendung: Daten dürfen nicht nur angezeigt werden. Sie müssen strukturiert und dauerhaft gespeichert sein und den festgelegten Produktregeln entsprechen.

Authentifizierung: Eine Anmeldeseite allein reicht nicht

Eine Seite mit E-Mail-Adresse, Passwort und einer „Anmelden“-Schaltfläche ist noch kein Authentifizierungssystem. Eine vollständige Authentifizierung erfordert außerdem:

• Sitzungsverwaltung;
• geschützte Routen;
• Berechtigungen;
• Kontrolle des Datenbankzugriffs;
• sichere Verwaltung von Anmeldedaten und Kontoinformationen.

Wenn du Coderblock bittest, Konten und Authentifizierung hinzuzufügen, konfiguriert der Agent Supabase Auth mit Registrierung und Anmeldung, Authentifizierung per E-Mail-Adresse und Passwort, Sitzungsverwaltung, geschützten Routen und Row Level Security (RLS) von Postgres. Du kannst außerdem die Anmeldung über soziale Netzwerke anfordern. Die Apps enthalten darüber hinaus eine eigene Profiltabelle und eine grundlegende Struktur zur Verwaltung von Rollen.

Du musst also weder manuell eine Passworttabelle anlegen noch die AI bitten, JWT und Hashing von Grund auf zu implementieren. Supabase Auth übernimmt die Authentifizierung, während Row Level Security festlegt, welche Daten einzelne Nutzer tatsächlich sehen oder ändern dürfen.

Frontend und Backend: So arbeiten sie zusammen

Um den Unterschied wirklich zu verstehen, betrachten wir den Ablauf einer Buchung.

1. Der Nutzer füllt das React-Formular mit Dienstleistung, Datum und Uhrzeit aus.
2. Das Frontend prüft, ob die eingegebenen Daten gültig sind.
3. Die App sendet die Anfrage an das Backend.
4. Das Backend überprüft die Identität des Nutzers und validiert die Daten erneut.
5. Postgres speichert die Buchung, sofern die Anfrage autorisiert ist.
6. Das Frontend erhält die Antwort und aktualisiert die Benutzeroberfläche.

Jede Ebene hat somit eine andere Aufgabe. Das Frontend muss schnell, übersichtlich und reaktionsfähig sein. Das Backend muss zuverlässig, sicher und konsistent arbeiten.

Und was ist mit Zahlungen?

Hier gilt dasselbe Prinzip. Die „Checkout“-Schaltfläche gehört zum Frontend. Preise, Transaktionen und Zahlungszugangsdaten dürfen jedoch nicht direkt im Browser verarbeitet werden. In Coderblock kannst du Zahlungen über den Chat konfigurieren. Nachdem der Agent Angaben wie das Land und den Namen des Unternehmens abgefragt hat, kann er ein verwaltetes Stripe-Konto erstellen, ohne dass Nutzer API-Schlüssel manuell konfigurieren müssen. Die Plattform verwaltet auch den Webhook. Alternativ kannst du dein eigenes Stripe-Konto über eine sichere Anfrage für eine Umgebungsvariable verbinden.

In beiden Fällen verbleiben vertrauliche Informationen in der Serverumgebung des Projekts und werden weder in den Frontend-Code noch in die Unterhaltung eingefügt.

UI-Generator oder Full-Stack-AI-Builder?

Nicht jedes Projekt benötigt denselben Umfang an Infrastruktur.

Ein UI-Generator kann ideal sein, um ein Design zu erkunden, eine Idee in einen Prototyp zu verwandeln oder eine statische Landingpage zu erstellen. In diesen Fällen müssen Datenbank, Authentifizierung und Berechtigungssysteme nicht sofort umgesetzt werden.

Anders sieht es aus, wenn du ein Produkt erstellen möchtest, das echte Daten und Nutzer verwalten muss. Ein Full-Stack-AI-App-Builder ist besonders hilfreich, wenn die App Folgendes benötigt:

• dauerhaft gespeicherte Daten;
• Konten und Authentifizierung;
• private Informationen;
• Rollen und Berechtigungen;
• Zahlungen;
• Datei-Uploads;
• Admin-Dashboards;
• Integrationen mit externen Diensten.

Um zu verstehen, was du tatsächlich generiert hast, solltest du dich daher nicht mit der Frage „Sieht die Benutzeroberfläche vollständig aus?“ zufriedengeben. Stelle dir stattdessen folgende Fragen:

• Gibt es eine echte Datenbank?
• Werden die Daten tatsächlich gespeichert?
• Sehen Nutzer nur die Daten, auf die sie zugreifen dürfen?
• Werden sensible Vorgänge serverseitig ausgeführt?
• Sind private Zugangsdaten geschützt?
• Gibt es einen konkreten Weg von der Vorschau bis zur Produktion?

In Coderblock werden Frontend und Backend gemeinsam generiert. Du kannst die App in Echtzeit über eine eigene Entwicklungsumgebung auf coderblock.dev ansehen. Im Bereich Backend lassen sich zudem Tabellen, authentifizierte Nutzer, Speicher und Funktionen überprüfen. So bewertest du nicht nur, was auf dem Bildschirm erscheint, sondern auch die Technik, die diese Benutzeroberfläche überhaupt ermöglicht.

So schreibst du bessere Prompts für einen AI-App-Builder

Die Qualität des Ergebnisses hängt auch davon ab, wie klar du das erwartete Verhalten der App beschreibst.

Definiere Rollen und Dateneigentum

Schreibe nicht einfach nur:

„Erstelle eine App zur Aufgabenverwaltung.“

Lege fest, wer die App nutzt und welche Daten diese Personen sehen oder ändern dürfen. Zum Beispiel:

„Mitglieder dürfen ihre eigenen Aufgaben erstellen und bearbeiten. Manager dürfen alle Aufgaben ihres Teams sehen.“

Eine präzisere Anfrage liefert dem Agenten die notwendigen Informationen, um sowohl die Benutzeroberfläche als auch die Zugriffsregeln zu entwerfen.

Beschreibe den Lebenszyklus der Daten

Gib an, was mit jedem Element der App geschehen kann. Kann es erstellt, bearbeitet, archiviert oder gelöscht werden? Definiere außerdem Pflichtfelder, Beziehungen zwischen Daten, Statusänderungen und das erwartete Verhalten, wenn ein verknüpfter Datensatz gelöscht wird.

Berücksichtige auch Fehlerszenarien

Eine App darf nicht nur dann funktionieren, wenn alles nach Plan läuft. Im Prompt kannst du auch festlegen, was geschehen soll, wenn:

• eine Zahlung fehlschlägt;
• ein Nutzer nicht über die erforderlichen Berechtigungen verfügt;
• eine Anfrage fehlschlägt;
• keine Daten angezeigt werden können;
• ein Vorgang längere Zeit benötigt.

Ladezustände, Fehlermeldungen, Leerzustände und Erfolgsfeedback gehören ebenso zur Produkterfahrung wie die wichtigsten Ansichten.

Teste das Verhalten, nicht nur das Design

Sobald die App generiert wurde, solltest du sie nicht nur ansehen, sondern ausprobieren. Verwende unterschiedliche Konten und Rollen. Lade Seiten neu und prüfe, ob die Daten gespeichert bleiben. Versuche, auf Informationen zuzugreifen, die privat sein sollten. Führe Vorgänge aus, zu denen eine bestimmte Rolle nicht berechtigt sein sollte. Und überprüfe natürlich auch das Verhalten auf Mobilgeräten.

Eine App ist nicht fertig, wenn sie vollständig aussieht. Sie ist fertig, wenn ihre Abläufe wirklich funktionieren.

Vom generierten Stack zum veröffentlichten Produkt

Das erste generierte Ergebnis ist nur der Ausgangspunkt. Mit der Live-Vorschau kannst du die Abläufe der App testen und sie mithilfe natürlicher Sprache weiter verändern. Du kannst zum Beispiel Folgendes anfordern:

„Fixiere die Navigationsleiste.“

„Füge eine Admin-Tabelle mit allen Buchungen hinzu.“

„Verhindere, dass Kunden ein bereits belegtes Zeitfenster buchen.“

Du musst nicht für jede Änderung zum Code zurückkehren. Beschreibe einfach weiter, was du erreichen möchtest, und überlasse dem Agenten die Aktualisierung des Projekts. Sobald die App fertig ist, kannst du sie mit Coderblock per Klick unter einer eigenen coderblock.app-Adresse veröffentlichen – inklusive SSL.

Du kannst außerdem eine vorhandene Domain über eine geführte DNS-Konfiguration verbinden oder direkt auf der Plattform eine Domain erwerben. DNS und SSL werden dabei automatisch eingerichtet.

Schau über die erste Benutzeroberfläche hinaus

Die sinnvollste Regel für die Bewertung eines AI-App-Builders lautet: Beschränke dich nicht auf das, was du siehst. Eine gelungene Benutzeroberfläche ist wichtig, stellt für sich allein aber noch keine vollständige Anwendung dar. Ein echtes Full-Stack-Ergebnis verbindet ein nutzbares Frontend mit dauerhaft gespeicherten Daten, Authentifizierung, Berechtigungen, Backend-Logik, sicheren Integrationen und einem konkreten Weg in die Produktion. Genau das ist der Unterschied zwischen dem Generieren einer Benutzeroberfläche und dem Erstellen einer App. Bei der Verwendung eines AI-App-Builders ist dies außerdem eines der wichtigsten Kriterien, bevor du auf „Publish“ klickst.