OpenAI API: KI-basierte Chats, Verkaufsassistenten & Text-Adventures programmieren
- Wie du das LLM von OpenAI in deinen Webseiten, Online-Shops und Games sprechen lässt
- Die Power hinter ChatGPT – so bindest du die API von OpenAI an deine Entwicklungen an
- Beispiel Chat: Programmiere KI-basierte Chat-Apps, die mit deinen Nutzern interagieren
- Beispiel Text-Adventure: Entwickle ein Spiel, in dem die NPCs KI-generierte Antworten geben
- Beispiel Verkaufsassistent: So spricht dein Online-Shop mit deinen Nutzern über Produkte
- Chats auf Basis von KI programmieren – ein über dreistündiges Tutorial von Stephan Haewß
Von künstlicher Intelligenz generierter Text – lerne jetzt, wie du ihn ganz gezielt und spezifisch in deine Anwendungen einfließen lässt.
36 Videos, 209 Minuten
Intro zum Kurs
OpenAI API: 1 | Was erwartet dich im Kurs?
3 minDas erwartet dich in diesem OpenAI-API-Kurs.
Einleitung
OpenAI API: 2.1 | Werkzeuge, die wir benutzen werden
4 minIn diesem Video wird auf die verwendeten Werkzeuge und die erforderlichen Kenntnisse eingegangen.
OpenAI API: 2.2 | Die OpenAI-Plattform
5 minHier geht es um die OpenAI-Plattform und wie man sie verwenden kann.
OpenAI API: 2.3 | WICHTIG: Update der OpenAI-API und von AstroJS
7 minHier geht es um das Update von OpenAI. Erfahre, welche Änderungen es gibt. In der Projektdatei ist nochmal alles Wichtige zusammengefasst.
Chat-App programmieren
OpenAI API: 3.1 | Erstellung des AstroJS-Basisprojekts
5 minWir erstellen unser erstes Projekt mit npm create astro und schauen uns die Struktur des Erzeugnisses an.
OpenAI API: 3.2 | Hinzufügen von React zu unserem Projekt
5 minDa wir für unsere UI auf React setzen, muss Astro JS zuerst noch befähigt werden, React-Komponenten einzusetzen.
OpenAI API: 3.3 | Hinzufügen eines Endpunkts zum Server
4 minUnser Endpunkt für den Chat-Service wird ein get-Request auf die URL /api/chat sein. Diesen Endpunkt richten wir in diesem Video ein.
OpenAI API: 3.4 | Vorbereiten des Aufrufs der OpenAI-API
11 minFür die Aufrufe der OpenAI-API brauchen wir neben einem API-Key, den wir über unser Konto bei der OpenAI-Plattform erzeugen können, auch das openai-npm-Package.
OpenAI API: 3.5 | Übermittlung der Nutzermeldung an die OpenAI-API
5 minZum Testen haben wir einen festen Text auf dem Server verwendet. Hier wollen wir das erste Mal den Text verwenden, der vom Browser in der URL als Query-Parameter geschickt wird.
OpenAI API: 3.6 | Grundlegende UI in React
7 minNur über die URL in der Adressleiste des Browsers zu chatten ist keine Dauerlösung. Deswegen erstellen wir in diesem Video eine rudimentäre React-UI, die die Eingabe des Chat-Texts erlaubt.
OpenAI API: 3.7 | Speichern des Chatverlaufs
8 minNoch haben wir keinen richtigen Chat, sondern nur eine Frage und die Antwort darauf bekommen. Um ein ergiebiges Gespräch mit dem LLM zu führen, müssen wir uns den Chatverlauf merken.
OpenAI API: 3.8 | Zurücksetzen des Chats
5 minManchmal möchte man einfach von vorne anfangen und das Gesagte vergessen. Damit dazu nicht der Server neu gestartet werden muss, verwenden wir eine Chat-ID, um den Chatverlauf auf dem Server zurückzusetzen.
OpenAI API: 3.9 | UX verbessern
9 minBisher war das Chatten noch sehr rudimentär. Hier werden einige Verbesserungen eingebaut, die unsere Chat-App etwas mehr in Richtung ChatGPT schieben.
OpenAI API: 3.10 | Chatverlauf aufhübschen
7 minDer Chat-Verlauf war bisher nicht gut zu lesen und wird in diesem Video etwas „schöner“ gemacht.
OpenAI API: 3.11 | Zusammenfassung: Erste Chat-App
2 minNun ist unsere erste Chat-App fertig und doch gäbe es noch viel zu tun, wenn man ChatGPT Konkurrenz machen möchte. ;-) Wer das nicht möchte, kann im nächsten Abschnitt mit einem neuen Projekt weitermachen.
KI-Chat in einem Text-Adventure-Spiel
OpenAI API: 4.1 | Erstellen des Projekts
5 minWir setzen das neue Projekt auf und bedienen uns dabei bei unserer ersten Chat-App.
OpenAI API: 4.2 | Die Geschichte
6 minEin Spiel braucht eine Geschichte. In diesem Video stelle ich meine Idee dafür vor und treffe erste Vorbereitungen für die Navigation durch das Spiel.
OpenAI API: 4.3 | Die Quests vorbereiten
5 minDrei Quests (Chats) muss der Spieler bestehen, um zum (vorläufigen) Ende des Spiels zu gelangen. Diese bereite ich in diesem Video vor.
OpenAI API: 4.4 | Der erste KI-Chat
4 minDer Barkeeper ist der erste Chat-Partner in diesem Spiel und wird in diesem Video „zum Leben erweckt“.
OpenAI API: 4.5 | System-Prompt für den Barkeeper
9 minBisher war der Barkeeper etwas ahnungslos ob seiner Rolle im Spiel. Wir schaffen Abhilfe, indem wir das erste System-Prompt einbauen.
OpenAI API: 4.6 | Funktionsaufrufe
6 minUnser Chat-Partner ist in seiner Rolle als Barkeeper aufgegangen, aber wir wissen im Programm noch nicht, ob der Quest durch den Spieler erfüllt wurde. Dazu bieten sich Funktionsaufrufe an, die das LLM von sich aus tätigen kann, wenn es dies für angebracht hält. Wir müssen dafür sorgen, dass es dies auch tut.
OpenAI API: 4.7 | Funktionsaufrufe: Bereitstellung des Ergebnisses
6 minFunktionsaufrufe können Rückgabewerte haben und diese müssen wir der KI auch mitteilen, was wir in diesem Video bewerkstelligen.
OpenAI API: 4.8 | Quest als erledigt markieren
4 minDer Client (Browser) muss benachrichtigt werden, dass der Quest erledigt wurde, denn dann kann der Spieler auch mit Dr. Owen sprechen und dem Ziel etwas näherkommen.
OpenAI API: 4.9 | Den Chat verlassen
9 minAuch das schönste Gespräch muss ein Ende haben, aber wie kriegen wir dies im Programm mit? Durch einen Funktionsaufruf natürlich.
OpenAI API: 4.10 | Mit Dr. Owen sprechen
4 minEndlich kann der Spieler mit dem KI-Experten sprechen, um von ihm die Lösung des letzten Rätsels zu erfahren.
OpenAI API: 4.11 | Neuen Chat auf dem Server starten
8 minBarkeeper und Dr. Owen sind zwei verschiedene Charaktere und dürfen sich deswegen keinen Chat-Verlauf teilen. Deswegen sollten wir für Dr. Owen einen neuen Chatverlauf anlegen.
OpenAI API: 4.12 | Neue Quest-Funktion für Dr. Owen bereitstellen
6 minDr. Owen braucht eine Funktion, damit wir erfahren, dass der Spieler nach der Lösung seines kleinen Security-Robot-Problems gefragt und eine Antwort erhalten hat. Diese bekommt er in diesem Video.
OpenAI API: 4.13 | Chat mit dem Sicherheitsroboter
9 minUnser Endgegner in diesem Spiel ist der Sicherheitsroboter, der uns die ganze Zeit nicht vorbeilassen wollte. Nun aber hat der Spieler die Macht oder vielmehr das Wissen, um ihn letztlich doch zu überlisten.
Virtueller Verkaufsassistent für einen Online-Shop
OpenAI API: 5.1 | Erstellen des neuen Projekts
8 minUnser neues Projekt führt uns in die Welt der Gitarren-Shops, natürlich mit freundlicher Unterstützung der OpenAI-API, die es uns erlaubt, einen virtuellen Verkaufsassistenten zu realisieren.
OpenAI API: 5.2 | Bessere Produktsuche
7 minBisher war der Verkaufsassistent noch nicht besonders gut bei der Beratung. Dies soll jetzt mit einer simulierten „Datenbank“ mithilfe von Maps verbessert werden.
OpenAI API: 5.3 | Mehr Produkte
3 minBisher hatten wir nur 2 Produkte, die wir in diesem Video auf 4 aufstocken. Wichtig ist hierbei, dass wir nun mehrere Produkte pro Typ haben und somit den Verkaufsassistenten z. B. fragen können, welche E-Bässe im Sortiment sind.
OpenAI API: 5.4 | Mehrere Parameter in Funktionsaufrufen
5 minDer Preis ist beim Gitarrenkauf zwar nicht alles, aber ein Kunde, der keine neue Hypothek auf sein Eigenheim aufnehmen will, sollte schon in der Lage sein, den Verkäufer nach E-Gitarren im unteren oder mittleren Preisbereich zu fragen. Dies erreichen wir mit einem zweiten Parameter priceRange bei der entsprechenden Funktion, die das LLM dann aufrufen soll.
OpenAI API: 5.5 | Fix für nicht definierten Preisbereich
3 minWir haben es kaputt gemacht mit dem letzten Video. Aber keine Sorge, der Fehler ist schnell behoben, wenn man weiß, wo man suchen muss.
OpenAI API: 5.6 | Produkt in den Warenkorb legen
5 minWas wäre ein Online-Shop ohne Warenkorb? Obwohl wir keinen richtigen Warenkorb implementieren werden (darum geht es in diesem Kurs ja nicht), werden wir in diesem Video aber die Grundlagen schaffen, damit ihr einen Warenkorb an den virtuellen Verkaufsassistenten anbinden könnt. Auch hier hilft wieder … der Funktionsaufruf!
OpenAI API: 5.7 | Unscharfe Produktsuche
6 minKunden werden in den meisten Fällen die Namen der Produkte nur ungefähr kennen. Das LLM kann den Funktionsaufruf nur mit den Namen machen, die in der Anfrage des Kunden stehen. Aber mit einem kleinen Trick lässt sich für diese Fälle die KI recht einfach für eine „unscharfe“ Suche in den Produktnamen nutzen.
Fazit
OpenAI API: 6 | Was wurde gelernt, was gibt es noch?
6 minEin kleines Fazit, was wir in diesem Kurs erreicht haben, was ihr daraus machen könnt und welche spannenden APIs es bei OpenAI noch gibt.
Kommentiere jetzt „OpenAI API: KI-basierte Chats, Verkaufsassistenten & Text-Adventures programmieren“