Da die Nutzung von Chatbots und virtuellen Assistenten immer weiter zunimmt, suchen viele Unternehmen und Entwickler nach Möglichkeiten, ihre eigenen KI-gesteuerten Chatbots zu entwickeln. ChatGPT ist ein solcher Chatbot, der von OpenAI entwickelt wurde und der in der Lage ist, menschenähnliche Gespräche zu führen und eine Vielzahl von Fragen zu beantworten.
Was du bauen wirst
In diesem Tutorial lernst du, wie du mit React und der OpenAI API einen ChatGPT-Klon erstellst. Wenn du dich am Wochenende an einem lustigen und spannenden Projekt versuchen willst, ist dies eine gute Gelegenheit, um in React und OpenAI einzutauchen.
Außerdem erfährst du, wie du dein Projekt direkt von deinem GitHub-Repository auf der Kinsta Anwendungs-Hosting-Plattform bereitstellst, die eine kostenlose .kinsta.app-Domain bietet, damit dein Projekt schnell online gehen kann. Und mit der kostenlosen Testversion und dem Hobby-Tier von Kinsta kannst du ganz einfach und ohne Kosten loslegen.
Hier ist eine Live-Demo der ChatGPT-Klon-Anwendung.
Wenn du dir das Projekt genauer ansehen möchtest, kannst du auf sein GitHub-Repository zugreifen.
Alternativ kannst du mit dieser Vorlage für das Starterprojekt die Option Diese Vorlage verwenden > Neues Repository erstellen wählen – dadurch wird der Code des Starterprojekts in ein neues Repository kopiert. Dieses Starterprojekt enthält grundlegende Elemente wie Stile, einen Font Awesome CDN-Link, ein OpenAi-Paket und eine grundlegende Struktur, um dir den Einstieg zu erleichtern.
Anforderungen/Voraussetzungen
Dieses Tutorial ist so konzipiert, dass du ihn Schritt für Schritt mitmachen kannst. Daher wird empfohlen, dass du die folgenden Voraussetzungen mitbringst, um problemlos mitzucoden:
- Grundlegendes Verständnis von HTML, CSS und JavaScript
- Eine gewisse Vertrautheit mit React
- Node.js und npm (Node Package Manager) oder yarn auf deinem Computer installiert
Was ist die OpenAI API?
Die OpenAI API ist eine cloudbasierte Plattform, die Entwicklern über eine API Zugang zu den Sprachmodellen von OpenAI, wie z. B. GPT-3, gewährt. Sie ermöglicht es Entwicklern, Funktionen zur Verarbeitung natürlicher Sprache wie Textvervollständigung, Stimmungsanalyse, Zusammenfassung und Übersetzung in ihre Anwendungen einzubauen, ohne ihre Modelle entwickeln und trainieren zu müssen.
Um die OpenAI-API zu nutzen, müssen Entwickler/innen ein Konto auf der OpenAI-Website anlegen und einen API-Schlüssel erhalten. Der API-Schlüssel wird verwendet, um API-Anfragen zu authentifizieren und die Nutzung zu verfolgen.
Sobald der API-Schlüssel vorliegt, können Entwickler die API nutzen, um Text an das Sprachmodell zu senden und Antworten zu erhalten.
Warum React?
React ist eine beliebte JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen. Laut der Stack Overflow-Entwicklerumfrage von 2022 ist sie mit einem Marktanteil von 42,62 % die am zweithäufigsten verwendete Webtechnologie.
React ermöglicht es Entwicklern, deklarative Komponenten zu erstellen, die verschiedene Teile der Benutzeroberfläche darstellen. Diese Komponenten werden mit einer Syntax namens JSX definiert, die eine Kombination aus JavaScript und HTML ist.
Dank des großen Ökosystems an Komponentenbibliotheken und -kits können Entwickler/innen leicht mit APIs wie der OpenAI API arbeiten und diese integrieren, um komplexe Chat-Oberflächen zu erstellen, was React zu einer ausgezeichneten Wahl für den Aufbau einer ChatGPT-Klon-Anwendung macht.
Wie du deine React-Entwicklungsumgebung einrichtest
Der beste Weg, um React zu installieren oder ein React-Projekt zu erstellen, ist die Installation mit create-react-app. Eine Voraussetzung dafür ist, dass du Node.js auf deinem Rechner installiert hast. Um zu überprüfen, ob du Node installiert hast, führe den folgenden Befehl in deinem Terminal aus.
node -vWenn er eine Version anzeigt, ist sie vorhanden. Um npx verwenden zu können, musst du sicherstellen, dass deine Node-Version nicht kleiner als v14.0.0 und deine NPM-Version nicht kleiner als v5.6 ist; andernfalls müsstest du sie mit dem Befehl npm update -g aktualisieren. Wenn du dich mit npm vertraut gemacht hast, kannst du ein React-Projekt einrichten, indem du den folgenden Befehl ausführst:
npx create-react-app chatgpt-cloneHinweis: „chatgpt-clone“ ist der Name der Anwendung, die wir erstellen, aber du kannst ihn in einen beliebigen Namen deiner Wahl ändern.
Der Installationsprozess kann ein paar Minuten dauern. Nach erfolgreicher Installation kannst du in das Verzeichnis navigieren und das Node.js OpenAI-Paket installieren, das einen bequemen Zugriff auf die OpenAI-API von Node.js aus ermöglicht, indem du den folgenden Befehl verwendest:
npm install openaiDu kannst nun npm start ausführen, um deine Anwendung live auf localhost:3000 zu sehen.
Wenn ein React-Projekt mit dem Befehl create-react-app erstellt wird, wird automatisch eine Ordnerstruktur angelegt. Der wichtigste Ordner, der dich betrifft, ist der Ordner src, in dem die Entwicklung stattfindet. Dieser Ordner enthält standardmäßig viele Dateien, aber du solltest dich nur mit den Dateien App.js, index.js und index.css beschäftigen.
- App.js: Die Datei App.js ist die wichtigste Komponente in einer React-Anwendung. Sie stellt normalerweise die oberste Komponente dar, die alle anderen Komponenten in der Anwendung rendert.
- index.js: Diese Datei ist der Einstiegspunkt in deine React-Anwendung. Sie ist die erste Datei, die geladen wird, wenn die Anwendung geöffnet wird, und ist dafür verantwortlich, dass die Komponente App.js im Browser dargestellt wird.
- index.css: Diese Datei ist für das allgemeine Styling und Layout deiner React-Anwendung verantwortlich.
Wie man einen ChatGPT-Klon mit React und OpenAI API erstellt
Die ChatGPT-Klonanwendung wird aus zwei Komponenten bestehen, damit die Anwendung leichter zu verstehen und zu warten ist. Diese beiden Komponenten sind:
- Formularbereich: Diese Komponente enthält ein Textfeld und eine Schaltfläche, über die die Nutzer mit dem Chatbot interagieren können.
- Antwortbereich: Die Fragen und die dazugehörigen Antworten werden in einem Array gespeichert und in diesem Abschnitt angezeigt. Das Array wird in einer Schleife chronologisch durchlaufen, wobei die neueste Antwort zuerst angezeigt wird.
Einrichten der ChatGPT-Klonanwendung
In diesem Tutorial bauen wir zunächst die Anwendungsschnittstelle auf. Anschließend kannst du Funktionen implementieren, damit deine Anwendung mit der OpenAI API interagieren kann. Beginne damit, die beiden Komponenten zu erstellen, die du in diesem Tutorial verwenden wirst. Zur besseren Organisation erstellst du einen Komponentenordner im Ordner src, in dem alle Komponenten gespeichert werden.
Die Komponente Form Section
Dies ist ein einfaches Formular, das aus einem textarea und einem submit button besteht.
// components/FormSection.jsx
const FormSection = () => {
return (
<div className="form-section">
<textarea
rows="5"
className="form-control"
placeholder="Ask me anything..."
></textarea>
<button className="btn">
Generate Response 🤖
</button>
</div>
)
}
export default FormSection;So soll das Formular aussehen, wenn du es in deine App.js Datei importierst:
Die Komponente des Antwortbereichs
In diesem Bereich werden alle Fragen und Antworten angezeigt. So wird dieser Bereich aussehen, wenn du ihn in deine App.js-Datei importierst.
Du wirst die Fragen und Antworten aus einem Array und einer Schleife holen, damit dein Code leichter zu lesen und zu pflegen ist.
// components/AnswerSection.jsx
const AnswerSection = () => {
return (
<>
<hr className="hr-line" />
<div className="answer-container">
<div className="answer-section">
<p className="question">Who is the founder of OpenAi?</p>
<p className="answer">OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.</p>
<div className="copy-icon">
<i className="fa-solid fa-copy"></i>
</div>
</div>
</div>
</>
)
}
export default AnswerSection;Die Startseite
Du hast jetzt beide Komponenten erstellt, aber es wird nichts angezeigt, wenn du deine Anwendung ausführst, weil du sie in deine App.js-Datei importieren musst. Für diese Anwendung wirst du kein Routing implementieren, d.h. die App.js-Datei wird als Startseite deiner Anwendung dienen.
Du kannst einige Inhalte wie den Titel und die Beschreibung deiner Anwendung hinzufügen, bevor du die Komponenten importierst.
// App.js
import FormSection from './components/FormSection';
import AnswerSection from './components/AnswerSection';
const App = () => {
return (
<div>
<div className="header-section">
<h1>ChatGPT CLONE 🤖</h1>
<p>
I am an automated question and answer system, designed to assist you
in finding relevant information. You are welcome to ask me any queries
you may have, and I will do my utmost to offer you a reliable
response. Kindly keep in mind that I am a machine and operate solely
based on programmed algorithms.
</p>
</div>
<FormSection />
<AnswerSection />
</div>
);
};
export default App;Im obigen Code werden die beiden Komponenten importiert und der Anwendung hinzugefügt. Wenn du deine Anwendung ausführst, wird sie so aussehen:
Funktionalitäten hinzufügen und OpenAI API integrieren
Du hast jetzt die Benutzeroberfläche deiner Anwendung. Der nächste Schritt besteht darin, die Anwendung funktional zu machen, damit sie mit der OpenAI API interagieren und Antworten erhalten kann. Zuerst musst du den Wert aus deinem Formular abrufen, wenn es abgeschickt wird, denn er wird für die Abfrage der OpenAI API verwendet.
Daten aus dem Formular abrufen
In React lassen sich Daten am besten mit Zuständen speichern und aktualisieren. In funktionalen Komponenten wird der useState() Hook verwendet, um mit Zuständen zu arbeiten. Du kannst einen Status erstellen, ihm den Wert aus deinem Formular zuweisen und ihn aktualisieren, sobald sich der Wert ändert. Beginnen wir damit, den useState() Hook in die Komponente FormSection.jsx zu importieren und dann einen Status zu erstellen, der newQuestions speichert und aktualisiert.
// components/FormSection.jsx
import { useState } from 'react';
const FormSection = ({ generateResponse }) => {
const [newQuestion, setNewQuestion] = useState('');
return (
// Form to submit a new question
)
}
export default FormSection;Als Nächstes kannst du den Wert des Feldes textarea dem Status zuweisen und ein Ereignis onChange() erstellen, um den Status zu aktualisieren, sobald sich der Eingabewert ändert:
<textarea
rows="5"
className="form-control"
placeholder="Ask me anything..."
value={newQuestion}
onChange={(e) => setNewQuestion(e.target.value)}
></textarea>Schließlich kannst du ein onClick() Ereignis erstellen, um eine Funktion zu laden, wenn der Submit-Button angeklickt wird. Diese Methode wird in der Datei App.js erstellt und als Requisite an die Komponente FormSection.jsx mit den Werten newQuestion und setNewQuestion als Argumente übergeben.
<button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}>
Generate Response 🤖
</button>Du hast nun einen Status erstellt, um den Formularwert zu speichern und zu aktualisieren, eine Methode hinzugefügt, die als props von der App.js-Datei übergeben wird, und das Klick-Ereignis verarbeitet. So sieht der endgültige Code aus:
// components/FormSection.jsx
import { useState } from 'react';
const FormSection = ({ generateResponse }) => {
const [newQuestion, setNewQuestion] = useState('');
return (
<div className="form-section">
<textarea
rows="5"
className="form-control"
placeholder="Ask me anything..."
value={newQuestion}
onChange={(e) => setNewQuestion(e.target.value)}
></textarea>
<button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}>
Generate Response 🤖
</button>
</div>
)
}
export default FormSection;Der nächste Schritt besteht darin, eine Methode in der App.js-Datei zu erstellen, die den gesamten Prozess der Interaktion mit der OpenAI-API steuert.
Interaktion mit der OpenAI API
Um mit OpenAI API zu interagieren und API-Schlüssel in einer React-Anwendung zu erhalten, musst du ein OpenAI API-Konto erstellen. Du kannst dich auf der OpenAI-Website mit deinem Google-Konto oder deiner E-Mail für ein Konto anmelden. Um einen API-Schlüssel zu generieren, klickst du oben rechts auf der Website auf Persönlich; es werden einige Optionen angezeigt; klick auf API-Schlüssel anzeigen.
Klicke auf die Schaltfläche Neuen geheimen Schlüssel erstellen und kopiere den Schlüssel an die Stelle, an der du ihn in dieser Anwendung für die Interaktion mit OpenAI verwenden würdest. Du kannst nun damit fortfahren, OpenAI zu initialisieren, indem du das openai-Paket (das du bereits installiert hast) zusammen mit der Konfigurationsmethode importierst. Erstelle dann eine Konfiguration mit deinem generierten Schlüssel und benutze sie, um OpenAI zu initialisieren.
// src/App.js
import { Configuration, OpenAIApi } from 'openai';
import FormSection from './components/FormSection';
import AnswerSection from './components/AnswerSection';
const App = () => {
const configuration = new Configuration({
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
return (
// Render FormSection and AnswerSection
);
};
export default App;Im obigen Code wird der OpenAI API-Schlüssel als Umgebungsvariable in der .env-Datei gespeichert. Du kannst eine .env-Datei im Stammverzeichnis deiner Anwendung erstellen und den Schlüssel in der Variable REACT_APP_OPENAI_API_KEY speichern.
// .env
REACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx…Nun kannst du die Methode generateResponse in der App.js-Datei erstellen und die beiden Parameter übergeben, die von dem Formular erwartet werden, das du bereits erstellt hast, um die Anfrage zu bearbeiten und die Antwort von der API zu erhalten.
// src/App.js
import FormSection from './components/FormSection';
import AnswerSection from './components/AnswerSection';
const App = () => {
const generateResponse = (newQuestion, setNewQuestion) => {
// Set up OpenAI API and handle response
};
return (
// Render FormSection and AnswerSection
);
};
export default App;Jetzt kannst du eine Anfrage an die OpenAI API senden. Die OpenAI API kann viele Operationen durchführen, wie z. B. Frage und Antwort (Q&A), Grammatikkorrektur, Übersetzung und vieles mehr. Für jeden dieser Vorgänge gibt es unterschiedliche Optionen. Zum Beispiel ist der Motorwert für Q&A text-davinci-00, während es für SQL translate code-davinci-002 ist. In der OpenAI-Beispieldokumentation findest du die verschiedenen Beispiele und ihre Optionen.
In diesem Tutotrial arbeiten wir nur mit Q&A, und so sieht die Option aus:
{
model: "text-davinci-003",
prompt: "Who is Obama?",
temperature: 0,
max_tokens: 100,
top_p: 1,
frequency_penalty: 0.0,
presence_penalty: 0.0,
stop: [""],
}Hinweis: Ich habe den Prompt-Wert geändert.
Der Prompt ist die Frage, die aus dem Formular gesendet wird. Das heißt, du musst sie von der Formulareingabe erhalten, die du als Parameter an die Methode generateResponse übergibst. Dazu definierst du die Optionen und verwendest dann den Spread-Operator, um eine vollständige Option zu erstellen, die die Eingabeaufforderung enthält:
// src/App.js
import { Configuration, OpenAIApi } from 'openai';
import FormSection from './components/FormSection';
import AnswerSection from './components/AnswerSection';
const App = () => {
const configuration = new Configuration({
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const generateResponse = async (newQuestion, setNewQuestion) => {
let options = {
model: 'text-davinci-003',
temperature: 0,
max_tokens: 100,
top_p: 1,
frequency_penalty: 0.0,
presence_penalty: 0.0,
stop: ['/'],
};
let completeOptions = {
...options,
prompt: newQuestion,
};
};
return (
// Render FormSection and AnswerSection
);
};
export default App;Jetzt musst du nur noch eine Anfrage über die Methode createCompletion an OpenAI senden, um eine Antwort zu erhalten.
// src/App.js
import { Configuration, OpenAIApi } from 'openai';
import FormSection from './components/FormSection';
import AnswerSection from './components/AnswerSection';
import { useState } from 'react';
const App = () => {
const configuration = new Configuration({
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const [storedValues, setStoredValues] = useState([]);
const generateResponse = async (newQuestion, setNewQuestion) => {
let options = {
model: 'text-davinci-003',
temperature: 0,
max_tokens: 100,
top_p: 1,
frequency_penalty: 0.0,
presence_penalty: 0.0,
stop: ['/'],
};
let completeOptions = {
...options,
prompt: newQuestion,
};
const response = await openai.createCompletion(completeOptions);
console.log(response.data.choices[0].text);
};
return (
// Render FormSection and AnswerSection
);
};
export default App;Im obigen Code wird der Text der Antwort in deiner Konsole angezeigt. Du kannst deine Anwendung gerne testen, indem du eine beliebige Frage stellst. Der letzte Schritt besteht darin, einen Status zu erstellen, der das Array mit den Fragen und Antworten enthält, und dieses Array dann als Prop in die AnswerSection-Komponente zu senden. So sieht der endgültige Code von App.js aus:
// src/App.js
import { Configuration, OpenAIApi } from 'openai';
import FormSection from './components/FormSection';
import AnswerSection from './components/AnswerSection';
import { useState } from 'react';
const App = () => {
const configuration = new Configuration({
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const [storedValues, setStoredValues] = useState([]);
const generateResponse = async (newQuestion, setNewQuestion) => {
let options = {
model: 'text-davinci-003',
temperature: 0,
max_tokens: 100,
top_p: 1,
frequency_penalty: 0.0,
presence_penalty: 0.0,
stop: ['/'],
};
let completeOptions = {
...options,
prompt: newQuestion,
};
const response = await openai.createCompletion(completeOptions);
if (response.data.choices) {
setStoredValues([
{
question: newQuestion,
answer: response.data.choices[0].text,
},
...storedValues,
]);
setNewQuestion('');
}
};
return (
<div>
<div className="header-section">
<h1>ChatGPT CLONE 🤖</h1>
<p>
I am an automated question and answer system, designed to assist you
in finding relevant information. You are welcome to ask me any
queries you may have, and I will do my utmost to offer you a
reliable response. Kindly keep in mind that I am a machine and
operate solely based on programmed algorithms.
</p>
</div>
<FormSection generateResponse={generateResponse} />
<AnswerSection storedValues={storedValues} />
</div>
);
};
export default App;Du kannst nun die Komponente AnswerSection so bearbeiten, dass sie den Props-Wert von App.js erhält und die JavaScript-Methode Map() verwenden, um das Array storedValues zu durchsuchen:
// components/AnswerSection.jsx
const AnswerSection = ({ storedValues }) => {
return (
<>
<hr className="hr-line" />
<div className="answer-container">
{storedValues.map((value, index) => {
return (
<div className="answer-section" key={index}>
<p className="question">{value.question}</p>
<p className="answer">{value.answer}</p>
<div className="copy-icon">
<i className="fa-solid fa-copy"></i>
</div>
</div>
);
})}
</div>
</>
)
}
export default AnswerSection;Wenn du deine Anwendung ausführst und sie durch Fragen testest, wird die Antwort unten angezeigt. Du wirst aber feststellen, dass die Schaltfläche Kopieren nicht funktioniert. Du musst der Schaltfläche ein onClick() -Ereignis hinzufügen, damit sie eine Methode auslöst, die die Funktion ausführt. Du kannst die Methode navigator.clipboard.writeText() verwenden, um die Funktion zu steuern. So sieht die Komponente AnswerSection jetzt aus:
// components/AnswerSection.jsx
const AnswerSection = ({ storedValues }) => {
const copyText = (text) => {
navigator.clipboard.writeText(text);
};
return (
<>
<hr className="hr-line" />
<div className="answer-container">
{storedValues.map((value, index) => {
return (
<div className="answer-section" key={index}>
<p className="question">{value.question}</p>
<p className="answer">{value.answer}</p>
<div
className="copy-icon"
onClick={() => copyText(value.answer)}
>
<i className="fa-solid fa-copy"></i>
</div>
</div>
);
})}
</div>
</>
)
}
export default AnswerSection;Wenn du deine Anwendung ausführst, wird deine ChatGPT-Klonanwendung perfekt funktionieren. Jetzt kannst du deine Anwendung bereitstellen, um online auf sie zuzugreifen und sie mit Freunden zu teilen.
Wie du deine React-Anwendung auf Kinsta bereitstellst
Es reicht nicht aus, diese Anwendung zu erstellen und sie auf deinen lokalen Computern zu lassen. Du willst sie auch online bereitstellen, damit andere darauf zugreifen können. Wir sehen uns an, wie du das mit GitHub und Kinsta machen kannst.
Pushe deinen Code auf GitHub
Um deinen Code auf GitHub zu veröffentlichen, kannst du Git-Befehle verwenden. Git ist eine zuverlässige und effiziente Methode, um Codeänderungen zu verwalten, an Projekten mitzuarbeiten und den Versionsverlauf zu pflegen.
Der erste Schritt, um deinen Code zu veröffentlichen, ist die Erstellung eines neuen Projektarchivs, indem du dich bei deinem GitHub-Konto anmeldest, auf die Schaltfläche „+“ in der oberen rechten Ecke des Bildschirms klickst und im Dropdown-Menü „Neues Projektarchiv“ auswählst.
Gib deinem Repository einen Namen, füge eine Beschreibung hinzu (optional) und wähle aus, ob es öffentlich oder privat sein soll. Klicke auf Repository erstellen, um es zu erstellen.
Sobald dein Projektarchiv erstellt ist, musst du dir die URL des Projektarchivs von der Hauptseite deines Projektarchivs besorgen, damit du deinen Code auf GitHub pushen kannst.
Öffne dein Terminal oder deine Eingabeaufforderung und navigiere zu dem Verzeichnis, in dem sich dein Projekt befindet. Führe die folgenden Befehle nacheinander aus, um deinen Code in dein GitHub-Repository zu übertragen:
git init
git add .
git commit -m "my first commit"
git remote add origin [repository URL]
git push -u origin mastergit init initialisiert ein lokales Git-Repository, git add . fügt alle Dateien im aktuellen Verzeichnis und seinen Unterverzeichnissen zum neuen Git-Repository hinzu. git commit -m "my first commit" überträgt die Änderungen mit einer kurzen Nachricht an das Repository. git remote add origin [repository URL] legt die Repository-URL als Remote-Repository fest und git push -u origin master pusht den Code in das Remote-Repository (origin) im Master-Branch.
Bereitstellen deiner ChatGPT Clone React-Anwendung auf Kinsta
Befolge diese Schritte, um dein Repository auf Kinsta bereitzustellen:
- Logge dich in dein Kinsta-Konto ein oder erstelle es auf dem MyKinsta-Dashboard.
- Klicke in der linken Seitenleiste auf Anwendungen und dann auf Dienst hinzufügen.
- Wähle Anwendung aus dem Dropdown-Menü, um eine React-Anwendung in Kinsta bereitzustellen.
- Wähle das Repository, das du bereitstellen möchtest, aus dem erscheinenden Modal aus. Wenn du mehrere Zweige hast, kannst du denjenigen auswählen, den du bereitstellen möchtest, und der Anwendung einen Namen zuweisen. Wähle unter 25 einen Standort für das Rechenzentrum aus, und Kinsta wird automatisch einen Startbefehl erkennen.
- Schließlich ist es nicht sicher, API-Schlüssel an öffentliche Hosts wie GitHub weiterzugeben, daher wurde er lokal als Umgebungsvariable hinzugefügt. Beim Hosten kannst du ihn auch als Umgebungsvariable mit demselben Variablennamen und dem Schlüssel als Wert hinzufügen.
Deine Anwendung wird bereitgestellt und innerhalb weniger Minuten erhältst du einen Link, über den du auf die bereitgestellte Version deiner Anwendung zugreifen kannst. In diesem Fall ist das https://chatgpt-clone-g9q10.kinsta.app/
Note: Du kannst das automatische Deployment aktivieren, sodass Kinsta deine Anwendung immer dann neu bereitstellt, wenn du deine Codebasis änderst und sie auf GitHub veröffentlichst.
Zusammenfassung
Die OpenAI API kann für eine Vielzahl von Anwendungen genutzt werden, von der Kundenbetreuung über persönliche Assistenten bis hin zu Sprachübersetzung und Inhaltserstellung.
In diesem Tutorial hast du gelernt, wie du mit React und OpenAI eine ChatGPT-Klon-Anwendung erstellen kannst. Du kannst diese Anwendung/Funktion in andere Anwendungen integrieren, um Nutzern ein menschenähnliches Gesprächserlebnis zu bieten.
Es gibt noch mehr Möglichkeiten, die OpenAI API zu nutzen und diese Klonanwendung zu verbessern. Du kannst zum Beispiel eine lokale Speicherung implementieren, damit frühere Fragen und Antworten nicht verschwinden, auch wenn du deinen Browser aktualisierst.
Mit der kostenlosen Testversion und dem Hobby-Tier von Kinsta kannst du ganz einfach und ohne Kosten auf unserem Anwendungs-Hosting loslegen. Warum probierst du es also nicht aus und siehst, was du schaffen kannst?
Teile dein Projekt und deine Erfahrungen in den Kommentaren unten mit.
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar