In diesem Tutorial wirst du lernen, wie du eine grundlegende Benutzeroberfläche (UI) mit React erstellen kannst, die es dir erlaubt, mit dem OpenAI API zu kommunizieren. Statt über die URL im Browser zu chatten, erstellen wir eine einfache Anwendung, in der der Benutzer Text eingeben kann und die entsprechende Antwort von der KI erhält. Wir werden sowohl den Frontend-Code als auch die Logik zur Verarbeitung der Eingaben und zur Kommunikation mit der OpenAI API behandeln.
Wichtigste Erkenntnisse
- Du wirst verstehen, wie man in React ein Input-Feld und einen Button erstellen kann, um Benutzeranfragen zu senden.
- Außerdem lernst du, wie du asynchrone Fetch-Anfragen an die OpenAI API stellst und die erhaltenen Antworten in deinem React-Status speicherst und anzeigst.
Schritt-für-Schritt-Anleitung
Beginne damit, eine neue React-Anwendung zu erstellen oder in deine bestehende Anwendung zu navigieren. Im index.jsx-Datei wirst du grundlegende Komponenten für die Interaktion einrichten.
Zuerst möchtest du ein Inputfeld hinzufügen, in das der Benutzer seine Nachrichten eingeben kann. Dies ermöglicht es den Nutzern, mit der KI zu interagieren. Füge also ein Inputfeld und einen Button hinzu, um die Anfrage abzusenden.
Wenn der Benutzer nun Text in das Inputfeld eingibt und auf den Senden-Button klickt, musst du in der Lage sein, diese Eingabe zu verarbeiten. Du kannst den useState-Hook verwenden, um den aktuellen Wert des Inputs sowie die Antwort von der API zu verwalten.
Jetzt musst du das Klick-Event des Buttons behandeln. Wenn der Button gedrückt wird, möchtest du eine asynchrone Funktion erstellen, die eine Fetch-Anfrage an den Server stellt. Diese Funktion wird mit dem async-Schlüsselwort deklariert, was es dir ermöglicht, await zu verwenden, um auf die Antwort des Servers zu warten.
Hier ist der nächste Schritt: Du möchtest die Fetch-Funktion aufrufen, um an die API zu kommunizieren. Die URL wird dabei im Format API/Chat?MSG={userInput} angegeben, wobei {userInput} durch die Benutzereingabe ersetzt wird. Du kannst zunächst einen festen String verwenden, um sicherzustellen, dass die API-Anfrage korrekt funktioniert.
Nachdem du die Anfrage gesendet hast, erhältst du eine Antwort, die du verarbeiten musst. Du kannst die Antwort zuerst in ein JSON-Format umwandeln, um einfacher damit arbeiten zu können. Rufe dafür response.json() auf.
Vergewissere dich, dass du die Ausgabe in der Konsole überprüfen kannst, um sicherzustellen, dass alles wie erwartet funktioniert. Nachdem du die Antwort geprüft hast, ist das nächste, was du tun möchtest, die Antwort in einem Status zu speichern, den du weiter oben deklariert hast.
Um die Benutzererfahrung weiter zu verbessern, möchtest du sicherstellen, dass die Eingabe des Benutzers nicht immer mit einem festen Wert (wie "hello") gesendet wird, sondern die tatsächlich eingegebene Nachricht. Verwende dafür das useRef-Hook, um auf den aktuellen Wert des Inputfelds zuzugreifen, wenn der Benutzer den Button klickt.
Nun, da du die Eingaben des Benutzers korrekt erfassen kannst, solltest du einen Testlauf deiner Anwendung durchführen, um zu überprüfen, ob die Eingaben sowohl an die API gesendet als auch korrekt angezeigt werden.
Wenn alles funktioniert, kannst du sehen, dass die Antwort von der KI im vorgesehenen DIV dargestellt wird. Du kannst nun deine Benutzeroberfläche weiter gestalten oder den Code optimieren.
Aktuell handelt es sich nur um eine einfache Frage-Antwort-Anwendung, da der Chatverlauf nicht gespeichert wird. Um eine vollständige Chat-Anwendung zu erstellen, wäre es notwendig, den Verlauf des Chats selbst zu speichern und an die API zu senden, sodass diese Kontext für die Antworten hat.
Dennoch ist es beeindruckend, dass du bereits in der Lage bist, die OpenAI API zu verwenden und so eine eigene Anwendung basierend auf dieser Technologie zu entwickeln. In zukünftigen Schritten kannst du die Funktionalität erweitern, um einen echten Chatverlauf zu ermöglichen.
Zusammenfassung
In diesem Tutorial hast du die Schritte kennengelernt, um eine grundlegende Benutzeroberfläche in React zu erstellen, die die Kommunikation mit der OpenAI API ermöglicht. Von der Handhabung der Benutzereingaben bis zur Anzeige der Antworten wurde alles behandelt, um eine funktionale Anwendung zu erstellen.
Häufig gestellte Fragen
Wie erstelle ich ein Inputfeld in React?Du kannst ein Inputfeld in React erstellen, indem du ein -Element in deiner Komponente verwendest.
Wie stelle ich eine Anfrage an die OpenAI API?Verwende die Fetch-Funktion, um eine GET- oder POST-Anfrage an die API mit der richtigen URL und Params zu senden.
Was ist der Unterschied zwischen useState und useRef?useState speichert Werte, die den Re-Render der Komponente auslösen, während useRef Werte speichert, die keinen Re-Render auslösen.
Wie kann ich die Antworten der KI in meiner Anwendung speichern?Du kannst die Antworten in einem Status mit useState speichern und sie dann im UI anzeigen.
