Open ChatGPT: Mit dem WordPress-Plugin AI Engine den KI-Chatbot auf einer Webseite einbinden!

Veröffentlicht am 11. April 202323. Juli 2023 von Matthias Kindt

Allgemeine Datenschutzproblematik
Integration von AI Engine in WordPress
Einsatzmöglichkeiten im Überblick
Prompt-Transparenz
Kosten & Tokenisierung
Inklusion & ChatGPT
Datenübertragung & API-Haftung

Aktuell ist OpenAI mit seinem Chatbot GPT wohl das Top-Thema und wird natürlich auch im Bildungsbereich heiß diskutiert. Bei uns in Deutschland stellt sich beim Einsatz von neuen Tools reflexartig die Frage: „Dürfen wir diese Anwendung überhaupt im Rahmen von Unterricht & Lehre einsetzen oder ist das Tool datenschutzrechtlich (DSGVO) mal wieder ein großes Problem und somit strikt verboten?” Der rechtliche Umgang mit Programmen, die auf Grundlage künstlicher Intelligenz (KI) arbeiten, ist rechtlich noch nicht final geklärt, aber in diesem Beitrag wird schon mal ein alternativer Weg seitens der GPT-Nutzung von OpenAI aufgezeigt.

Das Problem mit dem Datenschutz: Kreative Lösungswege sind (mal wieder) gefragt!

Zurzeit läuft die Nutzung von ChatGPT über die offizielle Webseite von OpenAI, auf der sich die User einloggen und so die Künstliche Intelligenz (KI) für diverse Zwecke, etwa im Rahmen von Texten, Übersetzungen oder dem Schreiben ganzer Programmcodes einsetzen können. Für die Erstellung eines Kontos ist die Angabe von Name, E-Mail-Adresse und Mobilfunknummer zwingend notwendig. Genau an diesem Punkt schreckt der “oberste Datenschützer” hoch und erteilt nicht selten für den Bildungsbereich und insbesondere im Rahmen des Schulunterrichts ein klares NEIN! Dies bedeutet, also das Tool ist für den Gebrauch an Schulen oder auch Hochschulen für Erste verboten! Um dies an dieser Stell zu verdeutlichen: Die für ein OpenAI-Konto eingetragen Daten werden in die USA und dort in den Bundesstaat hin zur Firmenzentrale von OpenAI in San Francisco übertragen, wo die Firmenserver die jeweiligen Daten speichern und verarbeiten. Dies ist definitiv ein großes Problem, da vor allem sensible Schülerdaten nicht einfach so umfangreich auf die Schnelle über den Atlantik übertragen werden dürfen. Hierfür gibt es schließlich Regeln, die im Rahmen der Datenschutzverordnung DSGVO festgelegt wurden.

Nachdem also dieser offizielle und wohl einfachste Weg zur umfangreichen Nutzung von ChatGPT im Bildungsbereich in weite Ferne rückt, muss man sich nach Alternativen umschauen, die “datenschonender” ausfallen. Im besten Falle sollten Lernende und natürlich auch Lehrende überhaupt keine persönlichen Daten angeben müssen, aber dies ist häufig eine Wunschvorstellung und geht schwer an der Realität vorbei, da Firmen in unserer heutigen Zeit stetiger Digitalisierung schließlich nicht wenig Geld mit der Verarbeitung von Daten verdienen. Also was machen wir nun, um diesen Megatrend der Sprach-KIs wie GPT hierzulande nicht zu verpassen? Sollten Schüler & Studierenden in Deutschland nun auf diese so innovative AI-Technologe verzichten und können sich Lehrkräfte und Dozierende nun eine mögliche Entlastung unter anderem bei der Lehr- & Unterrichtsvorbereitung komplett abschminken? Definitiv NEIN! Es gibt kreative Möglichkeiten GPT & Co auch ohne Angabe von Daten einzusetzen.

GPT in WordPress via API integrieren? Das Plugin “AI Engine” macht’s möglich!

Die Bedeutung von WordPress als Schlüsselqualifikation!

