So erstellst du deine eigene ChatGPT App — in 5 Minuten — ohne Code!

Deine eigene No-Code App mit ChatGPT erstellen? Mittlerweile geht auch das…in 5 Minuten. Allein die Möglichkeiten, das zu skalieren. Pssst….Man erkennt nicht mal, dass die mächtige KI von OpenAI dahinter steckt und denkt sich einfach nur: WOW! Das ist ein Game Changer für dein Business! Und macht viele App Agenturen wie unsere, Startup Creator, teils […]

Deine eigene No-Code App mit ChatGPT erstellen? Mittlerweile geht auch das…in 5 Minuten.

Allein die Möglichkeiten, das zu skalieren.

Pssst….Man erkennt nicht mal, dass die mächtige KI von OpenAI dahinter steckt und denkt sich einfach nur: WOW!

Das ist ein Game Changer für dein Business! Und macht viele App Agenturen wie unsere, Startup Creator, teils obsolet (Gott sei Dank für uns reicht es nur bis zu einem gewissen Komplexitätsgrad, eine ChatGPT App ohne Code selbst zu erstellen bzw. sollte zumindest das Design von unseren UI/UX Designern professionell angepasst werden).

Stell dir nur die ganzen Use Cases vor. So gut wie alle großen KI Tools, Copy.ai, Jasper etc., nutzen die Anbindung zu ChatGPT`s Mutter OpenAI.

Und das machen wir heute auch!

Aber das Ganze bleibt nicht nur bei Texterstellung stehen, Nein. Mit Audio, Video, Foto… Foto! Ja, bestes Beispiel: Lensa.

Ich kann die Bilder langsam auch nicht mehr sehen, aber das Geschäftsmodell dahinter ist genial. Die verlangen für die Bilderstellung 39.99 € und nutzen einfach eine fremde Open Source Technologie für die KI.

OpenAI API No-Code Bubble

Den Großteil der Kosten, die sie damit hatten, war schlussendlich für die App Entwicklung.

Ok, allerdings bevor wir uns in Foto, Audio oder Video stürzen, beginnen wir mit Text. Die Basis der meisten KI Tools.

Aber was nutzen die denn? Es werden dabei nur Quellen angezapft. Super easy. Und das zeig ich dir heute in 5 Minuten.

Was du dafür brauchst? 2 Webseiten. Bubble.io, dort wo du deine Web App erstellst & einen Login zur OpenAI API, wodurch du dich mit der ChatGPT Quelle verbindest.

No Code App Tool Bubble.io

Es kostet dich…nichts!

OpenAI schmeißt dir sogar noch 18 Dollar Guthaben hinterher.

Danach ist es Pay as you go, du zahlst nur was du verbrauchst. Aber auch das ist unglaublich günstig!

Hier kannst du ganz easy den Code kopieren und hast ChatGPT in deine Webseite, deine App, alles, integriert und einfach zu erstellen!

Dir fehlen die Coding Skills? Kein Problem. Entweder du fuchst dich rein — OpenAI hat das wahnsinnig gut erklärt in der Dokumentation.

Oder du gehst auf Bubble und lässt dort deine eigene App mit ChatGPT Integration erstellen — ohne eine Zeile Code zu schreiben.

Also einloggen und los geht`s.

Falls du das Ganze lieber als Video verfolgen willst, here you go:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

1. VERBINDEN DER OPENAI API MIT DER BUBBLE APP

Dir wird gleich ein neues Projekt vorgeschlagen: Wähle irgendeinen Namen für die App & jetzt aktivierst du im nächsten Schritt (skippe die ersten 3 Schritte) den API Connector. Klicke auf “Install now”:

API Connector Bubble

Damit kann sich Bubble Informationen aus anderen Anwendungen ziehen, wie bspw. von OpenAI.

Glückwunsch! Du bist drin in deinem allerersten No-Code-App Baukastensystem — mit 3 Klicks!

Oberfläche No-Code-App-Erstellung Bubble

