OpenAI API: KI-basierte Chats programmieren

OpenAI API: KI-basierte Chats, Verkaufsassistenten & Text-Adventures programmieren

Du möchtest KI-basierte Chats entwickeln, die sich – ähnlich wie ChatGPT – mit deinen Nutzern unterhalten? In diesem Kurs zeigt dir Entwickler Stephan Haewß, wie du die API von OpenAPI für deine Zwecke einspannst. An drei Beispielen (einem Chat, einem Verkaufsassistenten für Online-Shops und einem Text-Adventure) lernst du, deine Webseiten und Apps so sprechen zu lassen, dass sie passende Antworten auf die Fragen deiner Nutzer bereithalten.

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.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

Details

Inhalt: 3 h Video-Training
Lizenz: private und kommerzielle Nutzungsrechte
Bonus: inklusive Arbeitsmaterial

Kategorien

KI & Trends, Webdesign, CMS & Entwicklung

Mit Liebe erstellt von:

Stephan Haewß

Intro zum Kurs

Kostenlos

OpenAI API: 1 | Was erwartet dich im Kurs?

Das erwartet dich in diesem OpenAI-API-Kurs.

Einleitung

Kostenlos

OpenAI API: 2.1 | Werkzeuge, die wir benutzen werden

In diesem Video wird auf die verwendeten Werkzeuge und die erforderlichen Kenntnisse eingegangen.

Kostenlos

OpenAI API: 2.2 | Die OpenAI-Plattform

Hier geht es um die OpenAI-Plattform und wie man sie verwenden kann.

OpenAI API: 2.3 | WICHTIG: Update der OpenAI-API und von AstroJS

Hier geht es um das Update von OpenAI. Erfahre, welche Änderungen es gibt. In der Projektdatei ist nochmal alles Wichtige zusammengefasst.

Projektdatei herunterladen

Chat-App programmieren

OpenAI API: 3.1 | Erstellung des AstroJS-Basisprojekts

Wir erstellen unser erstes Projekt mit npm create astro und schauen uns die Struktur des Erzeugnisses an.

Projektdatei herunterladen

OpenAI API: 3.2 | Hinzufügen von React zu unserem Projekt

Da 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

Unser 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

Fü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

Zum 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

Nur ü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

Noch 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

Manchmal 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

Bisher 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

Der 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

Nun 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

Wir setzen das neue Projekt auf und bedienen uns dabei bei unserer ersten Chat-App.

Projektdatei herunterladen

OpenAI API: 4.2 | Die Geschichte

Ein 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

Drei 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

Der 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

Bisher 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

Unser 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

Funktionsaufrufe 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

Der 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

Auch 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

Endlich 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

Barkeeper 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

Dr. 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

Unser 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

Unser 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.

Projektdatei herunterladen

OpenAI API: 5.2 | Bessere Produktsuche

Bisher 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

Bisher 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

Der 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

Wir 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

Was 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

Kunden 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?

Ein kleines Fazit, was wir in diesem Kurs erreicht haben, was ihr daraus machen könnt und welche spannenden APIs es bei OpenAI noch gibt.

Details zum Inhalt

Entwickle KI-basierte Chats für Webseiten, Apps, Online-Shops und Spiele
Neue Fähigkeiten für dich als Entwickler: Nach diesem über dreistündigen Kurs bist du in der Lage, die API von OpenAI an deine Entwicklungen anzubinden und gezielt zu nutzen. Ein Chat, der jederzeit mit Nutzern interagiert? Ein Verkaufsassistent, der die Produkte eines Online-Shops kennt und Kunden dazu Auskunft gibt? Oder wie wäre es mit einem Computerspiel, in dem die NPCs sich fröhlich und in bestimmten Rollen mit KI-basierten Antworten mit den Spielern unterhalten? Anhand dieser drei Beispiele lernst du, das Large Language Model (LLM) von OpenAI für deine Zwecke zu nutzen.

ChatGPT macht es vor – so nutzt du die API von OpenAI

Nach einer Einführung in den Kurs, die verwendeten Werkzeuge und die OpenAI-Plattform entwickelst du direkt eine Chat-App, die KI-generierte Antworten ausspielt. Richte das Basisprojekt ein, binde die OpenAI-API an und lerne dann alle wichtigen Kniffe kennen, um deinen Chat wie ChatGPT sprechen zu lassen.

Im zweiten Teil des Kurses erstellst du ein Spiel im Stile eines Text-Adventures. Die besonderen Herausforderungen hier: Zum einen müssen die NPCs eine bestimmte Rolle einnehmen (zum Beispiel in der Rolle eines Barkeepers sprechen). Zum anderen muss das LLM wissen, auf welche Antwort das Gespräch mit dem Spieler zwingend hinauslaufen muss und wann der Nutzer bereits eine bestimmte Aktion ausgeführt hat.

Im abschließenden Abschnitt des Tutorials gibst du dem LLM Auskunft über das Produktportfolio eines Online-Shops. Damit ausgestattet, kann der von dir entwickelte Verkaufsassistent Kunden über die Produkte informieren.

Drei konkrete Beispielanwendungen, zu denen ebenfalls die Projektdateien beiliegen – lerne jetzt, KI-generierte Textantworten ganz spezifisch in deine selbst entwickelten Chats einzubinden.

Für wen eignet sich dieser Kurs zur API von OpenAI?

Der Kurs richtet sich an Entwickler, die KI-basierte Chat-Anwendungen für Webseiten, Online-Shops, Apps und Spiele erstellen möchten. Starte in das Training, wenn du als Programmierer in der Lage sein möchtest, aktuelle KI-Technologien in deine Entwicklungen einzubinden. Um das Tutorial praktisch nachzuvollziehen, solltest du über Kenntnisse zu JavaScript und React sowie zur Anwendung von Node JS, Virtual Studio Code und Astro JS verfügen. Zur Anbindung der OpenAI-API benötigst du bei OpenAI ein Konto sowie einen Key.