Webapp mit KI erstellen: das komplette Setup für Einsteiger

Du willst eine Webapp mit KI erstellen, kannst aber nicht programmieren? Genau dafür ist diese Anleitung. Ich zeige dir Schritt für Schritt das Setup, das ich selbst für meine Projekte nutze: Claude Code schreibt den Code, GitHub speichert ihn, Supabase übernimmt Datenbank und Login, Hostinger bringt die App online. Am Ende hast du eine eigene App, die live im Internet läuft, und machst Änderungen einfach per Chat.

Das Setup im Überblick

Für eine Webapp brauchst du vier Bestandteile: einen KI-Agenten, eine Datenbank, einen Server und GitHub. Falls dir das Grundprinzip dahinter noch neu ist, findest du in Vibe Coding einfach erklärt die Grundlagen und die Kostenübersicht. Die Kurzfassung: GitHub und Supabase sind gratis, das Hostinger-Webhosting kostet 4 € im Monat, Claude Pro 15 € im Monat bei jährlicher Abrechnung.

Als Beispielprojekt baue ich in dieser Anleitung einen Abotracker: eine App, die zeigt, wie viel Geld ich pro Monat für Abos ausgebe, mit Analysen und einem richtigen Login für neue Nutzer. Wenn du schon eine eigene Idee hast, setz sie direkt um. Die Schritte sind dieselben.

Schritt 1: Accounts anlegen

Leg dir zuerst ein kostenloses Konto bei GitHub an (github.com). Danach registrierst du dich bei Supabase (supabase.com), das geht oben rechts über den Sign-in-Button und ist ebenfalls gratis. Praktisch: Du kannst dich bei Supabase direkt mit deinem frischen GitHub-Konto anmelden. Zahlungsdaten musst du bei keinem der beiden hinterlegen.

Dazu brauchst du die Claude App (claude.com/download) und den Claude-Pro-Plan, denn der ist die Voraussetzung, um auf Claude Code zugreifen zu können. Der Server kommt erst in Schritt 7 dran, du musst also nicht alles auf einmal einrichten.

Schritt 2: Projektordner anlegen und öffnen

Claude Code arbeitet immer in einem Ordner auf deinem Rechner, anders als der normale Claude-Chat, bei dem du Dateien hoch- und runterlädst. Leg also einen neuen, leeren Ordner an, zum Beispiel „Abotracker" in deinen Dokumenten. Ich habe mir dafür einen Sammelordner namens „Claude Code" angelegt, in dem alle meine Projekte liegen.

In der Claude App siehst du mit dem Pro-Plan oben links neben „Chat" den Reiter „Code". Dort klickst du auf „Ordner öffnen", wählst deinen Abotracker-Ordner aus, und schon arbeitet Claude Code in diesem Projekt. Falls du die App gerade zum ersten Mal einrichtest, führt dich die Einsteiger-Anleitung zu Claude Code durch alle Details.

Schritt 3: Supabase mit Claude verbinden

