{"id":60052,"date":"2023-03-16T08:18:19","date_gmt":"2023-03-16T07:18:19","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=60052&#038;preview=true&#038;preview_id=60052"},"modified":"2023-12-18T12:52:47","modified_gmt":"2023-12-18T11:52:47","slug":"chatgpt-klon","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/","title":{"rendered":"Wie man eine ChatGPT-Klonanwendung mit React und OpenAI API erstellt und bereitstellt"},"content":{"rendered":"<p>Da die Nutzung von Chatbots und virtuellen Assistenten immer weiter zunimmt, suchen viele Unternehmen und Entwickler nach M\u00f6glichkeiten, ihre eigenen KI-gesteuerten Chatbots zu entwickeln. ChatGPT ist ein solcher Chatbot, der von OpenAI entwickelt wurde und der in der Lage ist, menschen\u00e4hnliche Gespr\u00e4che zu f\u00fchren und eine Vielzahl von Fragen zu beantworten.<\/p>\n<h2>Was du bauen wirst<\/h2>\n<p>In diesem Tutorial lernst du, wie du mit <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a> 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.<\/p>\n<p>Au\u00dferdem erf\u00e4hrst du, wie du dein Projekt direkt von deinem GitHub-Repository auf der Kinsta <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Anwendungs-Hosting<\/a>-Plattform bereitstellst, die eine kostenlose <em>.kinsta.app<\/em>-Domain bietet, damit dein Projekt schnell online gehen kann. Und mit der kostenlosen Testversion und dem <a href=\"https:\/\/sevalla.com\/pricing\/\">Hobby-Tier<\/a> von Kinsta kannst du ganz einfach und ohne Kosten loslegen.<\/p>\n<p>Hier ist eine Live-Demo der <a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">ChatGPT-Klon-Anwendung<\/a>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/chatgpt-clone-application.jpg\" alt=\"ChatGPT-Klon-Anwendung\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">ChatGPT-Klon-Anwendung<\/figcaption><\/figure>\n<p>Wenn du dir das Projekt genauer ansehen m\u00f6chtest, kannst du auf sein <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub-Repository<\/a> zugreifen.<\/p>\n<p>Alternativ kannst du mit dieser Vorlage f\u00fcr das <a href=\"https:\/\/github.com\/olawanlejoel\/chatgpt-clone-starter\">Starterprojekt<\/a> die Option <strong>Diese Vorlage verwenden<\/strong> &gt; <strong>Neues Repository erstellen <\/strong>w\u00e4hlen &#8211; dadurch wird der Code des Starterprojekts in ein neues Repository kopiert. Dieses Starterprojekt enth\u00e4lt grundlegende Elemente wie Stile, einen Font Awesome CDN-Link, ein <a href=\"https:\/\/www.npmjs.com\/package\/openai\">OpenAi-Paket<\/a> und eine grundlegende Struktur, um dir den Einstieg zu erleichtern.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Das kostenlose Guthaben f\u00fcr die Nutzung der OpenAI-API ist auf $18 begrenzt. Wenn du <a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\">diese Demo-App<\/a> testest und sie nicht mehr funktioniert, ist das Guthaben m\u00f6glicherweise aufgebraucht. Um die OpenAI-API weiter nutzen zu k\u00f6nnen, musst du deinen Plan upgraden.<\/p>\n<\/aside>\n\n<h3>Anforderungen\/Voraussetzungen<\/h3>\n<p>Dieses Tutorial ist so konzipiert, dass du ihn Schritt f\u00fcr Schritt mitmachen kannst. Daher wird empfohlen, dass du die folgenden Voraussetzungen mitbringst, um problemlos mitzucoden:<\/p>\n<ul>\n<li>Grundlegendes Verst\u00e4ndnis von <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a> und <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a><\/li>\n<li>Eine gewisse Vertrautheit mit <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a><\/li>\n<li>Node.js und npm (<a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">Node Package Manager<\/a>) oder yarn auf deinem Computer installiert<\/li>\n<\/ul>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Was ist die OpenAI API?<\/h2>\n<p>Die <a href=\"https:\/\/platform.openai.com\/overview\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI API<\/a> ist eine cloudbasierte Plattform, die Entwicklern \u00fcber eine API Zugang zu den Sprachmodellen von OpenAI, wie z. B. GPT-3, gew\u00e4hrt. Sie erm\u00f6glicht es Entwicklern, Funktionen zur Verarbeitung nat\u00fcrlicher Sprache wie Textvervollst\u00e4ndigung, Stimmungsanalyse, Zusammenfassung und \u00dcbersetzung in ihre Anwendungen einzubauen, ohne ihre Modelle entwickeln und trainieren zu m\u00fcssen.<\/p>\n<p>Um die OpenAI-API zu nutzen, m\u00fcssen Entwickler\/innen ein Konto auf der <a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI-Website<\/a> anlegen und einen API-Schl\u00fcssel erhalten. Der API-Schl\u00fcssel wird verwendet, um API-Anfragen zu authentifizieren und die Nutzung zu verfolgen.<\/p>\n<p>Sobald der API-Schl\u00fcssel vorliegt, k\u00f6nnen Entwickler die API nutzen, um Text an das Sprachmodell zu senden und Antworten zu erhalten.<\/p>\n\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=vmNem6wxfSQ\"><\/kinsta-video>\n<h2>Warum React?<\/h2>\n<p>React ist eine <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/\">beliebte JavaScript-Bibliothek<\/a> f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen. Laut der <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#section-most-popular-technologies-web-frameworks-and-technologies\" target=\"_blank\" rel=\"noopener noreferrer\">Stack Overflow-Entwicklerumfrage von 2022<\/a> ist sie mit einem Marktanteil von 42,62 % die am zweith\u00e4ufigsten verwendete Webtechnologie.<\/p>\n<p>React erm\u00f6glicht es Entwicklern, deklarative Komponenten zu erstellen, die verschiedene Teile der Benutzeroberfl\u00e4che darstellen. Diese Komponenten werden mit einer Syntax namens JSX definiert, die eine Kombination aus JavaScript und HTML ist.<\/p>\n<p>Dank des gro\u00dfen <a href=\"https:\/\/kinsta.com\/de\/blog\/react-komponenten-bibliotheken\/\">\u00d6kosystems an Komponentenbibliotheken und -kits<\/a> k\u00f6nnen Entwickler\/innen leicht mit APIs wie der OpenAI API arbeiten und diese integrieren, um komplexe Chat-Oberfl\u00e4chen zu erstellen, was React zu einer ausgezeichneten Wahl f\u00fcr den Aufbau einer ChatGPT-Klon-Anwendung macht.<\/p>\n<h3>Wie du deine React-Entwicklungsumgebung einrichtest<\/h3>\n<p>Der beste Weg, um <a href=\"https:\/\/kinsta.com\/de\/blog\/react-installieren\/\">React zu installieren<\/a> oder ein React-Projekt zu erstellen, ist die Installation mit <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">create-react-app<\/a>. Eine Voraussetzung daf\u00fcr ist<a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-du-node-js\/\">,<\/a> <a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-du-node-js\/\">dass du Node.js auf deinem Rechner installiert hast<\/a>. Um zu \u00fcberpr\u00fcfen, ob du Node installiert hast, f\u00fchre den folgenden Befehl in deinem Terminal aus.<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Wenn er eine Version anzeigt, ist sie vorhanden. Um <a href=\"https:\/\/github.com\/npm\/npm\/releases\/tag\/v5.2.0\" target=\"_blank\" rel=\"noopener noreferrer\">npx<\/a> verwenden zu k\u00f6nnen, 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\u00fcsstest du sie mit dem Befehl <code>npm update -g<\/code> aktualisieren. Wenn du dich mit npm vertraut gemacht hast, kannst du ein React-Projekt einrichten, indem du den folgenden Befehl ausf\u00fchrst:<\/p>\n<pre><code class=\"language-bash\">npx create-react-app chatgpt-clone<\/code><\/pre>\n<p><strong>Hinweis:<\/strong> &#8222;chatgpt-clone&#8220; ist der Name der Anwendung, die wir erstellen, aber du kannst ihn in einen beliebigen Namen deiner Wahl \u00e4ndern.<\/p>\n<p>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\u00f6glicht, indem du den folgenden Befehl verwendest:<\/p>\n<pre><code class=\"language-bash\">npm install openai<\/code><\/pre>\n<p>Du kannst nun <code>npm start<\/code> ausf\u00fchren, um deine Anwendung live auf <strong>localhost:3000<\/strong> zu sehen.<\/p>\n<p>Wenn ein React-Projekt mit dem Befehl <code>create-react-app<\/code> erstellt wird, wird automatisch eine Ordnerstruktur angelegt. Der wichtigste Ordner, der dich betrifft, ist der Ordner <code>src<\/code>, in dem die Entwicklung stattfindet. Dieser Ordner enth\u00e4lt standardm\u00e4\u00dfig viele Dateien, aber du solltest dich nur mit den Dateien <strong>App.js<\/strong>, <strong>index.js<\/strong> und <strong>index.css<\/strong> besch\u00e4ftigen.<\/p>\n<ol>\n<li><strong>App.js<\/strong>: Die Datei <strong>App.js<\/strong> ist die wichtigste Komponente in einer React-Anwendung. Sie stellt normalerweise die oberste Komponente dar, die alle anderen Komponenten in der Anwendung rendert.<\/li>\n<li><strong>index.js<\/strong>: Diese Datei ist der Einstiegspunkt in deine React-Anwendung. Sie ist die erste Datei, die geladen wird, wenn die Anwendung ge\u00f6ffnet wird, und ist daf\u00fcr verantwortlich, dass die Komponente <strong>App.js<\/strong> im Browser dargestellt wird.<\/li>\n<li><strong>index.css<\/strong>: Diese Datei ist f\u00fcr das allgemeine Styling und Layout deiner React-Anwendung verantwortlich.<\/li>\n<\/ol>\n<h2>Wie man einen ChatGPT-Klon mit React und OpenAI API erstellt<\/h2>\n<p>Die ChatGPT-Klonanwendung wird aus zwei Komponenten bestehen, damit die Anwendung leichter zu verstehen und zu warten ist. Diese beiden Komponenten sind:<\/p>\n<ol>\n<li><strong>Formularbereich<\/strong>: Diese Komponente enth\u00e4lt ein Textfeld und eine Schaltfl\u00e4che, \u00fcber die die Nutzer mit dem Chatbot interagieren k\u00f6nnen.<\/li>\n<li><strong>Antwortbereich<\/strong>: Die Fragen und die dazugeh\u00f6rigen 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.<\/li>\n<\/ol>\n<h3>Einrichten der ChatGPT-Klonanwendung<\/h3>\n<p>In diesem Tutorial bauen wir zun\u00e4chst die Anwendungsschnittstelle auf. Anschlie\u00dfend 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 <strong>Komponentenordner<\/strong> im Ordner <strong>src<\/strong>, in dem alle Komponenten gespeichert werden.<\/p>\n<h4>Die Komponente Form Section<\/h4>\n<p>Dies ist ein einfaches Formular, das aus einem <code>textarea<\/code> und einem submit <code>button<\/code> besteht.<\/p>\n<pre><code class=\"language-jsx\">\n\/\/ components\/FormSection.jsx\nconst FormSection = () =&gt; {\n\n    return (\n        &lt;div className=\"form-section\"&gt;\n            &lt;textarea\n                rows=\"5\"\n                className=\"form-control\"\n                placeholder=\"Ask me anything...\"\n            &gt;&lt;\/textarea&gt;\n            &lt;button className=\"btn\"&gt;\n                Generate Response \ud83e\udd16\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    )\n}\n\nexport default FormSection;<\/code><\/pre>\n<p>So soll das Formular aussehen, wenn du es in deine <strong>App.js<\/strong> Datei importierst:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/form-section-component.jpg\" alt=\"Formularabschnitt Komponente f\u00fcr ChatGPT-Klon\" width=\"1600\" height=\"360\"><figcaption class=\"wp-caption-text\">Komponente Formularabschnitt<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Der Schwerpunkt dieses Tutorials liegt eher auf dem Aufbau und der Bereitstellung deiner Anwendung. Du kannst also die Stile in der Datei <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">src\/index.css<\/a> in dein eigenes Projekt kopieren, um das gleiche Ergebnis\/Anwendung zu erhalten.<\/p>\n<\/aside>\n\n<h4>Die Komponente des Antwortbereichs<\/h4>\n<p>In diesem Bereich werden alle Fragen und Antworten angezeigt. So wird dieser Bereich aussehen, wenn du ihn in deine <strong>App.js<\/strong>-Datei importierst.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/answer-section-component.jpg\" alt=\"Komponente des Antwortbereichs des ChatGPT-Klons\" width=\"1600\" height=\"347\"><figcaption class=\"wp-caption-text\">Komponente Antwortbereich<\/figcaption><\/figure>\n<p>Du wirst die Fragen und Antworten aus einem Array und einer Schleife holen, damit dein Code leichter zu lesen und zu pflegen ist.<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/AnswerSection.jsx\n\nconst AnswerSection = () =&gt; {\n    return (\n        &lt;&gt;\n            &lt;hr className=\"hr-line\" \/&gt;\n            &lt;div className=\"answer-container\"&gt;\n                &lt;div className=\"answer-section\"&gt;\n                    &lt;p className=\"question\"&gt;Who is the founder of OpenAi?&lt;\/p&gt;\n                    &lt;p className=\"answer\"&gt;OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.&lt;\/p&gt;\n                    &lt;div className=\"copy-icon\"&gt;\n                        &lt;i className=\"fa-solid fa-copy\"&gt;&lt;\/i&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    )\n}\n\nexport default AnswerSection;<\/code><\/pre>\n<h4>Die Startseite<\/h4>\n<p>Du hast jetzt beide Komponenten erstellt, aber es wird nichts angezeigt, wenn du deine Anwendung ausf\u00fchrst, weil du sie in deine <strong>App.js<\/strong>-Datei importieren musst. F\u00fcr diese Anwendung wirst du kein Routing implementieren, d.h. die <strong>App.js<\/strong>-Datei wird als Startseite deiner Anwendung dienen.<\/p>\n<p>Du kannst einige Inhalte wie den Titel und die Beschreibung deiner Anwendung hinzuf\u00fcgen, bevor du die Komponenten importierst.<\/p>\n<pre><code class=\"language-jsx\">\/\/ App.js\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    return (\n        &lt;div&gt;\n            &lt;div className=\"header-section\"&gt;\n                &lt;h1&gt;ChatGPT CLONE \ud83e\udd16&lt;\/h1&gt;\n                &lt;p&gt;\n                    I am an automated question and answer system, designed to assist you\n                    in finding relevant information. You are welcome to ask me any queries\n                    you may have, and I will do my utmost to offer you a reliable\n                    response. Kindly keep in mind that I am a machine and operate solely\n                    based on programmed algorithms.\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n\n            &lt;FormSection \/&gt;\n            &lt;AnswerSection \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Im obigen Code werden die beiden Komponenten importiert und der Anwendung hinzugef\u00fcgt. Wenn du deine Anwendung ausf\u00fchrst, wird sie so aussehen:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/chatgpt-clone-application-1.jpg\" alt=\"Vollst\u00e4ndige ChatGPT-Klon-Anwendung\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Vollst\u00e4ndige ChatGPT-Klon-Anwendung<\/figcaption><\/figure>\n<h3>Funktionalit\u00e4ten hinzuf\u00fcgen und OpenAI API integrieren<\/h3>\n<p>Du hast jetzt die Benutzeroberfl\u00e4che deiner Anwendung. Der n\u00e4chste 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\u00fcr die Abfrage der OpenAI API verwendet.<\/p>\n<h4>Daten aus dem Formular abrufen<\/h4>\n<p>In React lassen sich Daten am besten mit Zust\u00e4nden speichern und aktualisieren. In funktionalen Komponenten wird der <code>useState()<\/code> Hook verwendet, um mit Zust\u00e4nden zu arbeiten. Du kannst einen Status erstellen, ihm den Wert aus deinem Formular zuweisen und ihn aktualisieren, sobald sich der Wert \u00e4ndert. Beginnen wir damit, den <code>useState()<\/code> Hook in die Komponente <strong>FormSection.jsx<\/strong> zu importieren und dann einen Status zu erstellen, der <code>newQuestions<\/code> speichert und aktualisiert.<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/FormSection.jsx\n\nimport { useState } from 'react';\n\nconst FormSection = ({ generateResponse }) =&gt; {\n    const [newQuestion, setNewQuestion] = useState('');\n\n    return (\n        \/\/ Form to submit a new question\n    )\n}\n\nexport default FormSection;<\/code><\/pre>\n<p>Als N\u00e4chstes kannst du den Wert des Feldes <code>textarea<\/code> dem Status zuweisen und ein Ereignis <code>onChange()<\/code> erstellen, um den Status zu aktualisieren, sobald sich der Eingabewert \u00e4ndert:<\/p>\n<pre><code class=\"language-html\">&lt;textarea\n    rows=\"5\"\n    className=\"form-control\"\n    placeholder=\"Ask me anything...\"\n    value={newQuestion}\n    onChange={(e) =&gt; setNewQuestion(e.target.value)}\n&gt;&lt;\/textarea&gt;<\/code><\/pre>\n<p>Schlie\u00dflich kannst du ein <code>onClick()<\/code> Ereignis erstellen, um eine Funktion zu laden, wenn der Submit-Button angeklickt wird. Diese Methode wird in der Datei <strong>App.js<\/strong> erstellt und als Requisite an die Komponente <strong>FormSection.jsx<\/strong> mit den Werten <code>newQuestion<\/code> und <code>setNewQuestion<\/code> als Argumente \u00fcbergeben.<\/p>\n<pre><code class=\"language-html\">&lt;button className=\"btn\" onClick={() =&gt; generateResponse(newQuestion, setNewQuestion)}&gt;\n    Generate Response \ud83e\udd16\n&lt;\/button&gt;<\/code><\/pre>\n<p>Du hast nun einen Status erstellt, um den Formularwert zu speichern und zu aktualisieren, eine Methode hinzugef\u00fcgt, die als props von der <strong>App.js<\/strong>-Datei \u00fcbergeben wird, und das Klick-Ereignis verarbeitet. So sieht der endg\u00fcltige Code aus:<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/FormSection.jsx\n\nimport { useState } from 'react';\n\nconst FormSection = ({ generateResponse }) =&gt; {\n    const [newQuestion, setNewQuestion] = useState('');\n\n    return (\n        &lt;div className=\"form-section\"&gt;\n            &lt;textarea\n                rows=\"5\"\n                className=\"form-control\"\n                placeholder=\"Ask me anything...\"\n                value={newQuestion}\n                onChange={(e) =&gt; setNewQuestion(e.target.value)}\n            &gt;&lt;\/textarea&gt;\n            &lt;button className=\"btn\" onClick={() =&gt; generateResponse(newQuestion, setNewQuestion)}&gt;\n                Generate Response \ud83e\udd16\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    )\n}\n\nexport default FormSection;<\/code><\/pre>\n<p>Der n\u00e4chste Schritt besteht darin, eine Methode in der <strong>App.js<\/strong>-Datei zu erstellen, die den gesamten Prozess der Interaktion mit der OpenAI-API steuert.<\/p>\n<h4>Interaktion mit der OpenAI API<\/h4>\n<p>Um mit OpenAI API zu interagieren und API-Schl\u00fcssel 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\u00fcr ein Konto anmelden. Um einen API-Schl\u00fcssel zu generieren, klickst du oben rechts auf der Website auf <strong>Pers\u00f6nlich<\/strong>; es werden einige Optionen angezeigt; klick auf <strong>API-Schl\u00fcssel anzeigen<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/view-openai-api-keys.jpg\" alt=\"Zugriff auf OpenAI API-Schl\u00fcssel\" width=\"1600\" height=\"977\"><figcaption class=\"wp-caption-text\">Zugriff auf OpenAI API-Schl\u00fcssel<\/figcaption><\/figure>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Neuen geheimen Schl\u00fcssel erstellen<\/strong> und kopiere den Schl\u00fcssel an die Stelle, an der du ihn in dieser Anwendung f\u00fcr die Interaktion mit OpenAI verwenden w\u00fcrdest. 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\u00fcssel und benutze sie, um OpenAI zu initialisieren.<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport { Configuration, OpenAIApi } from 'openai';\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    return (\n        \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Im obigen Code wird der OpenAI API-Schl\u00fcssel als <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-eine-umgebungsvariable\/\">Umgebungsvariable<\/a> in der <strong>.env<\/strong>-Datei gespeichert. Du kannst eine <strong>.env<\/strong>-Datei im Stammverzeichnis deiner Anwendung erstellen und den Schl\u00fcssel in der Variable <code>REACT_APP_OPENAI_API_KEY<\/code> speichern.<\/p>\n<pre><code>\/\/ .env\nREACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx\u2026<\/code><\/pre>\n<p>Nun kannst du die Methode <code>generateResponse<\/code> in der <strong>App.js<\/strong>-Datei erstellen und die beiden Parameter \u00fcbergeben, die von dem Formular erwartet werden, das du bereits erstellt hast, um die Anfrage zu bearbeiten und die Antwort von der API zu erhalten.<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    const generateResponse = (newQuestion, setNewQuestion) =&gt; {\n        \/\/ Set up OpenAI API and handle response\n    };\n\n    return (\n        \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Jetzt kannst du eine Anfrage an die OpenAI API senden. Die OpenAI API kann viele Operationen durchf\u00fchren, wie z. B. Frage und Antwort (Q&#038;A), Grammatikkorrektur, \u00dcbersetzung und vieles mehr. F\u00fcr jeden dieser Vorg\u00e4nge gibt es unterschiedliche Optionen. Zum Beispiel ist der Motorwert f\u00fcr Q&#038;A <code>text-davinci-00<\/code>, w\u00e4hrend es f\u00fcr SQL translate <code>code-davinci-002<\/code> ist. In der <a href=\"https:\/\/platform.openai.com\/examples\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI-Beispieldokumentation<\/a> findest du die verschiedenen Beispiele und ihre Optionen.<\/p>\n<p>In diesem Tutotrial arbeiten wir nur mit <a href=\"https:\/\/platform.openai.com\/examples\/default-qa\" target=\"_blank\" rel=\"noopener noreferrer\">Q&#038;A<\/a>, und so sieht die Option aus:<\/p>\n<pre><code class=\"language-json\">{\n  model: \"text-davinci-003\",\n  prompt: \"Who is Obama?\",\n  temperature: 0,\n  max_tokens: 100,\n  top_p: 1,\n  frequency_penalty: 0.0,\n  presence_penalty: 0.0,\n  stop: [\"\"],\n}<\/code><\/pre>\n<p><strong>Hinweis:<\/strong> Ich habe den Prompt-Wert ge\u00e4ndert.<\/p>\n<p>Der Prompt ist die Frage, die aus dem Formular gesendet wird. Das hei\u00dft, du musst sie von der Formulareingabe erhalten, die du als Parameter an die Methode <code>generateResponse<\/code> \u00fcbergibst. Dazu definierst du die Optionen und verwendest dann den <a href=\"https:\/\/kinsta.com\/de\/blog\/spread-operator-javascript\/\">Spread-Operator<\/a>, um eine vollst\u00e4ndige Option zu erstellen, die die Eingabeaufforderung enth\u00e4lt:<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport { Configuration, OpenAIApi } from 'openai';\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    const generateResponse = async (newQuestion, setNewQuestion) =&gt; {\n        let options = {\n            model: 'text-davinci-003',\n            temperature: 0,\n            max_tokens: 100,\n            top_p: 1,\n            frequency_penalty: 0.0,\n            presence_penalty: 0.0,\n            stop: ['\/'],\n        };\n\n        let completeOptions = {\n            ...options,\n            prompt: newQuestion,\n        };\n\n    };\n\n    return (\n         \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Jetzt musst du nur noch eine Anfrage \u00fcber die Methode <code>createCompletion<\/code> an OpenAI senden, um eine Antwort zu erhalten.<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport { Configuration, OpenAIApi } from 'openai';\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nimport { useState } from 'react';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    const [storedValues, setStoredValues] = useState([]);\n\n    const generateResponse = async (newQuestion, setNewQuestion) =&gt; {\n        let options = {\n            model: 'text-davinci-003',\n            temperature: 0,\n            max_tokens: 100,\n            top_p: 1,\n            frequency_penalty: 0.0,\n            presence_penalty: 0.0,\n            stop: ['\/'],\n        };\n\n        let completeOptions = {\n            ...options,\n            prompt: newQuestion,\n        };\n\n        const response = await openai.createCompletion(completeOptions);\n\n        console.log(response.data.choices[0].text);\n    };\n\n    return (\n        \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>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\u00e4lt, und dieses Array dann als Prop in die <strong>AnswerSection<\/strong>-Komponente zu senden. So sieht der endg\u00fcltige Code von <strong>App.js<\/strong> aus:<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\nimport { Configuration, OpenAIApi } from 'openai';\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nimport { useState } from 'react';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    const [storedValues, setStoredValues] = useState([]);\n\n    const generateResponse = async (newQuestion, setNewQuestion) =&gt; {\n        let options = {\n            model: 'text-davinci-003',\n            temperature: 0,\n            max_tokens: 100,\n            top_p: 1,\n            frequency_penalty: 0.0,\n            presence_penalty: 0.0,\n            stop: ['\/'],\n        };\n\n        let completeOptions = {\n            ...options,\n            prompt: newQuestion,\n        };\n\n        const response = await openai.createCompletion(completeOptions);\n\n        if (response.data.choices) {\n            setStoredValues([\n                {\n                    question: newQuestion,\n                    answer: response.data.choices[0].text,\n                },\n                ...storedValues,\n            ]);\n            setNewQuestion('');\n        }\n    };\n\n    return (\n        &lt;div&gt;\n            &lt;div className=\"header-section\"&gt;\n                &lt;h1&gt;ChatGPT CLONE \ud83e\udd16&lt;\/h1&gt;\n                    &lt;p&gt;\n                        I am an automated question and answer system, designed to assist you\n                        in finding relevant information. You are welcome to ask me any\n                        queries you may have, and I will do my utmost to offer you a\n                        reliable response. Kindly keep in mind that I am a machine and\n                        operate solely based on programmed algorithms.\n                    &lt;\/p&gt;\n            &lt;\/div&gt;\n\n            &lt;FormSection generateResponse={generateResponse} \/&gt;\n\n            &lt;AnswerSection storedValues={storedValues} \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Du kannst nun die Komponente <strong>AnswerSection<\/strong> so bearbeiten, dass sie den Props-Wert von <strong>App.js<\/strong> erh\u00e4lt und die JavaScript-Methode <code>Map()<\/code> verwenden, um das Array <code>storedValues<\/code> zu durchsuchen:<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/AnswerSection.jsx\n\nconst AnswerSection = ({ storedValues }) =&gt; {\n    return (\n        &lt;&gt;\n            &lt;hr className=\"hr-line\" \/&gt;\n            &lt;div className=\"answer-container\"&gt;\n                {storedValues.map((value, index) =&gt; {\n                    return (\n                        &lt;div className=\"answer-section\" key={index}&gt;\n                            &lt;p className=\"question\"&gt;{value.question}&lt;\/p&gt;\n                            &lt;p className=\"answer\"&gt;{value.answer}&lt;\/p&gt;\n                            &lt;div className=\"copy-icon\"&gt;\n                                &lt;i className=\"fa-solid fa-copy\"&gt;&lt;\/i&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    );\n                })}\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    )\n}\n\nexport default AnswerSection;<\/code><\/pre>\n<p>Wenn du deine Anwendung ausf\u00fchrst und sie durch Fragen testest, wird die Antwort unten angezeigt. Du wirst aber feststellen, dass die Schaltfl\u00e4che Kopieren nicht funktioniert. Du musst der Schaltfl\u00e4che ein <code>onClick()<\/code> -Ereignis hinzuf\u00fcgen, damit sie eine Methode ausl\u00f6st, die die Funktion ausf\u00fchrt. Du kannst die Methode <code>navigator.clipboard.writeText()<\/code> verwenden, um die Funktion zu steuern. So sieht die Komponente <strong>AnswerSection<\/strong> jetzt aus:<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/AnswerSection.jsx\n\nconst AnswerSection = ({ storedValues }) =&gt; {\n    const copyText = (text) =&gt; {\n        navigator.clipboard.writeText(text);\n    };\n\n    return (\n        &lt;&gt;\n            &lt;hr className=\"hr-line\" \/&gt;\n            &lt;div className=\"answer-container\"&gt;\n                {storedValues.map((value, index) =&gt; {\n                    return (\n                        &lt;div className=\"answer-section\" key={index}&gt;\n                            &lt;p className=\"question\"&gt;{value.question}&lt;\/p&gt;\n                            &lt;p className=\"answer\"&gt;{value.answer}&lt;\/p&gt;\n                            &lt;div\n                                className=\"copy-icon\"\n                                onClick={() =&gt; copyText(value.answer)}\n                            &gt;\n                                &lt;i className=\"fa-solid fa-copy\"&gt;&lt;\/i&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    );\n                })}\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    )\n}\n\nexport default AnswerSection;<\/code><\/pre>\n<p>Wenn du deine Anwendung ausf\u00fchrst, wird deine ChatGPT-Klonanwendung perfekt funktionieren. Jetzt kannst du deine Anwendung bereitstellen, um online auf sie zuzugreifen und sie mit Freunden zu teilen.<\/p>\n<h2>Wie du deine React-Anwendung auf Kinsta bereitstellst<\/h2>\n<p>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\u00f6nnen. Wir sehen uns an, wie du das mit <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-github\/\">GitHub<\/a> und <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinsta<\/a> machen kannst.<\/p>\n<h3>Pushe deinen Code auf GitHub<\/h3>\n<p>Um deinen <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-man-code-auf-github-veroeffentlicht\/\">Code auf GitHub zu ver\u00f6ffentlichen<\/a>, kannst du <a href=\"https:\/\/kinsta.com\/de\/blog\/git-fuer-die-webentwicklung\/\">Git<\/a>-Befehle verwenden. Git ist eine zuverl\u00e4ssige und effiziente Methode, um Code\u00e4nderungen zu verwalten, an Projekten mitzuarbeiten und den Versionsverlauf zu pflegen.<\/p>\n<p>Der erste Schritt, um deinen Code zu ver\u00f6ffentlichen, ist die Erstellung eines neuen Projektarchivs, indem du dich bei deinem GitHub-Konto anmeldest, auf die Schaltfl\u00e4che &#8222;<strong>+<\/strong>&#8220; in der oberen rechten Ecke des Bildschirms klickst und im Dropdown-Men\u00fc &#8222;<strong>Neues Projektarchiv<\/strong>&#8220;\u00a0ausw\u00e4hlst.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Create-a-new-repository-on-GitHub-1.jpg\" alt=\"Ein neues Projektarchiv auf GitHub erstellen\" width=\"1600\" height=\"770\"><figcaption class=\"wp-caption-text\">Ein neues Projektarchiv auf GitHub erstellen<\/figcaption><\/figure>\n<p>Gib deinem Repository einen Namen, f\u00fcge eine Beschreibung hinzu (optional) und w\u00e4hle aus, ob es \u00f6ffentlich oder privat sein soll. Klicke auf <strong>Repository erstellen<\/strong>, um es zu erstellen.<\/p>\n<p>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.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/how-to-get-repository-URL-1.jpg\" alt=\"Zugriff auf die URL deines Repositorys\" width=\"1600\" height=\"738\"><figcaption class=\"wp-caption-text\">Zugriff auf die URL deines Repositorys<\/figcaption><\/figure>\n<p>\u00d6ffne dein Terminal oder deine Eingabeaufforderung und navigiere zu dem Verzeichnis, in dem sich dein Projekt befindet. F\u00fchre die folgenden Befehle nacheinander aus, um deinen Code in dein GitHub-Repository zu \u00fcbertragen:<\/p>\n<pre><code class=\"language-bash\">git init\ngit add .\ngit commit -m \"my first commit\"\ngit remote add origin [repository URL]\ngit push -u origin master<\/code><\/pre>\n<p><code>git init<\/code> initialisiert ein lokales Git-Repository, <code>git add .<\/code> f\u00fcgt alle Dateien im aktuellen Verzeichnis und seinen Unterverzeichnissen zum neuen Git-Repository hinzu. <code>git commit -m \"my first commit\"<\/code> \u00fcbertr\u00e4gt die \u00c4nderungen mit einer kurzen Nachricht an das Repository. <code>git remote add origin [repository URL]<\/code> legt die Repository-URL als Remote-Repository fest und <code>git push -u origin master<\/code> pusht den Code in das Remote-Repository (origin) im Master-Branch.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Du kannst &#8222;my first commit&#8220; durch eine kurze Nachricht, in der du deine \u00c4nderungen beschreibst, und &#8222;[repository URL]&#8220; durch die URL deines GitHub-Repositorys ersetzen. Sobald dein Code auf GitHub gepusht ist, kannst du dein Repository auf Kinsta bereitstellen.<\/p>\n<\/aside>\n\n<h3>Bereitstellen deiner ChatGPT Clone React-Anwendung auf Kinsta<\/h3>\n<p>Befolge diese Schritte, um dein Repository auf Kinsta bereitzustellen:<\/p>\n<ol>\n<li>Logge dich in dein Kinsta-Konto ein oder erstelle es auf dem <a href=\"https:\/\/my.kinsta.com\/?lang=de\">MyKinsta<\/a>-Dashboard.<\/li>\n<li>Klicke in der linken Seitenleiste auf <strong>Anwendungen<\/strong> und dann auf <strong>Dienst hinzuf\u00fcgen<\/strong>.<\/li>\n<li>W\u00e4hle <strong>Anwendung<\/strong> aus dem Dropdown-Men\u00fc, um eine React-Anwendung in Kinsta bereitzustellen.<\/li>\n<li>W\u00e4hle das Repository, das du bereitstellen m\u00f6chtest, aus dem erscheinenden Modal aus. Wenn du mehrere Zweige hast, kannst du denjenigen ausw\u00e4hlen, den du bereitstellen m\u00f6chtest, und der Anwendung einen Namen zuweisen. W\u00e4hle unter 24 einen <a href=\"https:\/\/kinsta.com\/de\/docs\/service-information\/rechenzentrums-standorte\/#application-and-database-hosting-data-centers\">Standort f\u00fcr das Rechenzentrum<\/a> aus, und Kinsta wird automatisch einen Startbefehl erkennen.<\/li>\n<li>Schlie\u00dflich ist es nicht sicher, API-Schl\u00fcssel an \u00f6ffentliche Hosts wie GitHub weiterzugeben, daher wurde er lokal als Umgebungsvariable hinzugef\u00fcgt. Beim Hosten kannst du ihn auch als <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">Umgebungsvariable<\/a> mit demselben Variablennamen und dem Schl\u00fcssel als Wert hinzuf\u00fcgen.<\/li>\n<\/ol>\n<figure style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploy_react_app_with_environment_variable.gif\" alt=\"Bereitstellen des ChatGPT-Klons auf Kinsta\" width=\"1440\" height=\"788\"><figcaption class=\"wp-caption-text\">Bereitstellen des ChatGPT-Klons auf Kinsta<\/figcaption><\/figure>\n<p>Deine Anwendung wird bereitgestellt und innerhalb weniger Minuten erh\u00e4ltst du einen Link, \u00fcber den du auf die bereitgestellte Version deiner Anwendung zugreifen kannst. In diesem Fall ist das <strong>https:\/\/chatgpt-clone-g9q10.kinsta.app\/<\/strong><\/p>\n<p><strong>Note:<\/strong> Du kannst das automatische Deployment aktivieren, sodass Kinsta deine Anwendung immer dann neu bereitstellt, wenn du deine Codebasis \u00e4nderst und sie auf GitHub ver\u00f6ffentlichst.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>In diesem Artikel hast du gelernt, wie du deine Website mit Kinstas Application Hosting bereitstellst. Wenn du eine einfache Anwendung\/Website erstellst, die nicht dynamisch gerendert werden muss und keinen Traffic-Spitzen ausgesetzt ist, kannst du deine Website auch mit <a href=\"https:\/\/kinsta.com\/static-site-hosting\">Kinstas Static Site<\/a> Hosting hosten.<\/p>\n<\/aside>\n\n\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=vmNem6wxfSQ\"><\/kinsta-video>\n<h2>Zusammenfassung<\/h2>\n<p>Die OpenAI API kann f\u00fcr eine Vielzahl von Anwendungen genutzt werden, von der Kundenbetreuung \u00fcber pers\u00f6nliche Assistenten bis hin zu Sprach\u00fcbersetzung und Inhaltserstellung.<\/p>\n<p>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\u00e4hnliches Gespr\u00e4chserlebnis zu bieten.<\/p>\n<p>Es gibt noch mehr M\u00f6glichkeiten, die OpenAI API zu nutzen und diese Klonanwendung zu verbessern. Du kannst zum Beispiel eine lokale Speicherung implementieren, damit fr\u00fchere Fragen und Antworten nicht verschwinden, auch wenn du deinen Browser aktualisierst.<\/p>\n<p>Mit der kostenlosen Testversion und dem <a href=\"https:\/\/sevalla.com\/pricing\/\">Hobby-Tier<\/a> 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?<\/p>\n<p>Teile dein Projekt und deine Erfahrungen in den Kommentaren unten mit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Da die Nutzung von Chatbots und virtuellen Assistenten immer weiter zunimmt, suchen viele Unternehmen und Entwickler nach M\u00f6glichkeiten, ihre eigenen KI-gesteuerten Chatbots zu entwickeln. ChatGPT ist &#8230;<\/p>\n","protected":false},"author":287,"featured_media":60053,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[925,975],"class_list":["post-60052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie man eine ChatGPT-Klonanwendung mit React und OpenAI API erstellt und bereitstellt - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"In diesem interaktiven Tutorial erf\u00e4hrst du, wie du mit React und der OpenAI API eine ChatGPT-Klon-Anwendung erstellst und sie dann auf Kinsta bereitstellst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man eine ChatGPT-Klonanwendung mit React und OpenAI API erstellt und bereitstellt\" \/>\n<meta property=\"og:description\" content=\"In diesem interaktiven Tutorial erf\u00e4hrst du, wie du mit React und der OpenAI API eine ChatGPT-Klon-Anwendung erstellst und sie dann auf Kinsta bereitstellst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-16T07:18:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-18T11:52:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"In diesem interaktiven Tutorial erf\u00e4hrst du, wie du mit React und der OpenAI API eine ChatGPT-Klon-Anwendung erstellst und sie dann auf Kinsta bereitstellst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"18\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Wie man eine ChatGPT-Klonanwendung mit React und OpenAI API erstellt und bereitstellt\",\"datePublished\":\"2023-03-16T07:18:19+00:00\",\"dateModified\":\"2023-12-18T11:52:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/\"},\"wordCount\":2933,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/\",\"name\":\"Wie man eine ChatGPT-Klonanwendung mit React und OpenAI API erstellt und bereitstellt - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"datePublished\":\"2023-03-16T07:18:19+00:00\",\"dateModified\":\"2023-12-18T11:52:47+00:00\",\"description\":\"In diesem interaktiven Tutorial erf\u00e4hrst du, wie du mit React und der OpenAI API eine ChatGPT-Klon-Anwendung erstellst und sie dann auf Kinsta bereitstellst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man eine ChatGPT-Klonanwendung mit React und OpenAI API erstellt und bereitstellt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man eine ChatGPT-Klonanwendung mit React und OpenAI API erstellt und bereitstellt - Kinsta\u00ae","description":"In diesem interaktiven Tutorial erf\u00e4hrst du, wie du mit React und der OpenAI API eine ChatGPT-Klon-Anwendung erstellst und sie dann auf Kinsta bereitstellst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man eine ChatGPT-Klonanwendung mit React und OpenAI API erstellt und bereitstellt","og_description":"In diesem interaktiven Tutorial erf\u00e4hrst du, wie du mit React und der OpenAI API eine ChatGPT-Klon-Anwendung erstellst und sie dann auf Kinsta bereitstellst.","og_url":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-03-16T07:18:19+00:00","article_modified_time":"2023-12-18T11:52:47+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"In diesem interaktiven Tutorial erf\u00e4hrst du, wie du mit React und der OpenAI API eine ChatGPT-Klon-Anwendung erstellst und sie dann auf Kinsta bereitstellst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"18\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Wie man eine ChatGPT-Klonanwendung mit React und OpenAI API erstellt und bereitstellt","datePublished":"2023-03-16T07:18:19+00:00","dateModified":"2023-12-18T11:52:47+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/"},"wordCount":2933,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/","url":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/","name":"Wie man eine ChatGPT-Klonanwendung mit React und OpenAI API erstellt und bereitstellt - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","datePublished":"2023-03-16T07:18:19+00:00","dateModified":"2023-12-18T11:52:47+00:00","description":"In diesem interaktiven Tutorial erf\u00e4hrst du, wie du mit React und der OpenAI API eine ChatGPT-Klon-Anwendung erstellst und sie dann auf Kinsta bereitstellst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/chatgpt-klon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/de\/thema\/react\/"},{"@type":"ListItem","position":3,"name":"Wie man eine ChatGPT-Klonanwendung mit React und OpenAI API erstellt und bereitstellt"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/60052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=60052"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/60052\/revisions"}],"predecessor-version":[{"id":67943,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/60052\/revisions\/67943"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/60052\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/60052\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/60052\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/60052\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/60052\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/60052\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/60052\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/60052\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/60052\/translations\/dk"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/60052\/translations\/pt"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/60052\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/60053"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=60052"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=60052"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=60052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}