WordPress ist ein Custom-Management-System, das im Jahr 2021 auf einen weltweiten Marktanteil unter den CMS von 63,5 % kam und so mit (sehr) großem Abstand ganz vorne lag! An allen Webseiten weltweit hat WordPress einen Anteil von 43 %. Bei insgesamt 1,88 Milliarden Webeiten (2021) sind dies unglaubliche Zahlen und zeigt die Beliebtheit der kostenfreien Open-Source-Anwendung. Jeder Studierender sollte aus meiner Sicht über fortschrittliche Kenntnisse in diesem Bereich verfügen, aber dies ist wiederum ein anderes Themenfeld! Also let’s go!

So läuft die Verbindung via API zu OpenAI ab

Um ChatGPT auf der eigenen Webseite einbinden zu können, ist eine sogenannte API (Schnittstelle) notwendig. APIs sind i.d.R. eine Kombination aus Zahlen, Buchstaben & Sonderzeichen und ermöglichen durch korrektes Einbinden die dauerhafte Kommunikation zwischen den zugehörigen Servern. Der Browser (Firefox, Chrome, Edge…) visualisiert diese Kommunikation anschließend. Als Beispiel soll an dieser Stelle unidigital.news dienen. Die Domain und natürlich auch die WordPress-Dateien & Datenbank liegen beim Hoster der Hetzner GmbH in Bayern, Gunzenhausen. Wir möchten nun eine Verbindung zum Server von OpenAI in San Francisco herstellen, auf dessen Servern wiederum ChatGPT abläuft. Dabei hilft uns das Plugin AI Engine, dass sozusagen als Dritter fungiert und sehr einfach eine Verbindung dorthin ermöglicht. Das Plugin gehört zu Meow Apps, die ihre Anwendung über einen Server in Japan, Tokyo laufen lassen und über eine Entwickler-API bei OpenAI verfügen. Wir sprechen hier also über eine dauerhaft aktive Dreiecksbeziehung mit Severstandorten in den USA, Japan & Deutschland.

AI Engine (Premium) einrichten

Bevor wir unsere Verbindung quer über den Globus einrichten, müssen wie jedoch zuerst das Plugin installieren und auch aktivieren. Links im der Navigation Eures WordPress-Dashboards gibt es den Reiter Plugins installieren. Dort drauf klicken und im Anschluss in der Plugin-Suche AI Engine eingeben. Nun zeigt Euch die Suche diverse Plugins wie auch unsere favorisierte Anwendung, die mit einem schicken Bild im Stile einer “Cyborg-Katze” versehen wurde.

screen ai engine installation — Im Dashboard unter “Plugins installieren” in die Suche “AI Engine” eingeben und die Anwendung installieren & aktivieren

Nachdem die Aktivierung abgeschlossen ist, taucht in der linken Navigation im Dashboard der Reiter Meow Apps auf, der wiederum die Unterpunkte Dashboard und AI Engine aufweist. Letzterer ist für die Einrichtung unserer WordPress-Erweiterung interessant. Kurz zu Erklärung: Die kostenlose Version von AI Engine ist nun installiert und kann genutzt werden. Diese Beschreibung läuft fortan mit der Premium-Version weiter, da diese mit umfangreicheren Funktionen wie dem Finetuning ausgestattet ist. Aber auch mit der Free-Version ist so einiges möglich! Der Preis für die kostenpflichtige Version beträgt pro Jahr 29 $, ist auf der Webseite von Meow Apps zu erwerben und als ZIP-Datei herunterzuladen. Übrigens finde ich persönlich den Preis sehr angemessen, entspricht in etwa je nach Region & Weizenpreis 3-5 Mehrkornbrötchen pro Monat 😉. Zudem ist es nach meinen Erfahrungen bei wichtigen Plugins, die häufig zum Einsatz kommen, wichtig einen Support an der Seite zu haben. Und dies geht nur über die bezahlpflichtige Variante.