Jetzt gehst du auf Plugins und klickst auf “Add another API” auf der rechten Seite. Der API geben wir den Namen “Chatgpt API”.

ChatGPT API

Du schaffst damit eine Schnittstelle zwischen ChatGPT und Bubble.

Dafür musst du dich allerdings bei OpenAI API anmelden.

Dort kopierst du im Bereich “Chat” den Code auf der rechten Seite.

Und fügst ihn bei Bubble in Plugins bei “Import another call from cURL” ein.

Hier einfügen und auf “Import” klicken.

Das einzige was jetzt noch fehlt ist der Verbindungsschlüssel. Der OpenAI Key.

Dafür gehst du zurück zu OpenAI auf die Seite “View API keys”.

Und erstellst einen neuen API Key (“+ Create new secret key”).

Diesen Key unbedingt abspeichern! Du siehst ihn nur einmal, dann nie wieder! Also, kopieren, irgendwo Bitte abspeichern und tausche auf Bubble in Plugins den blau markierten Bereich “$Open AI KEY” mit deinem eigenen Key aus.

Achtung: Beide Keys auf “Private” stellen (=bei “Private” sollte jeweils ein Häkchen auftauchen).

Jetzt weiter unten auf “Initialize Call” klicken….und….

YESSS!

Wenn dieses Popup auftaucht, bist du verbunden! 🙂

Das zeigt, was für Datenarten du dir ziehen kannst!

Für eine klassische ChatGPT Abfrage zum Erstellen der App, brauchst du fast gar nichts davon. Du solltest also bei fast allen “ignore field” antippen.

Das Einzige, was du brauchst, ist schon voreingestellt. “Choices” und Der “Message Content”….in Textform! Das so stehen lassen wie es ist.

Speichern.

Eine Kleinigkeit, die in “Plugins” nicht vergessen werden sollte, ist den Content dynamisch zu machen. Wir ändern im Body das statische “Hello” in <prompt>.

(Und Private Haken entfernen!)

Die letzte Änderung: Anstelle von “Use as Data” “Use as Action” auswählen.

“Action” auswählen anstelle von “Data”


VERBUNDEN! 🦾

2. DESIGN DER CHATGPT APP

Im Anschluss erschaffen wir noch die Oberfläche. Dafür gehst du im Menü links auf “Design”.

(Achtung: Ja, es heißt zwar Design, aber in diesem Video geht es nicht um schöne Design Elemente. Das kannst du danach noch machen. Es geht rein um die Funktion erstmal!)

Dort erstellst du erstmal eine Container Gruppe.

Hier kannst du jetzt Text einfügen, bspw. eine Überschrift wie “Startup GPT”.

Jetzt fügen wir darunter „Multiline Input“ ein. Hier soll die Frage an ChatGPT erscheinen, also der Input vom Nutzer. Dafür suchst du auf der linken Seite in “Search for new elements…” nach “Multiline” klickst darauf und erstellst wieder im rechten Bereich durch Ziehen eine neue Eingabebox.

Und es braucht natürlich noch einen Button, damit der Nutzer den Input auch abschicken kann.

Wir nennen ihn “Enter”.

Wenn man auf den Button klickt, soll die API von OpenAI gecalled werden und uns die Antwort liefern.

Aaaber…bisher weiß der Button ja noch gar nicht was ihn erwartet. Wir müssen den Workflow festlegen.

Deswegen…Rechtsklick auf den Button und auf “Start/Edit Workflow” gehen.

Bei Workflows legst du fest, wenn abc passiert, dann folgt xyz. If/then.

Bubble natürlich wissen, woher ziehe ich mir denn die Informationen?

Deswegen klicken wir auf “Click here to add action…” und suchen nach der “ChatGPT API”.

Das müssen wir jetzt mit der Eingabe des Nutzers verbinden.

Das war ja standardmäßig “MultilineInput A”, was wir bei “(body) prompt” eingeben. Dabei auf den blauen Bereich “> Insert dynamic data” klicken.

