Lovable - das am schnellsten wachsende Startup Europas

Lovable ist ein innovatives KI-Tool, das Website- und App-Prototypen in Minuten erstellt. Design und Datenbankanbindung funktionieren gut, aber Authentifizierung und Codequalität sind problematisch. Ideal für schnelle Visualisierungen, aber nicht für marktreife Anwendungen.

  • KI-Tooling
Andreas

Andreas

Software Engineer


Lovable im Test: Kann dieses KI-Tool wirklich Apps in Minuten bauen?

Das schwedische Startup Lovable sorgt derzeit für Aufruhr: Als eines der ersten europäischen KI-Startups hält es beim Wachstum mit der US-Konkurrenz mit – und stellt damit die KI-Landschaft in Europa auf den Kopf. Was steckt hinter dem Erfolg?

Lovables Entwickler versprechen, dass Lovable der persönliche “Superhuman Full Stack Engineer” sei, der es jedermann ermöglicht, ohne Coding die eigene Idee in Sekunden zu verwirklichen. Aus Texteingaben werden mit KI in Sekunden/Minuten wundervolle Websites gezaubert. Die komplette Entwicklung sei mit Lovable möglich, sodass Geld und Zeit gespart werden und die Idee in den Vordergrund rückt.

Von statischer Website bis hin zum komplexen Dashboard mit Daten und Automatisierungen sei alles möglich. Viele zahlende Nutzer und jeden Tag 30.000 neue Apps? Was steckt wirklich dahinter? Nur Hype oder tatsächlich viel Mehrwert für jedermann? Ich finde es heraus.

Unsere umzusetzende Idee

Um die Funktionen und Ergebnisse von Lovable zu testen, brauche ich eine Idee: Ich möchte eine neue Website für das Fitnessstudio um die Ecke bauen. Die Website braucht vor allem eine ansprechende Startseite, eine Unterseite, die geplante Sportkurse übersichtlich darstellt und das Buchen derselbigen ermöglicht und selbstverständliche Dinge wie ein Impressum, Kontaktmöglichkeiten, Seiten zum Anzeigen und Anpassen der eigenen Kontodetails etc

Die Trainer sollen die Möglichkeit haben, die Kursdetails jederzeit anpassen zu können und einsehen können, wer und wie viele Personen an ihrem Kurs teilnehmen.

Es geht los

Ich schlüpfe in die Rolle einer Person ohne Programmierkenntnisse und erkunden wie viel Mehrwert mir Lovable bringen kann: Zuerst brauche ich einen passenden Prompt. Er soll widerspiegeln, was ich bauen möchte, welche Unterseiten es vielleicht gibt, welche Features ich brauche und was für einen “Vibe” die gesamte Seite haben soll. Prompt Engineering ist ein komplexes Feld, aber ich nehme zum Start erst einmal diesen einfachen Prompt:

Erstelle eine moderne Website für ein lokales Fitnessstudio mit dem Namen Provita. Die Website soll eine ansprechende Startseite haben, eine Unterseite für Sportkurse, auf der Nutzer Kurse einsehen und buchen können, sowie Seiten für Impressum, Kontakt und Kontoverwaltung. Trainer sollen ihre Kurse bearbeiten und Teilnehmerlisten einsehen können. Das Design soll benutzerfreundlich und mobil optimiert sein.

Und schon rattert Lovable los. Ich befinde mich jetzt in der Lovable Projekt Oberfläche und das eigentliche Arbeiten am Produkt geht los.

Leider hatte ich in manchen Projekten schon hier Probleme: Ein Fehler mit der Nachricht “Project is being used and wasn't able to acquire lock before timeout” ploppte auf und Lovable baut die Website nicht fertig. Ein Folgeprompt mit “Bitte baue die Website fertig entsprechend der Anforderungen und fixe Build errors.” schaffte meistens Abhilfe.

UI und Features (+2)

Die Oberfläche ist simpel, aber gut durchdacht: Links der Chat zum Prompten der AI, mit der Möglichkeit zum Hochladen von Bildern. Dies ermöglicht ein nahezu perfektes visuelles Ergebnis, da Lovable gut Bilder nachstellen kann. (Lovable hat ebenso die Funktion, ganze Figma-Vorlagen nachzubauen.)

