admin

Bauen mit den Besten: Meine Erfahrung beim AI Showdown auf Lovable.dev

Am Wochenende des 14.–15. Juni 2025 lud lovable.dev (kurz Lovable), eine KI‑gestützte „Vibe‑Coding“ Plattform, Nutzer weltweit ein, webbasierte Anwendungen kostenlos und ohne Programmierkenntnisse zu erstellen. Lovable ermöglicht Full‑Stack‑Entwicklung per natürlicher Sprache direkt im Browser.

In Zusammenarbeit mit OpenAI, Anthropic und Google veranstaltete Lovable das AI Showdown – ein öffentliches Benchmark‑Event, bei dem führende Code‑generierende KI‑Modelle verglichen wurden. Für 48 Stunden hatten alle Teilnehmer uneingeschränkten kostenlosen Zugriff auf Lovables Tools und Modelle.

---

🚧 Mein Experiment: Drei Modelle, zwei Apps, ein Prompt

Um jedes Modell zu testen, habe ich zwei Anwendungen entwickelt und identische Anweisungen an alle drei AIs geschickt. Hier sind die Ergebnisse:

🔊 1. Lux‑ASR‑Trial

Eine Sprach‑zu‑Text‑App, mit der Nutzer eine Sprachnachricht auf Smartphone oder Computer aufnehmen und per API an das Lux‑ASR‑System der Universität Luxemburg senden können.
Lux‑ASR erkennt automatisch Luxemburgisch, Französisch, Deutsch, Englisch, Portugiesisch und Spanisch. Die Rücktranskription wird sofort angezeigt.

Screenshots und Testlinks:

• https://google-speak-luxasr.lovable.app
• https://anthropic-speak-luxasr.lovable.app
• https://openai-speak-luxasr.lovable.app

🛑 2. Access‑Brake‑to‑API

Ein Proof of Concept, der darauf abzielt, den missbräuchlichen Einsatz kostenloser GenAI‑Dienste einzudämmen. Die App nutzt randomuser.me, um fiktive Profile (Foto, Name, Alter, Adresse) abzurufen. Ein fortschreitender Delay‑Mechanismus verlangsamt jede weitere Anfrage in derselben Sitzung, um Überlastung zu vermeiden.

Screenshots und Testlinks:

• https://random-user-viewer-by-anthropic.lovable.app
• https://random-profile-explorer-by-openai.lovable.app
• https://instant-profile-seeker-by-google.lovable.app

🌐 Bonus‑Challenge: Mobile‑First WordPress‑Viewer

Um noch einen Schritt weiterzugehen und Lovables Fähigkeiten mit echten Inhalten zu demonstrieren, habe ich den folgenden Prompt eingereicht – zunächst bei Anthropic, musste aber wegen Serverüberlastung zu OpenAI wechseln.

Prompt:

“Create a Mobile First app that fetches the JSON content of a WordPress article from the REST API at admin.ki-leierbud.lu/?p=1008 and displays it as a properly formatted HTML page with the following features:

1. A fixed header (#003366 background) with the article title on the left and a language switcher (EN, FR, DE, PT, LB) on the right.
2. A fixed footer (#004080 background) with a 3-column grid showing the article’s tags.
3. A central content area (#E6F2FF background) displaying the article body with:
   • Blue, non-underlined links
   • Proper bullets for lists
   • Bold and italic text where applicable
   • UTF-8 support
4. All links should open in a new tab/window.
5. On language change, load the corresponding article:
   • EN > ?p=1008
   • FR > ?p=1012
   • DE > ?p=1017
   • PT > ?p=1014
   • LB > ?p=1020“

Zu meiner Überraschung funktionierte die App einwandfrei – ganz ohne Code‑Anpassungen. Der generierte Code wurde auf mein GitHub‑Konto hochgeladen

🔗  https://github.com/mbarnig/leierbud-article-viewer

und die Live‑Version ist öffentlich zugänglich unter:

🔗  https://the-ai-showdown.lovable.app

Am nächsten Tag bemerkte ich einige kleine HTML-Probleme mit Listenpunkten und den Überschriften-Tags <h1> bis <h6>. Ich bat lovable.dev, den Code zu überprüfen. Hier ist die Antwort:

Looking at your code, I can see the issue. The HTML content is being rendered with dangerouslySetInnerHTML, 
but the proper styling for HTML elements like headings, lists, etc. is not being applied correctly.

The problem is in the ArticleContent component. While you're using the prose class from Tailwind's typography plugin, 
it seems like the typography plugin might not be installed, or the styles aren't being applied properly to the rendered HTML content.

I've fixed the HTML styling issues by adding proper CSS rules for all HTML elements in the article content. 
Now headings (h1-h6) will display with different sizes, lists will show proper bullets/numbers, and all other HTML elements will be properly styled.

Hier ist der Link zur überarbeiteten Anwendung:

🔗 https://the-ai-showdown-rev1.lovable.app

📊 Was passiert als Nächstes?

Ich analysiere derzeit die Leistung der drei Modelle in beiden Projekten. Eine ausführliche Vergleichsanalyse werde ich in den sozialen Medien veröffentlichen und meine Ergebnisse beim Lovable Content Challenge einreichen.

Bleibt dran für mehr Insights!