Jetzt ist ein guter Moment, Claude mit Supabase zu verbinden. Öffne oben links die Seitenleiste, geh auf „Anpassen" und dann auf „Connectoren". Über das Plus („Connectoren durchsuchen") suchst du nach Supabase, klickst auf das Plus beim Connector und bestätigst die Verbindung auf der Seite, die sich öffnet.

Das war schon alles. Claude Code kann über diese Verbindung später das Datenbankschema und die komplette Login-Logik selbstständig anlegen. In Supabase selbst musst du danach praktisch nie wieder reinschauen.

Schritt 4: Die App im Planmodus planen

Du könntest Claude Code jetzt einfach sagen: „Programmier mir die Webapp." Das würde sogar funktionieren. Ich empfehle dir aber, das Projekt erst sauber durchplanen zu lassen, damit Claude einen klaren Auftrag hat und du später weniger korrigieren musst.

Geh dafür unten links auf den Modus-Button und wähl den Planmodus. Stell das neueste Modell ein und den Aufwand ruhig hoch. Dann schreibst du deinen Auftrag. Diese Punkte gehören rein:

• Was für eine App du bauen willst und welche Funktionen sie haben soll
• Welche Datenbank zum Einsatz kommt, hier: Supabase, gehostet in Frankfurt
• Auf welchem Server die App später läuft, hier: Hostinger
• Dass Claude einen Admin-User mit Testdaten anlegen soll, damit du die App gleich ausprobieren kannst
• Dass er dir Rückfragen stellen soll, bevor er mit dem Planen anfängt

Ein Hinweis, den ich beim Hostinger-Setup immer mitgebe: Hostinger legt nach der Verbindung mit Supabase den Secret Key an, nicht den Publishable Key. Das erspart dir später eine Fehlersuche.

Claude kommt dann mit Rückfragen zurück, bei mir zum Beispiel, ob er das Supabase-Projekt direkt in Frankfurt anlegen soll (ja, soll er). Danach plant er das Projekt durch, das dauerte bei mir etwa fünf Minuten. Lies dir den Plan wirklich durch: Datenmodell, Projektstruktur, Funktionen. Wenn alles passt, klickst du auf „Akzeptieren und Automodus".

Schritt 5: Bauen lassen und lokal testen

Jetzt programmiert Claude Code die App, das kann eine Weile dauern. Danach lohnt sich ein Blick in deinen Projektordner: Der war vorher leer, jetzt liegt dort der komplette Code deiner Webapp. Wichtig zu verstehen: Die App liegt erst mal nur auf deinem Rechner, online ist noch nichts.

Claude startet zum Testen einen lokalen Server und gibt dir einen Link. Klick ihn an, logg dich mit den Admin-Testdaten ein und probier alles aus. Bei meinem Abotracker standen Dashboard, Monatsausgaben, Kategorien und die Aboliste direkt beim ersten Versuch. Das ist der Moment zum Experimentieren, denn kaputtmachen kannst du hier nichts.

Schritt 6: Code auf GitHub hochladen

GitHub ist die Cloud für deinen Code. Dort liegt immer die aktuelle Version deiner App, Programmierer nennen das die Single Source of Truth, und der Server zieht sich später genau diese Version. Der Code wird dabei in sogenannten Repositories gespeichert, einfach gesagt: ein Repository pro Projekt.

Verbinde zuerst die Claude App mit GitHub: Seitenleiste öffnen, „Anpassen", dort die GitHub-Integration auswählen und auf „Verbinden" klicken. Danach schreibst du Claude Code: „Bitte lade den Code auf GitHub hoch und erstelle ein neues Repository." Er fragt dich, ob das Repository privat oder öffentlich sein soll. Wähl privat, dein Code muss nicht öffentlich einsehbar sein. Wie man ein Repository technisch anlegt, musst du nicht wissen. Das erledigt Claude Code komplett für dich.

Schritt 7: Server bei Hostinger einrichten

Jetzt kommt der Schritt, an dem die meisten aussteigen, dabei ist er gar nicht schwer: die App online bringen. Ich nutze dafür das Node.js-Webhosting auf hostinger.com für 4 € im Monat. Dafür bekommst du fünf Webapps, dazu eine Domain und eine Business-E-Mail für jeweils ein Jahr gratis. Die Domain kannst du direkt beim Kauf aussuchen oder später hinzufügen.

Nach dem Kauf richtest du die Webapp ein: neue Website erstellen, unten „Node.js Webapp" auswählen, deine Domain zuweisen und als Serverstandort Deutschland wählen. Beim Punkt Quellcode gehst du auf „Weiter mit GitHub", meldest dich mit deinem GitHub-Konto an und wählst dein Abotracker-Repository aus. Dann auf „Bereitstellen" klicken. Falls etwas schiefgeht, findest du die Ursache fast immer im Build-Protokoll.

Schritt 8: Datenbank verbinden und live gehen

Im Dashboard deiner Webapp bei Hostinger gibt es den Punkt „Datenbank". Klick dort auf „Verbinden", Supabase wird dir direkt vorgeschlagen, und wähl die bestehende Datenbank aus, die Claude Code angelegt hat. Hostinger speichert daraufhin die Supabase-URL und den API-Key als Umgebungsvariablen, also als geheime Schlüssel, mit denen deine App auf die Datenbank zugreift. Zeigt dir Hostinger dabei Code-Anpassungen an, schick Claude Code einfach einen Screenshot davon und lass ihn das kurz prüfen.

Falls du eine neue Domain gekauft hast, musst du sie noch registrieren und verbinden. Hostinger führt dich da in etwa drei Klicks durch. Lädt die Seite danach nicht sofort, liegt das oft nur an deinem Heimnetz, das die Änderung noch nicht kennt. Kurz ins Handynetz wechseln und neu laden hilft.

Dann der schönste Moment: Domain aufrufen, einloggen, und du siehst dieselben Daten wie in der lokalen Version, weil beide auf dieselbe Datenbank zugreifen. Deine App ist live.

Änderungen machen: ab jetzt chattest du nur noch

Angenommen, du willst eine neue Funktion, etwa ein Enddatum für Abos. Dafür fasst du weder GitHub noch Supabase noch Hostinger an. Du schreibst Claude Code: „Bitte füge eine Funktion hinzu, bei der man für ein Abo ein Enddatum angeben kann. Sobald du fertig bist, lade den Code bei GitHub hoch."

Claude ändert den Code lokal, testet die Änderung selbstständig und lädt sie auf GitHub hoch. Hostinger erkennt das und erstellt automatisch eine neue Bereitstellung. Ein paar Minuten später ist das Enddatum-Feld live in deiner App. Genau dafür hast du das Setup einmal sauber aufgebaut.

Wenn du tiefer einsteigen willst, wie du Claude Code dabei steuerst, lohnt sich der Artikel über die Arbeitsmodi und Funktionen von Claude Code.

Das Wichtigste zum Schluss

Der Aufbau kostet dich einmal etwas Zeit, danach läuft fast alles über den Chat. Und das Setup trägt weiter als nur diese eine App: Mit denselben vier Bausteinen baust du auch Websites, Spiele oder Automationen. Fang mit einem kleinen Projekt wie dem Abotracker an und arbeite dich von da aus vor.