Oben links unter “History” kann ich den Verlauf meiner Prompts nachvollziehen und vorherige Entwicklungsstände wieder aufrufen und anschauen.

Rechts sehe ich nun meine Website. Simpel, einige Unterseiten fehlen noch, das Farbschema ist noch nicht gänzlich nach meinem Geschmack, aber nichts, was weitere Prompts nicht fixen können.

Ich lege also los und prompte für die fehlenden Unterseiten (Kontaktseite, Kursdetails, etc) und passe die Website visuell nach meinen Vorstellungen an. Falls ich ein Element einfach nur verschieben möchte, kann ich dies mit der “Edit”-Funktion direkt tun. Unterseiten kann ich bequem mit dem Dropdown Menü über der Website navigieren. Nicht alle Seiten zeigen etwas, vor allem Seiten die normalerweise einen angemeldeten Nutzer brauchen sind einfach weiß. Da ich noch keine Anmeldung hinzugefügt habe, lasse ich dies erst einmal zu und hoffe, dass dies später gelöst wird.

Gelegentlich treten Fehler auf, diese löst Lovable meistens selbst nach Aufforderung. Die Änderung einer Schriftart war hingegen nicht möglich in meinen Projekten. Lovable behauptete, die Schriftart geändert zu haben, aber auch nach dem geforderten Neuladen der Seite war keine Spur der neuen Schriftart zu finden.

Ich verbessere die Website mit verschiedenen Prompts solange, bis sie mich visuell überzeugt und alle Seiten enthält, die ich brauche. Und jetzt beginnt der spannende Teil: das Füllen der Website mit Leben und Funktion.

GitHub Integration (+1)

Nun ist es an der Zeit, den generierten Code zu speichern. Hierfür nutze ich die GitHub Integration von Lovable. Ich drücke auf den GitHub Knopf oben rechts, logge mich ein und lasse ein neues Projekt erstellen - und schwupps - der gesamte Code ist in meinem Besitz auf GitHub und zukünftigen Änderungen werden automatisch synchronisiert. So habe ich jederzeit den gesamten Code bei mir und könnte diesen selbstständig weiterentwickeln. Ich bin nun unabhängig von Lovable. Permanente Code-Synchronisierung und Code-Eigentum sind große Pluspunkte, andere vergleichbare Tools sind hier noch hinterher.

Supabase Integration (+1)

Lovables großes Versprechen ist das Entwickeln von “echten” Webapps und Fullstack Applications. In allen Projekten, wo mit echten Daten hantiert wird, ist eine Datenbank unabdingbar. Hier kommt Supabase ins Spiel. Supabase ist eine Open-Source Alternative zum bekannten Firebase von Google. Lovable hat eine einfache und gute Integration mit Supabase geschaffen, welche mir Features, wie tatsächliche Datenspeicherung in einer Datenbank und Autorisierung, ermöglicht. 

Die Verknüpfung ist simpel und wird in einem Artikel von Lovable gut erklärt.

Ich erstelle einen Supabase-Account und ein neues Projekt in Supabase für meine App.

Ich drücke nun nur noch auf Verbinden in Lovable, und schon kann Lovable echtes Leben in meine Website einhauchen.

Datenbank (+1)

Das Speichern von Daten macht Lovable sehr einfach. In unserem Fall möchte ich die Sportkurse mit den jeweiligen Details speichern und eventuelle Anmeldungen zu diesen.

Ich fordere Lovable auf, anstelle der bisherigen Beispieldaten die Kurse aus der nun verbundenen Datenbank zu beziehen.Anhand meiner Angaben zu Daten generiert Lovable nun SQL, um Tabellen in Supabase anzulegen.

Als Programmierer könnte ich diese SQL-Befehle nun kontrollieren, bevor ich auf “Apply Changes" drücke. Als Nicht-Programmierer entfällt dies und ich drücke einfach auf Apply. Nun führt Lovable diese Befehle aus und schwups - die angezeigten Kurse auf der Kursseite stammen aus einer tatsächlichen Datenbank. Sehr schön! Auch das Editieren von z. B. einem Kurs ist möglich. Lovable generiert mehr SQL, ich nicke ab und schon kann man in einem schönen Popup Titel, Lehrer und Ähnliches eines Kurses anpassen und tatsächlich speichern. Und schon ist meine Website gefüllt mit echten Daten und dem Nutzen der Seite im realen Leben steht nichts mehr im Weg, oder?