Nun also die ZIP-Datei von der Webseite herunterladen und beim Unterpunkt Plugins installieren und Plugin hochladen (Button) in WordPress wieder uploaden. Im Anschluss die Premium-Version aktivieren und auf jeden Fall die freie Version von AI Engine wieder deaktivieren. Tut Ihr dies nicht, kann es sein, dass “Premium nicht greift” und immer noch die kostenfreie Anwendung läuft. Sehr ärgerlich und durchaus zeitaufwendig diesen Fehler zu finden! Noch ein Tipp: Zur Integration nutzt den Gutenberg-Block AI Chatbot, den Ihr über die Block-Suche (Plus-Zeichen) findet.

API verbinden: Die Leitung steht!

Nachdem nun AI Engine in der Premium-Version voll zugänglich ist, wird nun die API eingerichtet. Zur Erklärung: Jeder Nutzer von OpenAI, der oder die sich registriert hat, verfügt über eine API, ganz egal, ob die kostenfreie oder kostenpflichtige Anwendung verwendet wird. Eure API auf der Webseite von OpenAI findet Ihr unter folgender URL:

https://platform.openai.com/account/api-keys

OpenAI-API: Achtet darauf, dass die API nur den verantwortlichen Personen zugänglich ist!

Den API-Code, der Euch auf der Seite schon angezeigt wird oder den ich dort generiert, benötigt Ihr nun, um das Plugin AI Engine mit unserem Server zu verbinden. Also kopiert diesen “Buchstaben-Zahlen-Mix” und fügt ihn im richtigen Reiter des Plugins ein. Dazu klickt Ihr im WordPress-Dashboard links in der Navigation auf den neuen Unterpunkt Meow Apps und anschließend auf AI Engine. Nun wird der Punkt Einstellungen ausgewählt. Dort wiederum ist ein freies Feld mit der Bezeichnung API-Schlüssel vorhanden. Genau dort wird die OpenAI-API eingefügt (Copy & Paste). Direkt nachdem der Code eingefügt wurde, steht die API-Verbindung zu den Servern von OpenAI. Es gibt keinen grünen/blauen/roten Button, den Ihr drücken müsst, also bitte nicht danach suchen.. Nehmt Ihr den Key wieder raus, ist diese umgehend unterbrochen (Error-Meldung)!

Screen API Schlüssel — Copy & Paste und Zack, die Verbindung steht! Sehr einfach!

Wie soll das Plugin genutzt werden?

Szenario 1: Passwortschutz

Die wohl einfachste Lösung, etwa für einen Lehrer oder eine Dozentin wäre die Bereitstellung von ChatGPT auf ihrer/seiner Webseite mit einem Passwort. Betrete ich diese Seite etwa als Schülerin oder Student, dann werde ich aufgefordert eine Buchstaben- und Zahlenkombination (Passwort) einzugeben, die ausreicht, um das KI-Tool umfänglich zu nutzen. Nur das Passwort eingeben und los geht’s! Dieses wird vom Admin innerhalb der Webseite auf der rechten Navi beim Punkt Sichtbarkeit und Passwortgeschützt festgelegt. Der Vorteil ist hierbei, dass ungebetene Gäste gar nicht erst Zugriff zu OpenGPT erhalten und so durch ihre potenziellen Prompts keine unkalkulierbaren Kosten beim Webseitenbetreiber bzw. dem Besitzer der API entstehen. Bei diesem Weg haben alle beteiligten Personen gleichermaßen Zugriff auf diesen einen Plugin-Embed. Das Passwort sollte vom Admin direkt nach jeder Session geändert werden, damit es nicht “aus Versehen” an Unbeteiligte weitergegeben werden kann. Natürlich wird stets die Nutzung eines Virtual Priovate Network (VPN) empfohlen, um die IP-Adresse der Nutzer zu verschleiern. Safety First!

Szenario 2: WordPress-Login

