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

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

KI & Trends, Webdesign, CMS & Entwicklung 36 Videos · 3.5 h Video-Training · Deutsch Stephan Haewß von Stephan Haewß

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.

Inhalt

36 Videos, 209 Minuten

Intro zum Kurs

1 Videos · 3 Minuten
01 Offen Kostenlos

OpenAI API: 1 | Was erwartet dich im Kurs?

Das erwartet dich in diesem OpenAI-API-Kurs.

01

OpenAI API: 1 | Was erwartet dich im Kurs?

3 min Offen

Einleitung

3 Videos · 16 Minuten
02 Offen Kostenlos

OpenAI API: 2.1 | Werkzeuge, die wir benutzen werden

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

03 Offen Kostenlos

OpenAI API: 2.2 | Die OpenAI-Plattform

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

04 Offen

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.

02

OpenAI API: 2.1 | Werkzeuge, die wir benutzen werden

4 min Offen
03

OpenAI API: 2.2 | Die OpenAI-Plattform

5 min Offen
04

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

7 min Offen

Chat-App programmieren

11 Videos · 68 Minuten
05 Offen

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.

06 Offen

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.

07 Offen

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.

08 Offen

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.

09 Offen

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.

10 Offen

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.

11 Offen

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.

12 Offen

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.

13 Offen

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.

14 Offen

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.

15 Offen

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.

05

OpenAI API: 3.1 | Erstellung des AstroJS-Basisprojekts

5 min Offen
06

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

5 min Offen
07

OpenAI API: 3.3 | Hinzufügen eines Endpunkts zum Server

4 min Offen
08

OpenAI API: 3.4 | Vorbereiten des Aufrufs der OpenAI-API

11 min Offen
09

OpenAI API: 3.5 | Übermittlung der Nutzermeldung an die OpenAI-API

5 min Offen
10

OpenAI API: 3.6 | Grundlegende UI in React

7 min Offen
11

OpenAI API: 3.7 | Speichern des Chatverlaufs

8 min Offen
12

OpenAI API: 3.8 | Zurücksetzen des Chats

5 min Offen
13

OpenAI API: 3.9 | UX verbessern

9 min Offen
14

OpenAI API: 3.10 | Chatverlauf aufhübschen

7 min Offen
15

OpenAI API: 3.11 | Zusammenfassung: Erste Chat-App

2 min Offen

KI-Chat in einem Text-Adventure-Spiel

13 Videos · 81 Minuten
16 Offen

OpenAI API: 4.1 | Erstellen des Projekts

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

17 Offen

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.

18 Offen

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.

19 Offen

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

20 Offen

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.

21 Offen

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.

22 Offen

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.

23 Offen

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.

24 Offen

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.

25 Offen

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.

26 Offen

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.

27 Offen

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.

28 Offen

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.

16

OpenAI API: 4.1 | Erstellen des Projekts

5 min Offen
17

OpenAI API: 4.2 | Die Geschichte

6 min Offen
18

OpenAI API: 4.3 | Die Quests vorbereiten

5 min Offen
19

OpenAI API: 4.4 | Der erste KI-Chat

4 min Offen
20

OpenAI API: 4.5 | System-Prompt für den Barkeeper

9 min Offen
21

OpenAI API: 4.6 | Funktionsaufrufe

6 min Offen
22

OpenAI API: 4.7 | Funktionsaufrufe: Bereitstellung des Ergebnisses

6 min Offen
23

OpenAI API: 4.8 | Quest als erledigt markieren

4 min Offen
24

OpenAI API: 4.9 | Den Chat verlassen

9 min Offen
25

OpenAI API: 4.10 | Mit Dr. Owen sprechen

4 min Offen
26

OpenAI API: 4.11 | Neuen Chat auf dem Server starten

8 min Offen
27

OpenAI API: 4.12 | Neue Quest-Funktion für Dr. Owen bereitstellen

6 min Offen
28

OpenAI API: 4.13 | Chat mit dem Sicherheitsroboter

9 min Offen

Virtueller Verkaufsassistent für einen Online-Shop

7 Videos · 37 Minuten
29 Offen

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.

30 Offen

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.

31 Offen

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.

32 Offen

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.

33 Offen

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.

34 Offen

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!

35 Offen

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.

29

OpenAI API: 5.1 | Erstellen des neuen Projekts

8 min Offen
30

OpenAI API: 5.2 | Bessere Produktsuche

7 min Offen
31

OpenAI API: 5.3 | Mehr Produkte

3 min Offen
32

OpenAI API: 5.4 | Mehrere Parameter in Funktionsaufrufen

5 min Offen
33

OpenAI API: 5.5 | Fix für nicht definierten Preisbereich

3 min Offen
34

OpenAI API: 5.6 | Produkt in den Warenkorb legen

5 min Offen
35

OpenAI API: 5.7 | Unscharfe Produktsuche

6 min Offen

Fazit

1 Videos · 6 Minuten
36 Offen

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.

36

OpenAI API: 6 | Was wurde gelernt, was gibt es noch?

6 min Offen
Kommentare (0)

Kommentiere jetzt „OpenAI API: KI-basierte Chats, Verkaufsassistenten & Text-Adventures programmieren“