Registrierung und Login (-3)

Für nahezu alle Anwendungszwecke brauche ich die Möglichkeit, dass sich Nutzer registrieren und anmelden können. Dies ermöglicht Lovable ebenfalls mit der Supabase Verknüpfung. Ich bitte Lovable um das Hinzufügen von Login Möglichkeiten und schon habe ich funktionierende Login und Registrierung Buttons! Die Nutzer werden in Supabase gespeichert, E-Mail Verifizierung und Ähnliches ist über entweder Lovable oder Anpassen von Supabase möglich. Aber hier stößt Lovable an seine Grenzen: Es bekommt das Session Management einfach nicht funktionsfähig. Nach erfolgreicher Registrierung/Login und Neuladen der Seite (In Praxis nach dem Neuöffnen der Seite) steckt die Website fest: Es lädt im Hintergrund und kommt nicht weiter. Irgendetwas funktioniert nicht und verhindert das Nutzen der Website. Auch nach vielen weiteren Prompts wird es nicht besser. Trotz vieler Korrekturversuche verschlimmern sich die Probleme: Lovable fügt neuen Code hinzu, doch die Login-Funktion bleibt unzuverlässig. In keinem meiner Projekte mit Lovable hat Lovable es geschafft, die Login Funktion ordentlich zu implementieren. Dies ist ein unfassbar großes Problem und verhindert jeglichen Einsatz in der realen Welt. Nutzer müssen sich einloggen können und die Seite komfortabel nutzen dürfen. Sonst springen sie ab.

Endstand

Was habe ich nun erreicht/gebaut? Meine Website sieht gut aus und nutzt echte Daten. Anmeldung, Profilverwaltung und Kursbearbeitung sind integriert – allerdings mit Einschränkungen. Kurzum: Das Ergebnis ist ein beeindruckender Prototyp – aber für den realen Einsatz fehlt noch einiges. Das zeigt sich auch bei eigentlich jeder der “Launched” Apps von Lovable. Es sind gute Prototypen, aber fertig fürs echte Leben sind sie nicht. Simple Seiten, die vielleicht nur Dinge ausrechnen, verarbeiten oder Spielereien sind, funktionieren, aber alles, was komplexe Anforderungen hat oder mit Nutzern und Abläufen einhergeht, ist zum heutigen Stand unrealistisch.

Kosten & Deployment

Grundsätzlich ist Lovable kostenlos. Man erhält 5 Nachrichten am Tag, aber maximal 30 Nachrichten im Monat. Für ein simples Projekt wie meines brauchte ich bereits zwischen 10 und 20 Prompts, um einen präsentierfähigen Prototypen zu haben. Des Weiteren sind kostenlose Projekte immer öffentlich und können theoretisch von jedermann besucht werden.

Ich kann mein Projekt jederzeit live bringen: Ein simpler Druck auf den “Publish” Knopf und schon ist mein derzeitiger Stand unter einer generierten URL erreichbar. Eigene URLs sind möglich, ebenso wie private Projekte und erhöhte Nachrichten Limits. Das aber nur für den zahlenden Nutzer. Die Zahlpläne starten mit 20€ im Monat, was mir mehr Nachrichten im Monat (100) und private Projekte ermöglicht. Diesen Plan nutzte ich, um Lovable ausführlich testen zu können. Da der Code bei mir liegt, könnte ich aber auch jeden anderen Service nutzen, um meine Website zu hosten.

Alles in allem ist Lovable kostenlos zu testen, für eine gute/ausgiebige Erfahrung sollte man allerdings mindestens die 20€ einplanen.

Technische Sicht

Schlüpfen wir nun einmal in die Perspektive eines Developers. Wobei kann mir Lovable helfen, und was sind die technischen Nachteile?

Tool usage

