{"id":51068,"date":"2023-03-16T08:20:17","date_gmt":"2023-03-16T07:20:17","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=51068&#038;preview=true&#038;preview_id=51068"},"modified":"2023-10-19T14:32:09","modified_gmt":"2023-10-19T12:32:09","slug":"chatgpt-kloon","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/","title":{"rendered":"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API"},"content":{"rendered":"<p>Nu het gebruik van chatbots en virtuele assistenten blijft groeien, zijn veel bedrijven en developers op zoek naar manieren om hun eigen AI aangedreven chatbots te maken. ChatGPT is zo&#8217;n chatbot, gemaakt door OpenAI, die in staat is om mensachtige gesprekken te voeren en een breed scala aan vragen te beantwoorden.<\/p>\n<h2>Wat je gaat bouwen<\/h2>\n<p>In deze tutorial leer je hoe je een ChatGPT kloonapplicatie bouwt met <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a> en de OpenAI API. Als je in het weekend een leuk en boeiend project wilt proberen, dan is dit een mooie gelegenheid om in React en OpenAI te duiken.<\/p>\n<p>Je leert ook hoe je direct vanuit je GitHub repository kunt deployen naar Kinsta&#8217;s <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Applicatie Hosting<\/a> platform, dat een gratis <em>.kinsta.app<\/em> domein biedt om je project snel live te laten gaan. En met Kinsta&#8217;s gratis trial en <a href=\"https:\/\/sevalla.com\/pricing\/\">Hobby pakket<\/a> kun je gemakkelijk en zonder kosten aan de slag.<\/p>\n<p>Hier is een live demo van de <a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">ChatGPT kloonapplicatie<\/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 kloonapplicatie\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">ChatGPT kloonapplicatie<\/figcaption><\/figure>\n<p>Als je dit project nader wilt bekijken, kun je de <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub repository<\/a> ervan openen.<\/p>\n<p>Als alternatief kun je met dit <a href=\"https:\/\/github.com\/olawanlejoel\/chatgpt-clone-starter\">starterproject<\/a> template kiezen voor <strong>Use this template<\/strong> &gt; <strong>Create a new repository<\/strong> &#8211; dit kopieert de starter code naar een nieuwe repository. Dit starterproject bevat fundamentele elementen zoals stijlen, Font Awesome CDN link, <a href=\"https:\/\/www.npmjs.com\/package\/openai\">OpenAi pakket<\/a>, en een basisstructuur om je te helpen aan de slag te gaan.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Het gratis tegoed voor het gebruik van OpenAI&#8217;s API is beperkt tot $18. Als je <a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\">deze demo-app<\/a> aan het testen bent en hij stopt met werken, betekent dit dat het tegoed op kan zijn. Om de OpenAI API te blijven gebruiken, moet je je pakket upgraden.<\/p>\n<\/aside>\n\n<p>\u00a0<\/p>\n<h3>Vereisten<\/h3>\n<p>Deze tutorial is ontworpen als een &#8220;follow-along&#8221;. Daarom wordt aanbevolen dat je over het volgende beschikt om gemakkelijk mee te kunnen coderen:<\/p>\n<ul>\n<li>Fundamenteel begrip van <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/css-best-practices\/\">CSS<\/a> en <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a><\/li>\n<li>Enige bekendheid met <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a><\/li>\n<li>Node.js en npm (<a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">Node Package Manager<\/a>) of yarn ge\u00efnstalleerd op je computer<\/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>Wat is OpenAI API?<\/h2>\n<p>De <a href=\"https:\/\/platform.openai.com\/overview\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI API<\/a> is een cloud-gebaseerd platform dat developers via een API toegang geeft tot de taalmodellen van OpenAI, zoals GPT-3. Hiermee kunnen developers features voor natuurlijke taalverwerking zoals tekstaanvulling, sentimentanalyse, samenvatting en vertaling toevoegen aan hun applicaties zonder hun eigen modellen te hoeven ontwikkelen en te trainen.<\/p>\n<p>Om de OpenAI API te gebruiken moeten developers\u00a0 een account aanmaken op de <a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI website<\/a> en een API sleutel aanvragen. De API-sleutel wordt gebruikt om API verzoeken te authentiseren en het gebruik bij te houden.<\/p>\n<p>Zodra de API sleutel is verkregen, kunnen developers\u00a0 de API gebruiken om tekst aan het taalmodel voor te leggen en antwoorden te ontvangen.<\/p>\n\n<h2>Waarom React?<\/h2>\n<p>React is een <a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-bibliotheken\/\">populaire JavaScript bibliotheek<\/a> voor het bouwen van gebruikersinterfaces. Volgens het <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#section-most-popular-technologies-web-frameworks-and-technologies\" target=\"_blank\" rel=\"noopener noreferrer\">Stack Overflow developersonderzoek van 2022<\/a> is het de op \u00e9\u00e9n na meest gebruikte webtechnologie, met 42,62% van het marktaandeel.<\/p>\n<p>Met React kunnen developers declaratieve componenten maken die verschillende onderdelen van de gebruikersinterface vertegenwoordigen. Deze componenten worden gedefinieerd met een syntaxis genaamd JSX, wat een combinatie is van JavaScript en HTML.<\/p>\n<p>Dankzij het grote <a href=\"https:\/\/kinsta.com\/nl\/blog\/react-componenten-bibliotheek\/\">ecosysteem van componentbibliotheken en kits<\/a> kunnen developers gemakkelijk werken met en integreren van API&#8217;s, zoals de OpenAI API, om complexe chatinterfaces te bouwen, en dat maakt het een uitstekende keuze voor het bouwen van een ChatGPT kloonapplicatie.<\/p>\n<h3>Zo stel je je React ontwikkelomgeving in<\/h3>\n<p>De beste manier om <a href=\"https:\/\/kinsta.com\/nl\/blog\/react-installeren\/\">React te installeren<\/a> of een React project te maken is door het te installeren met <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">create-react-app<\/a>. Een eerste vereiste is <a href=\"https:\/\/kinsta.com\/nl\/blog\/node-js-installeren\/\">dat Node.js op je machine is ge\u00efnstalleerd<\/a>. Om te bevestigen dat je Node ge\u00efnstalleerd hebt, voer je het volgende commando uit in je terminal.<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Als er een versie verschijnt, dan bestaat die. Om <a href=\"https:\/\/github.com\/npm\/npm\/releases\/tag\/v5.2.0\" target=\"_blank\" rel=\"noopener noreferrer\">npx<\/a> te gebruiken, moet je ervoor zorgen dat je Node versie niet minder is dan v14.0.0, en je NPM versie niet minder is dan v5.6; anders zou je die moeten bijwerken door <code>npm update -g<\/code> uit te voeren. Als je npm hebt uitgezocht, kun je nu een React project opzetten door het onderstaande commando uit te voeren:<\/p>\n<pre><code class=\"language-bash\">npx create-react-app chatgpt-clone<\/code><\/pre>\n<p><strong>Opmerking:<\/strong> &#8220;chatgpt-clone&#8221; is de applicatienaam die we maken, maar je kunt hem veranderen in een naam naar keuze.<\/p>\n<p>Het installatieproces kan enkele minuten duren. Eenmaal succesvol, kun je naar de map navigeren en het Node.js OpenAI pakket installeren, dat gemakkelijke toegang biedt tot de OpenAI API vanuit Node.js met het onderstaande commando:<\/p>\n<pre><code class=\"language-bash\">npm install openai<\/code><\/pre>\n<p>Je kunt nu <code>npm start<\/code> uitvoeren om je applicatie live te zien op <strong>localhost:3000<\/strong>.<\/p>\n<p>Wanneer een React project wordt gemaakt met het commando <code>create-react-app<\/code>, wordt automatisch een mappenstructuur geschetst. De belangrijkste map die je aangaat is de map <code>src<\/code>, waar de ontwikkeling plaatsvindt. Deze map bevat standaard veel bestanden, maar je zou je alleen bezig moeten houden met de bestanden <strong>App.js<\/strong>, <strong>index.js<\/strong> en <strong>index.css<\/strong>.<\/p>\n<ol>\n<li><strong>App.js<\/strong>: Het <strong>App.js<\/strong> bestand is de belangrijkste component in een React applicatie. Het vertegenwoordigt typisch het top-level component dat alle andere componenten in de applicatie rendert.<\/li>\n<li><strong>index.js<\/strong>: Dit bestand is het ingangspunt van je React applicatie. Het is het eerste bestand dat wordt geladen als de app wordt geopend en is verantwoordelijk voor het renderen van de <strong>App.js<\/strong> component naar de browser.<\/li>\n<li><strong>index.css<\/strong>: Dit bestand is verantwoordelijk voor het defini\u00ebren van de algemene styling en opmaak van je React applicatie.<\/li>\n<\/ol>\n<h2>Zo bouw je een ChatGPT kloon met React en OpenAI API<\/h2>\n<p>De ChatGPT kloonapplicatie zal bestaan uit twee componenten om de applicatie gemakkelijker te begrijpen en te onderhouden. Deze twee componenten zijn:<\/p>\n<ol>\n<li><strong>Form Section<\/strong>: Deze component bevat een tekstveld en een knop voor gebruikers om te communiceren met de chatbot.<\/li>\n<li><strong>Answer Section<\/strong>: De vragen en bijbehorende antwoorden worden opgeslagen in een array en weergegeven in deze sectie. Je doorloopt de matrix chronologisch, waarbij de nieuwste eerst wordt getoond.<\/li>\n<\/ol>\n<h3>De ChatGPT kloonapplicatie instellen<\/h3>\n<p>In deze tutorial beginnen we met het bouwen van de applicatie interface en daarna kun je de functionaliteit implementeren zodat je applicatie interageert met de OpenAI API. Begin met het maken van de twee componenten die je in deze tutorial zult gebruiken. Voor een goede organisatie maak je een <strong>components<\/strong> map in de <strong>src<\/strong> map waar alle componenten worden opgeslagen.<\/p>\n<h4>Het\u00a0Form Section\u00a0component<\/h4>\n<p>Dit is een eenvoudig formulier dat bestaat uit een <code>textarea<\/code> en een submit <code>button<\/code>.<\/p>\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\/\/ components\/FormSection.jsx\n\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>Zo zal het formulier er naar verwachting uitzien als je het importeert in je <strong>App.js<\/strong> bestand:<\/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=\"Form section component voor ChatGPT kloon\" width=\"1600\" height=\"360\"><figcaption class=\"wp-caption-text\">Form section component<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>De nadruk van deze tutorial ligt meer op het bouwen en deployen van je applicatie. Je kunt dus de stijlen in het <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">src\/index.css<\/a> bestand kopi\u00ebren naar je eigen project om hetzelfde resultaat\/applicatie te krijgen.<\/p>\n<\/aside>\n\n<h4>Het\u00a0Answer Section component<\/h4>\n<p>In deze sectie worden alle vragen en antwoorden getoond. Zo ziet deze sectie eruit als je hem ook importeert in je <strong>App.js<\/strong> bestand.<\/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=\"Answer section component van de ChatGPT kloon\" width=\"1600\" height=\"347\"><figcaption class=\"wp-caption-text\">Answer section component<\/figcaption><\/figure>\n<p>Je haalt deze vragen en antwoorden op uit een array en een loop om je code gemakkelijker leesbaar en onderhoudbaar te maken.<\/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>De startpagina<\/h4>\n<p>Je hebt nu beide componenten gemaakt, maar er zal niets verschijnen als je je applicatie uitvoert, omdat je ze moet importeren in je <strong>App.js<\/strong> bestand. Voor deze applicatie zul je geen enkele vorm van routing implementeren, wat betekent dat het <strong>App.js<\/strong> bestand zal dienen als de thuiscomponent\/pagina van je applicatie.<\/p>\n<p>Je kunt wat content toevoegen, zoals de titel en beschrijving van je applicatie, voordat je de componenten importeert.<\/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>In bovenstaande code worden de twee componenten ge\u00efmporteerd en toegevoegd aan de applicatie. Als je je applicatie uitvoert, ziet je applicatie er zo uit:<\/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=\"Complete ChatGPT kloonapplicatie\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Complete ChatGPT kloonapplicatie<\/figcaption><\/figure>\n<h3>Functionaliteit toevoegen en OpenAI API integreren<\/h3>\n<p>Je hebt nu de gebruikersinterface van je applicatie. De volgende stap is om de applicatie functioneel te maken, zodat hij kan communiceren met de OpenAI API en antwoorden kan krijgen. Eerst moet je de waarde van je formulier krijgen als het wordt ingediend, want die zal worden gebruikt om de OpenAI API te bevragen.<\/p>\n<h4>Gegevens uit een formulier halen<\/h4>\n<p>In React is de beste manier om gegevens op te slaan en bij te werken het gebruik van states. In functionele componenten wordt de <code>useState()<\/code> hook gebruikt om met states te werken. Je kunt een state aanmaken, de waarde van je formulier aan de state toewijzen, en deze bijwerken wanneer de waarde verandert. Laten we beginnen met het importeren van de <code>useState()<\/code> hook in de component <strong>FormSection.jsx<\/strong> en dan een state maken om op te slaan en bij te werken <code>newQuestions<\/code>.<\/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>Vervolgens kun je de waarde van het veld <code>textarea<\/code> toewijzen aan de state en een event <code>onChange()<\/code> maken om de state bij te werken telkens als de invoerwaarde verandert:<\/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>Tenslotte kun je een <code>onClick()<\/code> event aanmaken, om een functie te laden telkens wanneer op de verzendknop wordt geklikt. Deze methode wordt aangemaakt in het <strong>App.js<\/strong> bestand en als een props doorgegeven aan het <strong>FormSection.jsx<\/strong> component met de <code>newQuestion<\/code> en <code>setNewQuestion<\/code> waarden als argumenten.<\/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>Je hebt nu een state gecre\u00eberd om de waarde van het formulier op te slaan en bij te werken, een methode toegevoegd die als props wordt doorgegeven vanuit het <strong>App.js<\/strong> bestand en het click event afgehandeld. Zo ziet de uiteindelijke code eruit:<\/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>De volgende stap is het maken van een methode in het <strong>App.js<\/strong> bestand om het hele proces van interactie met OpenAI API af te handelen.<\/p>\n<h4>Interactie met OpenAI API<\/h4>\n<p>Voor interactie met OpenAI API en het verkrijgen van API sleutels in een React applicatie moet je een OpenAI API account aanmaken. Je kunt je aanmelden voor een account op de OpenAI website met behulp van je google account of e-mail. Om een API sleutel te genereren, klik je op <strong>Personal<\/strong>\u00a0in de rechterbovenhoek van de website; er verschijnen enkele opties; klik op <strong>View API keys<\/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=\"Toegang tot OpenAI API sleutels.\" width=\"1600\" height=\"977\"><figcaption class=\"wp-caption-text\">Toegang tot OpenAI API sleutels.<\/figcaption><\/figure>\n<p>Klik op de knop <strong>Create new secret key<\/strong>, kopieer de sleutel ergens zoals je die in deze applicatie zou gebruiken voor interactie met OpenAI. Je kunt nu doorgaan met het initialiseren van OpenAI door het OpenAI pakket (dat je al ge\u00efnstalleerd hebt) te importeren, samen met de configuratiemethode. Maak dan een configuratie met je gegenereerde sleutel en gebruik die om OpenAI te initialiseren.<\/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>In de bovenstaande code wordt de OpenAI API sleutel opgeslagen als <a href=\"https:\/\/kinsta.com\/blog\/what-is-an-environment-variable\/\">omgevingsvariabele<\/a> in het <strong>.env<\/strong> bestand. Je kunt een <strong>.env<\/strong> bestand aanmaken in de hoofdmap van je applicatie en de sleutel opslaan in de variabele <code>REACT_APP_OPENAI_API_KEY<\/code>.<\/p>\n<pre><code>\/\/ .env\nREACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx\u2026<\/code><\/pre>\n<p>Je kunt nu doorgaan met het maken van de <code>generateResponse<\/code> methode in het <strong>App.js<\/strong> bestand, en de twee parameters doorgeven die worden verwacht van het formulier dat je al hebt gemaakt om het verzoek af te handelen en antwoord te krijgen van de API.<\/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>Je kunt nu een verzoek sturen naar de OpenAI API. De OpenAI API kan veel bewerkingen uitvoeren, zoals vraag en antwoord (V&#038;A), grammaticacorrectie, vertaling en nog veel meer. Voor elk van deze bewerkingen zijn de opties verschillend. Bijvoorbeeld, de enginewaarde voor Q&#038;A is <code>text-davinci-00<\/code>, terwijl voor SQL vertalen <code>code-davinci-002<\/code> is. Kijk gerust in de <a href=\"https:\/\/platform.openai.com\/examples\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI voorbeelddocumentatie<\/a> voor de verschillende voorbeelden en hun opties.<\/p>\n<p>Voor deze tutorial werken we alleen met <a href=\"https:\/\/platform.openai.com\/examples\/default-qa\" target=\"_blank\" rel=\"noopener noreferrer\">V&#038;A,<\/a> zo ziet de optie eruit:<\/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>Opmerking:<\/strong> Ik heb de promptwaarde veranderd.<\/p>\n<p>De prompt is de vraag die vanuit het formulier wordt verzonden. Dit betekent dat je die moet ontvangen van de formulierinvoer die je als parameter doorgeeft aan de methode <code>generateResponse<\/code>. Hiervoor definieer je de opties en gebruik je vervolgens de <a href=\"https:\/\/kinsta.com\/nl\/blog\/spread-operator-javascript\/\">spread operator<\/a> om een complete optie te maken die de prompt bevat:<\/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>Wat nu nog rest is een verzoek via de methode <code>createCompletion<\/code> naar OpenAI te sturen om een antwoord te krijgen.<\/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>In bovenstaande code wordt de tekst van het antwoord weergegeven op je console. Voel je vrij om je applicatie te testen door een willekeurige vraag te stellen. De laatste stap zou zijn om een state te cre\u00ebren die de array van vragen en antwoorden bevat en dan deze array als een prop naar de <strong>AnswerSection<\/strong> component te sturen. Zo ziet de uiteindelijke code van <strong>App.js<\/strong> eruit:<\/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>Je kunt nu de <strong>AnswerSection<\/strong> component bewerken, zodat deze de props waarde ontvangt van <strong>App.js<\/strong> en de JavaScript <code>Map()<\/code> methode gebruiken om door de <code>storedValues<\/code> array te kijken:<\/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>Als je je applicatie uitvoert en test door vragen te stellen, zal het antwoord hieronder worden weergegeven. Maar je zult merken dat de kopieerknop niet werkt. Je zult een <code>onClick()<\/code> event moeten toevoegen aan de knop, zodat deze een methode triggert om de functionaliteit af te handelen. Je kunt de methode <code>navigator.clipboard.writeText()<\/code> gebruiken om de functionaliteit af te handelen. Zo ziet de <strong>AnswerSection<\/strong> component er nu uit:<\/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>Als je je applicatie uitvoert, zal je ChatGPT kloonapplicatie perfect werken. Je kunt je applicatie nu deployen om hem online te openen en te delen met vrienden.<\/p>\n<h2>Zo deploy je je React applicatie naar Kinsta<\/h2>\n<p>Het is niet genoeg om deze applicatie te bouwen en op je lokale computers te laten staan. Je zult het online willen delen, zodat anderen er toegang toe hebben. Laten we eens kijken hoe je dit doet met <a href=\"https:\/\/kinsta.com\/blog\/what-is-github\/\">GitHub<\/a> en <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinsta<\/a>.<\/p>\n<h3>Je code naar GitHub pushen<\/h3>\n<p>Om je <a href=\"https:\/\/kinsta.com\/nl\/blog\/zo-push-je-code-naar-github\/\">code naar GitHub te pushen<\/a> kun je <a href=\"https:\/\/kinsta.com\/nl\/blog\/git-voor-webdevelopment\/\">Git<\/a> commando&#8217;s gebruiken, wat een betrouwbare en effici\u00ebnte manier is om wijzigingen in de code te beheren, samen te werken aan projecten, en de versiegeschiedenis bij te houden.<\/p>\n<p>De eerste stap om je codes te pushen is het aanmaken van een nieuwe repository door in te loggen op je GitHub account, te klikken op de <strong>+<\/strong> knop in de rechterbovenhoek van het scherm, en <strong>New repository<\/strong> te selecteren uit het dropdownmenu.<\/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=\"Een nieuw repository aanmaken op GitHub\" width=\"1600\" height=\"770\"><figcaption class=\"wp-caption-text\">Een nieuw repository aanmaken op GitHub<\/figcaption><\/figure>\n<p>Geef je repository een naam, voeg een beschrijving toe (optioneel), en kies of je het openbaar of priv\u00e9 wilt hebben. Klik op <strong>Create repository<\/strong>\u00a0om het aan te maken.<\/p>\n<p>Zodra je repository is aangemaakt, zorg je ervoor dat je de URL van het repository verkrijgt van de hoofdpagina van je repository, die je nodig hebt om je code naar GitHub te pushen.<\/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=\"Toegang tot de URL van je repository\" width=\"1600\" height=\"738\"><figcaption class=\"wp-caption-text\">Toegang tot de URL van je repository<\/figcaption><\/figure>\n<p>Open je terminal of commandoprompt en navigeer naar de map die je project bevat. Voer de volgende commando&#8217;s \u00e9\u00e9n voor \u00e9\u00e9n uit om je code naar je GitHub repository te pushen:<\/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> initialiseert een lokale Git repository, <code>git add .<\/code> voegt alle bestanden in de huidige map en zijn submappen toe aan de nieuwe Git repository. <code>git commit -m \"my first commit\"<\/code> commit de wijzigingen aan de repository met een korte boodschap. <code>git remote add origin [repository URL]<\/code> stelt de URL van de repository in als de remote repository en <code>git push -u origin master<\/code> pusht de code naar de remote repository (origin) in de masterbranch.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Je kunt &#8220;my first commit&#8221; vervangen door een kort bericht van jezelf dat de wijzigingen beschrijft die je gemaakt hebt en &#8220;[repository URL]&#8221; door de URL van je GitHub repository vervangen. Zodra je code naar GitHub is gepushed, kun je nu je repository deployen naar Kinsta.<\/p>\n<\/aside>\n\n<h3>Je ChatGPT kloon React applicatie deployen op Kinsta<\/h3>\n<p>Volg deze stappen om je repository naar Kinsta te deployen:<\/p>\n<ol>\n<li>Log in op of maak je Kinsta account aan op het <a href=\"https:\/\/my.kinsta.com\/?lang=nl\">MyKinsta<\/a> dashboard.<\/li>\n<li>Klik op <b>Applicaties <\/b>in de linker zijbalk en vervolgens op <strong>Dienst toevoegen<\/strong>.<\/li>\n<li>Selecteer <strong>Applicatie <\/strong>in het dropdownmenu om een React applicatie te deployen naar Kinsta.<\/li>\n<li>Selecteer de repository die je wilt deployen in de popup die verschijnt. Als je meerdere branches hebt, kun je de branch kiezen die je wilt inzetten en de applicatie een naam geven. Kies een <a href=\"https:\/\/kinsta.com\/nl\/docs\/service-informatie\/datacenter-locaties\/#application-and-database-hosting-data-centers\">datacenterlocatie<\/a> uit de beschikbare 24, en Kinsta zal automatisch een startcommando detecteren.<\/li>\n<li>Tenslotte is het niet veilig om API sleutels naar publieke hosts zoals GitHub te pushen, het is lokaal als omgevingsvariabele toegevoegd. Bij hosting kun je het ook als <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">omgevingsvariabele<\/a> toevoegen met dezelfde variabelenaam en de sleutel als waarde.<\/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=\"ChatGPT kloon deployen op Kinsta.\" width=\"1440\" height=\"788\"><figcaption class=\"wp-caption-text\">ChatGPT kloon deployen op Kinsta.<\/figcaption><\/figure>\n<p>Je applicatie zal beginnen te deployen, en binnen een paar minuten wordt een link gegeven om toegang te krijgen tot de uitgezette versie van je applicatie. In dit geval is dat <strong>https:\/\/chatgpt-clone-g9q10.kinsta.app\/ <\/strong><\/p>\n<p><strong>Note:<\/strong> Je kunt automatische deployment inschakelen, zodat Kinsta je applicatie opnieuw deployt telkens als je je codebase wijzigt en naar GitHub pusht.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>In dit artikel heb je geleerd hoe je je site kunt deployen met Kinsta&#8217;s Application Hosting. Als alternatief, als je een basis applicatie\/website bouwt die geen dynamische rendering nodig heeft en niet onderhevig is aan verkeerspieken, kun je ervoor kiezen om je site te hosten met Kinsta&#8217;s <a href=\"https:\/\/kinsta.com\/static-site-hosting\">Statische Site Hosting<\/a>.<\/p>\n<\/aside>\n\n\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=vmNem6wxfSQ\"><\/kinsta-video>\n<h2>Samenvatting<\/h2>\n<p>De OpenAI API kan worden gebruikt om een groot aantal potenti\u00eble applicaties te bouwen, van klantenondersteuning en persoonlijke assistenten tot vertalingen en het maken van content.<\/p>\n<p>In deze tutorial heb je geleerd hoe je met React en OpenAI een ChatGPT kloonapplicatie kunt bouwen. Je kunt deze applicatie\/functie integreren in andere applicaties om gebruikers mensachtige gesprekservaringen te bieden.<\/p>\n<p>Er is natuurlijk meer mogelijk met de OpenAI API en hoe deze kloonapplicatie kan worden verbeterd. Je kunt bijvoorbeeld lokale opslag deployen zodat eerdere vragen en antwoorden niet verdwijnen, ook niet nadat je je browser ververst.<\/p>\n<p>Met Kinsta&#8217;s gratis trial en <a href=\"https:\/\/sevalla.com\/pricing\/\">Hobby pakket<\/a> kun je gemakkelijk en zonder kosten aan de slag met onze Applicatie Hosting. Dus waarom zou je het niet eens proberen en kijken wat je kunt maken?<\/p>\n<p>Deel je project en ervaringen in het comments hieronder.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nu het gebruik van chatbots en virtuele assistenten blijft groeien, zijn veel bedrijven en developers op zoek naar manieren om hun eigen AI aangedreven chatbots te &#8230;<\/p>\n","protected":false},"author":287,"featured_media":51069,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[871],"class_list":["post-51068","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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>Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API<\/title>\n<meta name=\"description\" content=\"Leer in deze interactieve tutorial hoe je een ChatGPT kloon applicatie bouwt met React en de OpenAI API en deze vervolgens te deployen bij Kinsta.\" \/>\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\/nl\/blog\/chatgpt-kloon\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API\" \/>\n<meta property=\"og:description\" content=\"Leer in deze interactieve tutorial hoe je een ChatGPT kloon applicatie bouwt met React en de OpenAI API en deze vervolgens te deployen bij Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-16T07:20:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-19T12:32:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/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=\"Leer in deze interactieve tutorial hoe je een ChatGPT kloon applicatie bouwt met React en de OpenAI API en deze vervolgens te deployen bij Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/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_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API\",\"datePublished\":\"2023-03-16T07:20:17+00:00\",\"dateModified\":\"2023-10-19T12:32:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/\"},\"wordCount\":2979,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/\",\"name\":\"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"datePublished\":\"2023-03-16T07:20:17+00:00\",\"dateModified\":\"2023-10-19T12:32:09+00:00\",\"description\":\"Leer in deze interactieve tutorial hoe je een ChatGPT kloon applicatie bouwt met React en de OpenAI API en deze vervolgens te deployen bij Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"width\":3042,\"height\":1521,\"caption\":\"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API","description":"Leer in deze interactieve tutorial hoe je een ChatGPT kloon applicatie bouwt met React en de OpenAI API en deze vervolgens te deployen bij Kinsta.","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\/nl\/blog\/chatgpt-kloon\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API","og_description":"Leer in deze interactieve tutorial hoe je een ChatGPT kloon applicatie bouwt met React en de OpenAI API en deze vervolgens te deployen bij Kinsta.","og_url":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-03-16T07:20:17+00:00","article_modified_time":"2023-10-19T12:32:09+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/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":"Leer in deze interactieve tutorial hoe je een ChatGPT kloon applicatie bouwt met React en de OpenAI API en deze vervolgens te deployen bij Kinsta.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"18 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API","datePublished":"2023-03-16T07:20:17+00:00","dateModified":"2023-10-19T12:32:09+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/"},"wordCount":2979,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/","url":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/","name":"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","datePublished":"2023-03-16T07:20:17+00:00","dateModified":"2023-10-19T12:32:09+00:00","description":"Leer in deze interactieve tutorial hoe je een ChatGPT kloon applicatie bouwt met React en de OpenAI API en deze vervolgens te deployen bij Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","width":3042,"height":1521,"caption":"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/chatgpt-kloon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/react\/"},{"@type":"ListItem","position":3,"name":"Zo bouw en deploy je een ChatGPT kloonapplicatie met React en OpenAI API"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/51068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=51068"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/51068\/revisions"}],"predecessor-version":[{"id":56148,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/51068\/revisions\/56148"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51068\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51068\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51068\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51068\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51068\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51068\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51068\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51068\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51068\/translations\/dk"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51068\/translations\/pt"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51068\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/51069"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=51068"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=51068"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=51068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}