Bei dieser Variante erhält jeder Lernende einen eigenen WordPress-Account mit der WordPress-Rolle Autor. Hierfür ist ein Name und eine E-Mail erforderlich. Diese Lösung hätte einen ganz besonderen Charme, da nun der Administrator (Webseitenbetreiber) jedem Lernenden auf einer eigenen Beitragsseite einen ganz eigenen GPT-Embed setzen könnte. Also z.B. 20 Studierende = 20 Beitragsseiten = 20 GPT-Embeds. Unterhalb des Embeds könnten direkt eingebundene Aufgaben der Lehrerin oder des Dozenten via Texteditor (Empfehlung: Plugin TinyMCE Advanced) bearbeitet werden. Vorab ist zu überlegen, ob Seiten (statisch) oder Beitragsseiten (dynamisch) einzurichten sind. Entscheidet man sich für Beitragsseiten, die sich an der Aktualität, also am Datum orientieren und somit dynamisch sind, ist es möglich alle Beiträge der Studierende in einer Bloghistorie festzuhalten. Der aktuellste Beitrag steht dabei ganz oben. Auch könnten so alle Lernenden Einblick in die Texte der Kollegen haben. Je nach Lernprozess gibt es für beide Varianten Einsatzmöglichkeiten. Beiträge und Seiten können natürlich jederzeit gelöscht werden, falls dies etwa aus datenschutzrechtlichen Gründen nachträglich gewünscht ist.

screen admin — Nach dem Login erhält die/der Studierende Zugriff zu ihrer/seiner eigenen (Beitrags-)Seite

Ein großer Vorteil dieser Variante ist die Möglichkeit der Lehrenden sich aktiv in die Beiträge/Seiten der Lernenden einzuloggen und dort etwa Notizen bezüglich Hilfestellungen zu hinterlassen (siehe oben grüner Text).. Natürlich lässt sich das Design (Orange) des Chatbots GPT 3.5 beliebig in den Plugin-Einstellungen anpassen.

Starte eine Gesprächsführung mit GPT 3.5. Die AI-Antwort wird in einem Stück generiert.

Prompt-Transparenz: Was haben die Lernenden eingegeben?

Das für mich beste Features des WordPress-Plugins AI Engine ist die Einsicht des Administrators auf die gesamte Gesprächsführung in die Ein- & Ausgabehistorie!. So können Lehrende also transparent sehen, welche Prompts von den Lernenden eingegeben wurden. Hierbei geht es nicht um Kontrolle oder Überwachung der Schüler oder Studierenden, sondern dies ermöglicht den Lehrern oder Dozierenden ganz gezielt auf die größten Fragestellungen etwa im Rahmen der nächsten Veranstaltung einzugehen. Wenn nach einem Themenpunkt sehr häufig gefragt wird, dann könnte dies ein Zeichen dafür, dass es diesbezüglich noch erhöhten Klärungsbedarf gibt, den man z.B. bei einer anstehenden Fragestunde genauer unter Lupe nimmt. Dies kann als eine Art Auswertung der GPT-Fragen gesehen werden und erhöht womöglich langfristig die Lerneffizienz der Beteiligten. Übrigens, die Grafik unten zeigt meinen Beispiel-Prompt (linke Seite) bzw. den gesamten Gesprächsverlauf von User & AI (rechte Seite) aus der obigen Grafik.

screen — Jeder prompt und auch die KI-Ausgabe ist in einer kompletten Gesprächsführung einsehbar

Zusätzlich ermöglicht es dem Lehrenden eine ewige Historie einzusehen, die etwa die Prompts der letzten 5 Jahre der Lernenden offen legt. Wie haben sich die Eingaben verändert und woran hat es gelegen? Dies hat auch klar einen Forschungscharakter. Also neben der klassischen Lehre lässt sich so dieser Themenbereich näher erforschen, welche Einflussnahmen das “Prompting” auf den gesamten Lernprozess hat. Es würde sich auch anbieten, diese Historie von einer künstlichen Intelligenz durchgehen zu lassen, um noch zeiteffizienter arbeiten zu können. Schließlich würden in einigen Jahren so einige Datensätze hinzukommen, die eine KI natürlich viel schneller & genauer nach den gewünschten Keywords durchstöbert.

Wie wird abgerechnet? Tokenisierung & Limits setzen!