Dann “MultilineInput A`s” “value” auswählen.

Diesen Wert wollen wir.

Nur…wo soll denn der Output Bitte hin? Das haben wir noch gar nicht definiert.

Also brauchen wir noch ein 2. Feld in “Design”.

Und kopieren die existierende Gruppe. (Strg C + Strg V der existierenden Gruppe)

Jetzt sehen wir im “Element tree”, wenn wir es “unhiden” machen, dass dort “Group A” und “Group B” sind.

Die beiden nennen wir “Gruppe Prompt” und “Gruppe Antwort”.

Gruppe Prompt” brauchen wir gerade nicht, und hiden das. Also aufs Auge klicken.

Auch den Inputbereich brauchen wir nicht in “Gruppe Antwort”.

Wir wollen ja einen Output bekommen. Also löschen wir das Feld.

und fügen anstelle dessen einen Text ein.

Auch wichtig, dass die gesamte Gruppe als Text Content festgelegt werden. Dafür an den Rand klicken und in “Appearance” bei “Type of content” “text” auswählen.

Und jetzt stellt sich noch die Frage: Was für einen Output wollen wir denn bekommen? Wir klicken auf “edit me”, klicken auf das blaue Feld “> Insert dynamic data” und dann “Parent group`s text”.

Und wir wollen bevor oder während die Seite lädt “Gruppe Antwort“ gar nicht sichtbar haben. und machen hier den Haken weg. Dafür nochmal auf den Rand der Gruppe klicken und im Bereich “Layout” den Haken entfernen.

 

3. WORKFLOW IN BUBBLE FESTLEGEN

Jetzt ganz am Ende finalisieren wir noch den Workflow.

Wenn jemand also auf den “Enter” Button klickt (Step 1), soll was ausgelöst werden? Richtig, die Info soll aus dem Bereich “Multiline Input A”`s gezogen werden. Der Wert davon, der “Value”!

Step 1: cURL Call
In Step 2 verstecken wir natürlich das 1. Fenster, das braucht es jetzt nicht mehr. Also “Hide Gruppe Prompt”.

Step 2: Hide “Gruppe Prompt”
In Schritt 3 wollen wir das Ergebnis haben, was uns Chatgpt ausspuckt. Also klicken wir auf “Display data in Group Answer”.

Was wollen wir sehen? “Result of step1`s choices first items message content

Step 3: Display data in Gruppe Antwort
Schritt 4: Das Ganze noch anzeigen. Show “Gruppe Antwort”.

Step 4: Show Gruppe Antwort
Und fertig!

Jetzt wird`s spannend! Hat auch wirklich alles geklappt?

Über die “Preview” (oben rechts) können wir testen, ob der Prozess funktioniert. Der Inputbereich wird schon mal reibungslos angezeigt.

Fragen wir bei ChatGPT mal an, ob jemand da ist.

Inputeingabe “Wer bist du?” und die Hoffnung, dass OpenAI antwortet…

Und…Es funktioniert! Wir haben eine Antwort.

Klassische Antwort von OpenAI

Congratulations! Damit hast du deine erste ChatGPT App mit Bubble erstellen lassen! 🥳

Einziges Problemchen: Das Design ist noch Katastrophe und dass sich kein neue Anfrage öffnet, wenn man einmal was gefragt hat.

Aber deine erste No Code Bubble OpenAI API App steht! Glückwunsch!

Wenn du generell noch Unterstützung im Design oder in der Appentwicklung bzw. Webentwicklung benötigst, kontaktiere uns gerne hier.

Happy Creation und viel Spaß mit Bubble und ChatGPT!

zurück zu allen Beiträgen
Florian Hübner
CEO

Kontakt

Jetzt persönlich beraten lassen!

Nach diesem Call haben Sie...

  • eine Vorstellung über Umfang und Kosten Ihres Projekt.
  • einen Plan, welche nächsten Schritte Sie einleiten sollten.
  • eine unvoreingenommene Einschätzung Ihrer Idee.