Grundsätzlich baut Lovable Projekte von Grund auf. Das heißt, ich kann bestehende Projekte nicht erweitern, sondern baue immer neu. Die häufigen Build Fehler, die er nur nach Aufforderung fixt, fressen Nachrichten auf, was zu weniger produktiven Prompts führt.

Lovable arbeitet nur mit React und Vite. Das heißt, wer sich zB NextJS wünscht, ist hier falsch aufgehoben und sollte eher bei v0 vorbeischauen.

Die Anmeldeprobleme habe ich selber einmal durchleuchtet, um zu verstehen, warum sie auftreten. Allerdings konnte Lovable dann trotz Hinweisen, was schief läuft, diese nicht beheben. Dies ist ein sehr großes Problem, da Apps ohne Authentifizierung stark eingeschränkt sind.

Um bestehende Projekte mit Funktionalität zu erweitern, gibt es definitiv bessere Tools, da Lovable starke Vorgaben und Limits hat, die sehr auf das Bauen einer vollständigen App fokussiert sind.

Code & Quality (-1)

Lovable bietet mit der GitHub Integration ein unfassbar wichtiges Feature an: 100% Code-Ownership. Der Code liegt bei mir und ich kann ihn selbständig weiterentwickeln und nutzen. Dies ist anderen Tools weit voraus und muss hervorgehoben werden. Zusammen mit der Datenbank und allen Backend-Features, die ebenfalls alle bei mir (in meinem Supabase Projekt) liegen, ergibt sich ein Gesamtprodukt, das vollständig unabhängig von Lovable ist. Lovable kann sogar nach selbstgemachten Änderungen in GitHub mit diesen weiterarbeiten.

Lovable hat eine Seite unter welcher einige Praktiken und Hinweise gegeben sind, wie ich Probleme löse. Mir haben sie allerdings leider nicht helfen können.

Die Codequalität ist nach meiner Erfahrung okay bis leicht unterdurchschnittlich. Vor allem Code-Leichen fallen mehr und mehr an mit der Weiterentwicklung des Projekts. Lovable hat eine automatische Erkennung, die das Refactoring zu großer Komponenten anstößt, aber es bleiben viele Leichen zurück, die das Arbeiten anstrengend machen. Sowohl die Leichen als auch die mindere Codequalität führen dazu, dass die Weiterentwicklung zwar möglich ist, aber das Implementieren größerer eigener Features ist sehr mühselig. Man sollte das Ergebnis von Lovable nicht als Startpunkt für das eigene Entwickeln nehmen.

Roadmap

Lovable scheint weiterhin in Entwicklung zu sein, aktuelle Pläne können öffentlich eingesehen werden. Ich bin sehr gespannt, wie sich Lovable weiterentwickelt. Ich würde mich sowohl über mehr unterstützte Technologien wie NextJS freuen, als auch über generelle Fixes wie Authentifizierung.

Fazit

Lovable ist ein starkes Tool für schnelles Prototyping – deutlich besser als Alternativen wie Bolt oder v0. Bessere Navigation der Seiten, GitHub Integration und Co haben zu einer sehr entspannten Erfahrung beigetragen. Für produktive Apps ist es jedoch noch nicht ausgereift. Selbst einfache Anwendungen sind weit von einem Stand entfernt, auf welchem sie in der realen Welt eingesetzt werden könnten.

Komplexere Anforderungen und Bedingungen, wie sie die Arbeit hier bei Team One in der Enterprise Umgebung erfordert, liegen noch in (weiter?) Zukunft.

Ich werde Lovable aber definitiv in der Zukunft für schnelles und müheloses Prototyping nutzen!

Unser Angebot

Wir begleiten Organisationen, Produkt- und Entwicklerteams bei der Einführung von modernen Entwicklungsstandards und -Tools. Kontaktieren Sie uns gerne um mit uns über KI-Initiativen in Ihrer IT zu sprechen.

Zu unseren Angeboten zählen unter anderem:

  • Training & Impuls-Workshops: AI for Developer / Produkt- & Marketing-Teams
  • AI Community Hosting im Kontext GenAI & Agentic Engineering
  • Produktentwicklung & Entwicklungsunterstützung

Background Image
globe Icon

Blog

Auf der Suche nach mehr spannenden Artikeln?

Dann schau gerne mal hier vorbei:

Blog