Tutorial

Tutorial: So verbindest du die OpenAI API mit Lovable

Melden

Hier ist ein detailliertes Tutorial, wie du die OpenAI API mit Lovable (ehemals GPT Engineer) verbindest.

Lovable ist ein extrem leistungsstarkes Tool, um Web-Apps durch natürliche Sprache zu erstellen. Standardmäßig nutzt Lovable eigene Kontingente, aber für komplexere Projekte, höhere Limits oder die Nutzung spezifischer Modelle (wie GPT-4o) ist es sinnvoll, einen eigenen OpenAI API-Key zu hinterlegen.

In dieser Anleitung erfährst du Schritt für Schritt, wie das funktioniert.

Schritt 1: OpenAI API-Key erstellen

Bevor du in Lovable startest, benötigst du einen gültigen API-Schlüssel von OpenAI.

  1. Gehe auf die OpenAI API Plattform.
  2. Logge dich mit deinem Account ein.
  3. Navigiere im linken Menü zu "API Keys".
  4. Klicke auf den Button "+ Create new secret key".
  5. Gib dem Key einen Namen (z. B. "Lovable Integration") und klicke auf "Create secret key".
  6. Wichtig: Kopiere den Key sofort und speichere ihn an einem sicheren Ort (z. B. Passwort-Manager). Du kannst ihn später nicht mehr einsehen!

Hinweis: Stelle sicher, dass dein OpenAI-Konto über ausreichend Guthaben (Credits) verfügt, da die Nutzung über den eigenen Key Kosten verursacht.

Schritt 2: API-Key in Lovable hinterlegen

Lovable macht es dir sehr einfach, deinen eigenen Key zu nutzen. Du kannst dies auf zwei Wegen tun: für ein spezifisches Projekt oder global.

Methode A: Direkt im Chat-Interface (Während der Erstellung)

Wenn du gerade an einer App arbeitest, kannst du den Key oft direkt über die Einstellungen im Editor hinzufügen:

  1. Öffne dein Projekt in Lovable.dev.
  2. Klicke unten links auf das Zahnrad-Icon (Settings) oder suche nach dem Bereich "AI Settings".
  3. Dort findest du ein Feld mit der Beschriftung "OpenAI API Key".
  4. Füge deinen kopierten Key in das Feld ein.
  5. Klicke auf "Save" oder bestätige die Eingabe.

Methode B: In den App-Einstellungen (für die Funktionalität deiner App)

Falls du eine App baust, die selbst KI-Funktionen für deine Endnutzer bereitstellen soll (z. B. ein KI-Textgenerator), musst du den Key als Environment Variable (Umgebungsvariable) hinterlegen:

  1. Gehe in deinem Projekt auf den Reiter "Settings" (oder "App Configuration").
  2. Suche den Bereich "Environment Variables".
  3. Füge eine neue Variable hinzu:
    • Key: OPENAI_API_KEY
    • Value: dein_sk-ant-api-key_hier...
  4. Speichere die Änderungen.

Schritt 3: Die Verbindung testen

Um sicherzustellen, dass die Verbindung funktioniert:

  1. Gib im Lovable-Chat eine Anweisung ein (z. B.: "Erstelle eine Liste mit 5 Marketing-Ideen für ein Café").
  2. Wenn Lovable deinen eigenen Key nutzt, siehst du oft in der Konsole oder in den Nutzungsstatistiken deines OpenAI-Dashboards, dass Anfragen eingegangen sind.
  3. Achte auf Fehlermeldungen: Wenn die Meldung "Insufficient Quota" erscheint, musst du dein Guthaben bei OpenAI aufladen.

Warum solltest du deinen eigenen Key nutzen?

  • Höhere Limits: Du bist nicht an die kostenlosen Limits von Lovable gebunden.
  • Modell-Auswahl: Du hast oft mehr Kontrolle darüber, welche Version von GPT genutzt wird (z. B. GPT-4o für bessere Logik).
  • Entwickler-Kontrolle: Du siehst genau, welche Kosten für welche Anfragen entstehen.

Sicherheitshinweise

  • Teile deinen Key niemals: Wer deinen Key hat, kann auf deine Kosten OpenAI-Dienste nutzen.
  • Limits setzen: Gehe in dein OpenAI Billing Dashboard und setze ein monatliches Limit (z. B. 10$), damit es keine bösen Überraschungen auf der Kreditkarte gibt.
  • Key widerrufen: Falls du das Gefühl hast, dein Key wurde öffentlich (z. B. aus Versehen auf GitHub gepostet), lösche ihn sofort in der OpenAI-Konsole und erstelle einen neuen.

Fertig! Du hast Lovable nun erfolgreich mit OpenAI verbunden und kannst die volle Power der KI für deine App-Entwicklung nutzen.

0