Die erhobenen Preise bei AI Engine beziehen sich auf die von OpenAI. Es wird also kein Preisaufschlag berechnet. Bei der Abrechnung via API ist die Bezeichnung Token wichtig. ChatGPT mit GPT 3.5 Turbo liegt bei 0,02 € pro 1,000 Tokens. 1,000 Token entspricht ungefähr 750 Wörtern. Dieses Modell wird auch gerne Tokenisierung genannt. Als Premium-User von ChatGPT wird ein monatlicher Festbeitrag fällig und man erhält im Gegenzug eine Flat. Bei der Nutzung von GPT über eine API ist dies nicht möglich. Es wird individuell über die jeweiligen Eingaben abgerechnet (Tokens).

Die Zahlung erfolgt etwa über eine Kreditkarte, die man hinterlegen und umgehend auch wieder löschen kann. Dies geht wirklich sehr einfach, ohne dass irgendwo der Button gesucht werden muss. Als oberstes Usage Limit ist die Obergrenze von 120 $ im Monat voreingestellt. D.h. im absoluten Worst-Case-Szenario, also falls Eure API aus welchem Grund auch immer etwa im Zuge eines erfolgreichen Hackerangriffs kompromittiert wurde, verliert Ihr monatlich maximal 120 $, sofern Ihr OpenAI nicht gesondert mit einer Mail um eine Anhebung dieses Limits gebeten habt. Davon rate ich zwingend ab. Belasst diese Obergrenze, um Euch zu schützen! An dieser Stelle möchte ich auch darauf hinweisen, dass Ihr ebenfalls über das WordPress-Plugin AI Engine Limits einrichten könnt, jedoch gehe ich in diesem Beitrag nicht darauf ein, da ich Euch wärmstens empfehle dies ausschließlich über die Webseite von OpenAI zu tun. Dies ist auf jeden Fall sicherer und man hat im Worst-Case nur einen Ansprechpartner!

Übersicht von Limits und Kosten: Eine regelmäßige Kontrolle wäre wichtig!

Im obigen Screenshot ist zu sehen, dass ebenfalls Soft Limit und Hard Limit eingestellt werden können. Ist das Soft Limit erreicht, erhaltet Ihr eine Nachricht. Beim Erreichen des Hard Limits wird der Betrieb des GPT-Embeds umgehend gestoppt. Es fallen dann auch keine Kosten mehr an. Es wird nur berechnet, was Ihr verbraucht. Meine Empfehlung: Setzt den Betrag bei beiden Limits gleich, dann kommt es auch zu keinerlei Missverständnissen. Dies handhabe ich bei mir ebenso. In der obigen Grafik ist erkennbar, dass ich für beide Limits den Wert 8 $ gesetzt habe. Die Limits sind jederzeit anpassbar! Übrigens direkt über dem Hard Limit ist die Current Usage zu sehen, also der Betrag (4.86 $), den ich bislang im Monat (Usage this month) verbraucht habe. Checkt regelmäßig diese Beträge und schaut dort mal drüber. Es ist auch wichtig ein Gefühl für den Verbrauch zu bekommen und um zu überprüfen, ob das Limit nicht schon zu 99 % erreicht ist.. Dann geht Ihr insgesamt viel entspannter mit der ganzen API-Thematik um.

usage — Zeigt die monatliche Statistik mit den jeweiligen Tageswerten in Dollar $ an

In Eurem Account findet Ihr auch die monatlichen Statistiken rund um Eure API-Nutzung. Ihr seht dann direkt, wie viel das gestrige Seminar gekostet hat bzw. wie die Prompts der Studierenden abgerechnet wurden. Auch diese Werte solltet Ihr vor allem zu Beginn direkt checken, um zu erkennen, was denn nun alles so an Kosten anfallen.

GPT inklusiv nutzen: Design, Schriftgröße & Schriftfarbe anpassen!

