WeWeb + OpenAI integrieren
WeWeb und OpenAI bilden eine leistungsstarke Kombination im No-Code-Ökosystem. App Studio hat diese Integration für Dutzende von Kunden konfiguriert, hier ist unser vollständiger Leitfaden.
Wie WeWeb + OpenAI funktioniert
OpenAIs API gibt WeWeb-Apps Zugriff auf GPT-4o für Textgenerierung, Embeddings für semantische Suche, DALL-E für Bilderstellung und Whisper für Speech-to-Text. In Kombination mit WeWebs dynamischen UI-Bindings lassen sich KI-gestützte Features, Chatbots, Content-Assistenten, intelligente Suche, Dokumentenanalyse, ganz ohne eigenen Frontend-Code bauen. Entscheidend ist ein sicherer Backend-Proxy, der den API-Key hält und Antworten an WeWeb zurückstreamt. Dazu wird ein OpenAI-Konto angelegt und ein API-Key erzeugt. Ein Backend-Endpoint (empfohlen wird eine Supabase Edge Function) nimmt einen Prompt oder ein messages-Array entgegen, ruft OpenAIs API auf und gibt die Antwort zurück. In WeWeb wird eine REST-API-Aktion genutzt, um diesen Endpoint über einen Button oder ein Eingabe-Event aufzurufen. Die Antwort wird an eine WeWeb-Variable gebunden und in einem Textelement dargestellt. Für Streaming kann das Backend Server-Sent Events nutzen, die WeWeb über eine Custom-JavaScript-Aktion konsumiert.
Anwendungsfälle für WeWeb + OpenAI
Für einen mehrstufigen Chat wird in WeWeb eine messages-Array-Variable gepflegt (Objekte mit role: "user" / "assistant"). Bei jeder Nutzereingabe wird die neue Nachricht dem Array hinzugefügt, das komplette Array an den Backend-Endpoint gesendet, die Antwort des Assistenten empfangen, ebenfalls dem Array hinzugefügt und das Array an eine Listenkomponente gebunden. Das gibt GPT den Gesprächskontext, der für kohärente Antworten nötig ist. Konversationen sollten in Supabase gespeichert werden, für die Historie und geräteübergreifende Fortsetzbarkeit. App Studio hat unter anderem folgende WeWeb + OpenAI Produkte gebaut: KI-Dokumenten-Reviewer, mit denen Nutzer PDFs hochladen und Fragen stellen können, Kundensupport-Chatbots, die auf Produktdokumentation trainiert sind, Content-Generierungs-Dashboards für Marketing-Teams und interne Wissensdatenbank-Suchtools mit Embeddings. Das No-Code-Frontend verkürzt die Zeit bis zu einem nutzbaren KI-Produkt erheblich.
Häufige Probleme und deren Lösung
OpenAI sollte niemals direkt aus WeWeb aufgerufen werden, der API-Key wäre im Browser-Netzwerk-Tab sichtbar. Der Aufruf sollte immer über einen Backend-Proxy laufen. Im Proxy sollte Rate Limiting implementiert werden, um Kostenspitzen durch Missbrauch zu verhindern. GPT-4o-mini eignet sich für Aufgaben mit hohem Volumen und geringer Komplexität, GPT-4o nur dort, wo die Qualität die Kosten rechtfertigt. Häufige Antworten sollten in der Datenbank zwischengespeichert werden, um API-Aufrufe zu reduzieren. Ein Token-Limit für Eingaben verhindert außer Kontrolle geratene Kosten durch große eingefügte Texte.
- AI chatbots
- Content generation
- Document analysis
- Smart search
- Internal knowledge bases
Benötigen Sie Hilfe bei dieser Integration?
App Studio konfiguriert diese Integrationen für Sie. Kostenloses Angebot innerhalb von 48h.