AI-Integration - Lovable Documentation

Lovable macht es einfach, AI-Services in deine Webanwendungen zu integrieren. Egal, ob du eine AI-gestützte Landing Page, ein Textgenerierungs-Tool oder eine vollwertige SaaS-App bauen möchtest – Lovables integrierte Integrationen mit Diensten wie OpenAI, Groq, Claude, Deepseek und Mistral machen das möglich, ohne Backend-Code schreiben zu müssen. So gehst du vor:

Wähle die benötigte KI-Funktion

Bevor du mit dem Erstellen beginnst, lege fest, was die KI tun soll:

Text generieren oder verbessern (z. B. E-Mail-Schreiber, Tweet-Generator)
Inhalte klassifizieren oder zusammenfassen
Bilder analysieren
Antworten personalisieren
Mit einer bestimmten LLM-API integrieren

Plane zuerst mit Eingabeaufforderungen

Nutze die Chat-Oberfläche von Lovable, um deine Funktion in einfachen Worten zu beschreiben. Zum Beispiel:

Build an email enhancement tool. The user should write an email, then click buttons to make it more professional, concise, or friendly using Groq API.

Lovable erstellt ein Grundgerüst für die Benutzeroberfläche (UI), schlägt Komponenten vor und ermöglicht dir, die App schnell in der Vorschau anzusehen.

Mit einem Backend über Supabase verbinden

KI-Funktionen benötigen häufig Backend-Logik. Supabase bietet:

Eine Datenbank für Benutzerdaten
Authentifizierung für Login/Signup
Edge Functions zum sicheren Aufruf externer APIs

Richte Supabase früh in deinem Projekt ein, um Inkonsistenzen zwischen UI und Backend zu vermeiden.

Edge Functions für KI-Aufrufe verwenden

Um KI-APIs sicher aufzurufen, erstelle eine Edge-Funktion in Lovable:

Füge deinen API-Schlüssel zu Supabase hinzu, indem du ihn über das Geheimnisse-Formular übermittelst
Lass Lovable den Code für die Edge-Funktion generieren
Stelle sicher, dass du Function Calling verwendest, wenn deine API strukturierte Daten zurückgibt (z. B. Kalorien, Makros, Tweet-Threads)

Beispiel für eine Eingabeaufforderung:

Use GPT-4 and function calling to extract nutrition info from a meal description. Save the results to the backend.

Strukturiere dein OpenAI-Function-Calling-Schema mit definierten Feldern wie:

{
  "name": "extract_nutrition",
  "parameters": {
    "calories": "number",
    "protein": "number",
    "carbs": "number",
    "fat": "number"
  }
}

Mach es interaktiv

Füge Schaltflächen oder Formularaktionen hinzu für:

Text an die KI senden
Ein Bild hochladen
Zwischen Modi umschalten (prägnanter vs. freundlicher Ton)

Lovable ermöglicht dir:

Funktionen mit Schaltflächen zu verknüpfen
Interaktionen zu animieren
Ergebnisse in Echtzeit mit minimaler Eingabeaufforderung anzuzeigen

Nutze Screenshots und Formulierungen wie „mach das flüssiger“, um das Design zu steuern.

Erweiterter UX-Tipp: Implementiere Live-Vorschauen der KI-Antwort nebeneinander. Verwende Links/Rechts-Layoutblöcke oder Tabs, damit Nutzer Ausgaben vergleichen können.

Externe Dienste verwenden (optional)

Einige beliebte Integrationen für KI-Workflows:

Resend – E-Mails nach Formularübermittlung senden
Groq API – extrem schnelle LLM-Inferenz
Stripe – Zugriff auf KI-Tools hinter einer Paywall
Replicate – Bilder generieren oder transformieren

Beispiel für eine Eingabeaufforderung:

When a user submits the contact form, send an email using Resend and store the message in Supabase.

Tipp zu Zahlungen: Schalte erweiterte KI-Funktionen nur mit einem Stripe-Abonnement frei. Nutze bedingte Flows wie:

if (user.isPaid) { showAIFeature(); } else { redirectToCheckout(); }

Testen und iterieren

Nutze Vorschaulinks, um die Darstellung auf Mobilgeräten zu testen
Prüfe die Performance mit mehreren API-Aufrufen
Teile dein Projekt, um Feedback zu erhalten
Nutze den Chatverlauf, um Änderungen rückgängig zu machen oder zu refaktorisieren

Veröffentlichen und bewerben

Wenn du bereit bist:

Mit einem Klick bereitstellen
Lovable Launch verwenden, um Sichtbarkeit zu gewinnen
OG-Tags und SEO-Titel/-Beschreibung im Meta-Panel hinzufügen
Deine App bei Product Hunt, in Communities und in sozialen Medien einreichen

Eingabeaufforderungen debuggen und verbessern

Formuliere Systemnachrichten präzise: „Du bist ein hilfreicher Ernährungsberater.“
Teste Funktionsaufrufe, indem du Eingaben simulierst.
Verwende console.log() in Edge Functions, um die Logik nachzuvollziehen.
Verwende Screenshots, wenn du Lovable bittest, ein Layout zu debuggen.

Tipp zur Eingabeaufforderung: Wenn die KI deinen Kontext nicht berücksichtigt (z. B. die Mahlzeiten eines Nutzers), sag:

Stelle sicher, dass alle Mahlzeiten des Nutzers in der Eingabeaufforderung an GPT-4 enthalten sind.

Fehlerbehebung

Fehlende Daten in KI-Eingabeaufforderungen?

Stelle sicher, dass du Kontext wie Nutzerverlauf oder frühere Einträge einbeziehst.

UI wird nicht aktualisiert?

Verwende den reinen Chat-Modus, um Schritt für Schritt zu debuggen.

Streaming-Probleme mit Groq/OpenAI?

Stelle sicher, dass stream: true unterstützt wird.

Bilduploads funktionieren nicht?

Verwende Datei-Inputs und konvertiere in Base64 oder lade über Supabase Storage hoch.

Edge-Funktion schlägt ohne Fehlermeldung fehl?

Sieh dir die Protokolle der Edge-Funktion im Funktionseditor von Lovable oder im Supabase-Dashboard an.

Beispielprojekte mit KI-Integration

Nexus Smart Email – Landing-Page mit Groq-optimierter E-Mail-Vorschau in Echtzeit
TweetMixer Pro – Blogbeiträge einfügen, Tweet-Threads mit GPT-4 erstellen
AI Calorie Tracker – Mahlzeiten mit GPT-4 anhand von Bild-Uploads analysieren
Robot Arena Shooter – Claude-gestütztes Spiel mit KI-gestützter Logik
Reindeer Quiz – Personalisierte Ergebnisse mit Claude und eigener Bewertungslogik

Abschließende Gedanken

Lovable ist dein KI-gestütztes Frontend, deine Datenbank, dein Backend und deine Deployment-Pipeline in einem. KI-Integration ist nur Eingabeaufforderung + Kontext + Testen. Geh Schritt für Schritt vor und denk daran: Du musst kein Backend-Entwickler sein, um mit KI zu bauen.

​Eingabeaufforderungen debuggen und verbessern

​Fehlerbehebung

​Beispielprojekte mit KI-Integration

​Abschließende Gedanken

Eingabeaufforderungen debuggen und verbessern

Fehlerbehebung

Beispielprojekte mit KI-Integration

Abschließende Gedanken