Übrigens lässt sich das Design etwa hinsichtlich der Oberfläche von GPT, aber auch der Schriftgröße & Schriftfarbe beliebig ändern. Im unteren Screenshot ist die Schriftgröße z.B. auf 28px und die Schriftfarbe auf #6de52c gesetzt. Vor allem im inklusiven Bildungsbereich ist die flexible Auswahl dieser Variablen nicht ganz unwichtig. Farben spielen insbesondere bei Kindern eine große Rolle. Lässt sich etwa mit der Schriftfarbe Grün entspannter lernen, dann ist dies kein Problem! Dies ist momentan bei der Nutzung von ChatGPT über die offizielle Webseite von OpenAI so (noch) nicht möglich. Schaut Euch dazu im Bereich Design unter dem Reiter Chatbot um und optimiert diese Pre-Einstellungen. Das Plugin bietet so einige nützliche Features. Der Zeitaufwand lohnt sich!

Zusätzlich zu den vorhandenen Designeinstellungen lassen sich auch noch weitere Anpassungen via CSS vornehmen. Diese können u.a. im Customizer des Themes gesetzt werden, aber dies würde ich an dieser Stelle nicht empfehlen, da AI Engine ausreichend Möglichkeiten bietet das Interface zu verändern (siehe unten).

Design flexibel anpassen und fix einrichten. Es lohnt sich!

Welche Daten werden denn nun weitergegeben und wie sieht’s eigentlich mit der Haftung aus?

Jetzt mal ganz ehrlich, welche Daten werden denn nun erhoben? Falls die Lernenden einen VPN-Schutz nutzen, werden ausschließlich die Eingaben (Prompts) an das Plugin AI Engine, OpenAI und auch an Euch als Admins (Plugin-Einsicht) übertragen. Ohne VPN-Schutz wäre dann noch die IP sichtbar, aber mittlerweile ist ein Virtual Private Network, also ein zwischen-geschalteter (VPN-)Server, der die IP-Adresse in eine für den Browser nicht lesbare Zahlen-Kombination umwandelt ja Standard!

Eure API, also die vom Webseitenbetreiber ist sowohl bei OpenAI als auch bei AI Engine im System gespeichert. Es ist ratsam in regelmäßigen Abständen eine neue API bei OpenAI zu generieren und die Alte zu entfernen. Dies geht über den Button create new secret key. Achtet darauf, dass die alte API auch wirklich gelöscht wurde. Dafür ist rechts neben der alten API der schicke Papierkorb-Icon da.

Zur Haftung: Falls Studierende nicht in der Lage sind, mit ChatGPT in einem verantwortungsvollen Rahmen umzugehen, ist aus meiner Sicht nicht der Webseitenbetreiber haftbar. Gibt etwa ein Studierender persönliche Daten von sich oder anderen über das Interface ein, dann ist er oder sie selber Schuld, falls es da Konsequenzen geben sollte. Von (volljährigen) Studierenden kann man schließlich erwarten, dass sie sich im Umgang mit solch einer KI darüber bewusst sind, was geht und was auf jeden Fall nicht. Natürlich sollte eine Lehrperson dies im Vorfeld der AI-Session allen beteiligten Lehrenden verständlich erklären.

Im Rahmen eines “Tabletseminars” kann das Lehrpersonal ganz bewusst auf eine Verschlüsselung der IPs via VPN verzichten, um eine temporäre Zuordnung von IP und Studierenden vornehmen zu können. So kann jeder Prompt einem Studierenden zugeordnet werden. Dies sollte auch den Studentinnen & Studenten vor Ort klargemacht werden. Trotzdem bleiben sie anonym und keinerlei Daten werden in Richtung OpenAI übertragen.

Falls Lehrende überhaupt kein Risiko bei der API-Haftung eingehen möchten, wäre ein eleganter Weg, die Nutzung von ChatGPT auf einer externen Webseite durchzuführen, die nur durch ein Passwort geschützt ist. Übrigens, die Bereitstellung von WordPress-Plugins wie AI Engine für die Allgemeinheit ist völlig legal! Das geht schwer in Richtung Bildungsauftrag. Eventuell gibt es dafür sogar noch Fördergelder 😉

GPT 3.5 testen

Falls Ihr den GPT-Embed vorab testen möchtet, dann könnt Ihr dies gerne über folgende Webseite tun. Sofern Ihr Bildungsbeteiligter seid, schreibt mir dazu gerne eine Mail an info@unidigital.news