{"id":51320,"date":"2023-03-16T07:22:38","date_gmt":"2023-03-16T07:22:38","guid":{"rendered":"https:\/\/kinsta.com\/se\/?p=51320&#038;preview=true&#038;preview_id=51320"},"modified":"2023-09-21T09:43:11","modified_gmt":"2023-09-21T09:43:11","slug":"chatgpt-klon","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/","title":{"rendered":"Hur du bygger och distribuerar en ChatGPT-klonapplikation med React och OpenAI API"},"content":{"rendered":"<p>Anv\u00e4ndningen av chatbots och virtuella assistenter forts\u00e4tter att \u00f6ka. D\u00e4rf\u00f6r s\u00e5 s\u00f6ker m\u00e5nga f\u00f6retag och utvecklare efter s\u00e4tt att skapa sina egna AI-drivna chatbots. ChatGPT \u00e4r en s\u00e5dan chattbot, skapad av OpenAI, som kan delta i m\u00e4nniskoliknande samtal och besvara ett stort antal fr\u00e5gor.<\/p>\n<h2>Vad du ska bygga<\/h2>\n<p>I den h\u00e4r handledningen s\u00e5 kommer du att l\u00e4ra dig hur du bygger en ChatGPT-klonapplikation med hj\u00e4lp av <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a> och OpenAI API. Om du exempelvis vill prova p\u00e5 ett roligt och engagerande projekt under helgen s\u00e5 \u00e4r detta ett utm\u00e4rkt tillf\u00e4lle att djupdyka i React och OpenAI.<\/p>\n<p>Du kommer \u00e4ven att l\u00e4ra dig hur du distribuerar direkt fr\u00e5n ditt GitHub-arkiv till Kinsta\u2019s plattform f\u00f6r <a href=\"https:\/\/sevalla.com\/application-hosting\/\">applikationshosting.<\/a>\u00a0Den tillhandah\u00e5ller en kostnadsfri\u00a0<em>.kinsta.app-dom\u00e4n.<\/em>\u00a0Som ett resultat av denna s\u00e5 kan ditt projekt snabbt tas i drift. Och med Kinsta\u2019s kostnadsfria provperiod och <a href=\"https:\/\/sevalla.com\/pricing\/\">Hobbyniv\u00e5<\/a>\u00a0s\u00e5 kan du dessutom komma ig\u00e5ng enkelt utan kostnad.<\/p>\n<p>H\u00e4r \u00e4r en live-demo av <a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">ChatGPT-klonapplikationen<\/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-klonapplikationen\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">ChatGPT-klonapplikationen<\/figcaption><\/figure>\n<p>Om du vill titta n\u00e4rmare p\u00e5 det h\u00e4r projektet s\u00e5 kan du f\u00e5 tillg\u00e5ng till dess <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub-arkiv<\/a>.<\/p>\n<p>Alternativt, med hj\u00e4lp av den h\u00e4r <a href=\"https:\/\/github.com\/olawanlejoel\/chatgpt-clone-starter\">startprojektmallen<\/a>, s\u00e5 kan du v\u00e4lja <strong>Anv\u00e4nd den h\u00e4r mallen<\/strong> &gt; <strong>Skapa ett nytt arkiv<\/strong> \u2013 detta kopierar startkoden till ett nytt arkiv. Detta startprojekt inkluderar grundl\u00e4ggande element som stilar, Font Awesome CDN-l\u00e4nk, <a href=\"https:\/\/www.npmjs.com\/package\/openai\">OpenAi-paket<\/a> och grundl\u00e4ggande struktur f\u00f6r att hj\u00e4lpa dig att komma ig\u00e5ng.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Den kostnadsfria krediten f\u00f6r att anv\u00e4nda OpenAI&#8217;s API \u00e4r begr\u00e4nsad till $18. Om du testar den h\u00e4r demo-appen och den slutar att fungera s\u00e5 betyder detta att krediten kan ha tagit slut. F\u00f6r att forts\u00e4tta att anv\u00e4nda OpenAI API s\u00e5 m\u00e5ste du uppgradera din plan.<\/p>\n<\/aside>\n\n<h3>Krav\/f\u00f6ruts\u00e4ttningar<\/h3>\n<p>Den h\u00e4r handledningen \u00e4r utformad f\u00f6r att du ska kunna f\u00f6lja med. D\u00e4rf\u00f6r s\u00e5 rekommenderas det att du har f\u00f6ljande f\u00f6r att f\u00e5 en enkel kodning:<\/p>\n<ul>\n<li>Grundl\u00e4ggande f\u00f6rst\u00e5else f\u00f6r <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/se\/blog\/css-basta-metoderna\/\">CSS<\/a> och <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a><\/li>\n<li>Viss f\u00f6rtrogenhet med <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a><\/li>\n<li>Node.js och npm (<a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">Node Package Manager<\/a>) eller yarn installerade p\u00e5 din dator<\/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>Vad \u00e4r OpenAI API?<\/h2>\n<p><a href=\"https:\/\/platform.openai.com\/overview\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI API<\/a> \u00e4r en molnbaserad plattform som ger utvecklare tillg\u00e5ng till OpenAI\u2019s spr\u00e5kmodeller, exempelvis GPT-3, via ett API. Som ett resultat av detta s\u00e5 kan utvecklare l\u00e4gga till funktioner f\u00f6r behandling av naturliga spr\u00e5k. Det kan exempelvis handla om textkomplettering, sentimentsanalys, sammanfattning och \u00f6vers\u00e4ttning i till\u00e4mpningarna utan att det kr\u00e4vs utveckling och tr\u00e4ning p\u00e5 sina modeller.<\/p>\n<p>F\u00f6r att anv\u00e4nda OpenAI API s\u00e5 m\u00e5ste utvecklare skapa ett konto p\u00e5 <a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI\u2019s webbplats<\/a> och f\u00e5 en API-nyckel. API-nyckeln anv\u00e4nds sedan f\u00f6r att autentisera API-beg\u00e4randen och sp\u00e5ra anv\u00e4ndningen.<\/p>\n<p>N\u00e4r API-nyckeln har erh\u00e5llits s\u00e5 kan utvecklare anv\u00e4nda API: et f\u00f6r att skicka text till spr\u00e5kmodellen och f\u00e5 svar.<\/p>\n\n<h2>Varf\u00f6r React?<\/h2>\n<p>React \u00e4r ett <a href=\"https:\/\/kinsta.com\/se\/blog\/javascript-biblioteken\/\">popul\u00e4rt JavaScript-bibliotek<\/a> f\u00f6r att bygga anv\u00e4ndargr\u00e4nssnitt. Enligt <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#section-most-popular-technologies-web-frameworks-and-technologies\" target=\"_blank\" rel=\"noopener noreferrer\">2022 \u00e5rs utvecklarunders\u00f6kning fr\u00e5n Stack Overflow<\/a>\u00a0s\u00e5\u00e4r detta den n\u00e4st vanligaste webbtekniken, med 42,62 % av marknadsandelen.<\/p>\n<p>React g\u00f6r det exempelvis m\u00f6jligt f\u00f6r utvecklare att skapa deklarativa komponenter som representerar olika delar av anv\u00e4ndargr\u00e4nssnittet. Dessa komponenter definieras med hj\u00e4lp av en syntax som kallas JSX. Detta \u00e4r en kombination av JavaScript och HTML.<\/p>\n<p>Tack vare dess stora <a href=\"https:\/\/kinsta.com\/se\/blog\/react-komponent-bibliotek\/\">ekosystem av komponentbibliotek och kit<\/a>\u00a0s\u00e5 kan utvecklare enkelt arbeta med och integrera API: er som OpenAI API. Som ett resultat s\u00e5 kan de bygga komplexa chattgr\u00e4nssnitt och det \u00e4r det som g\u00f6r det till ett utm\u00e4rkt val f\u00f6r att bygga en ChatGPT-klonapplikation.<\/p>\n<h3>S\u00e5 h\u00e4r st\u00e4ller du in din React-utvecklingsmilj\u00f6<\/h3>\n<p>Det b\u00e4sta s\u00e4ttet att <a href=\"https:\/\/kinsta.com\/blog\/install-react\/\">installera React<\/a> eller skapa ett React-projekt \u00e4r att installera det med <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">create-react-appen<\/a>. En f\u00f6ruts\u00e4ttning \u00e4r att <a href=\"https:\/\/kinsta.com\/se\/blog\/hur-du-installerar-node-js\/\">Node.js \u00e4r installerat p\u00e5 din maskin<\/a>. F\u00f6r att bekr\u00e4fta att du har Node installerat s\u00e5 k\u00f6r du d\u00e4rf\u00f6r f\u00f6ljande kommando i din terminal.<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Om detta visar en version s\u00e5 finns den. F\u00f6r att kunna anv\u00e4nda <a href=\"https:\/\/github.com\/npm\/npm\/releases\/tag\/v5.2.0\" target=\"_blank\" rel=\"noopener noreferrer\">npx<\/a>\u00a0s\u00e5 m\u00e5ste du se till att din Node-version \u00e4r minst v14.0.0.0 och att din NPM-version \u00e4r minst v5.6. Annars s\u00e5 kan du beh\u00f6va uppdatera den genom att k\u00f6ra <code>npm update -g<\/code>. N\u00e4r du har listat ut npm s\u00e5 kan du nu konfigurera ett React-projekt genom att k\u00f6ra kommandot nedan:<\/p>\n<pre><code class=\"language-bash\">npx create-react-app chatgpt-clone<\/code><\/pre>\n<p><strong>Observera:<\/strong> &#8221;chatgpt-clone&#8221; \u00e4r det applikationsnamn som vi skapar, men du kan \u00e4ndra detta till ett valfritt namn.<\/p>\n<p>Installationsprocessen kan sedan ta n\u00e5gra minuter. N\u00e4r den har lyckats s\u00e5 kan du d\u00e4refter navigera till katalogen och installera Node.js OpenAI-paketet. Det ger sedan en bekv\u00e4m tillg\u00e5ng till OpenAI API: et fr\u00e5n Node.js med hj\u00e4lp av kommandot nedan:<\/p>\n<h3>Se din applikation live<\/h3>\n<pre><code class=\"language-bash\">npm install openai<\/code><\/pre>\n<p>Du kan nu k\u00f6ra <code>npm start<\/code> f\u00f6r att se din applikation live p\u00e5 <strong>localhost:3000<\/strong>.<\/p>\n<p>N\u00e4r ett React-projekt skapas med kommandot <code>create-react-app<\/code> skapas automatiskt en mappstruktur. Den viktigaste mappen som ber\u00f6r dig \u00e4r mappen <code>src<\/code>, d\u00e4r utvecklingen sker. Den h\u00e4r mappen inkluderar m\u00e5nga filer som standard, men du b\u00f6r endast bry dig om filerna <strong>App.js<\/strong>, <strong>index.js<\/strong> och <strong>index.css<\/strong>.<\/p>\n<ol>\n<li><strong>App.js<\/strong>: Denna fil \u00e4r huvudkomponenten i en React-applikation. Den representerar vanligtvis den komponent p\u00e5 h\u00f6gsta niv\u00e5 som renderar alla andra komponenter i applikationen.<\/li>\n<li><strong>index.js<\/strong>: Den h\u00e4r filen \u00e4r startpunkten f\u00f6r din React-applikation. Det \u00e4r den f\u00f6rsta filen som laddas n\u00e4r appen \u00f6ppnas och ansvarar f\u00f6r att <strong>App.js-komponenten<\/strong> visas i webbl\u00e4saren.<\/li>\n<li><strong>index.css<\/strong>: Den h\u00e4r filen \u00e4r ansvarig f\u00f6r att definiera den \u00f6vergripande stilen och layouten f\u00f6r din React-applikation.<\/li>\n<\/ol>\n<h2>Hur man bygger en ChatGPT-klon med React och OpenAI API<\/h2>\n<p>ChatGPT-klonapplikationen kommer att best\u00e5 av tv\u00e5 komponenter f\u00f6r att g\u00f6ra applikationen l\u00e4ttare att f\u00f6rst\u00e5 och underh\u00e5lla. Dessa tv\u00e5 komponenter \u00e4r:<\/p>\n<ol>\n<li><strong>Formul\u00e4rsektionen<\/strong>: Den h\u00e4r komponenten inneh\u00e5ller ett textf\u00e4lt och en knapp f\u00f6r att anv\u00e4ndarna ska kunna interagera med chattroboten.<\/li>\n<li><strong>Svarsdel<\/strong>: Fr\u00e5gorna och motsvarande svar lagras i en array och visas i denna sektion. Du kommer att g\u00e5 igenom arrayen kronologiskt och visa det senaste f\u00f6rst.<\/li>\n<\/ol>\n<h3>Inst\u00e4llning av ChatGPT-klonapplikationen<\/h3>\n<p>I den h\u00e4r handledningen s\u00e5 b\u00f6rjar vi med att f\u00f6rst bygga applikationsgr\u00e4nssnittet. Som ett resultat s\u00e5 kan du sedan implementera funktionalitet s\u00e5 att din applikation interagerar med OpenAI API. B\u00f6rja med att skapa de tv\u00e5 komponenter som du kommer att anv\u00e4nda i den h\u00e4r handledningen. F\u00f6r att f\u00e5 en ordentlig organisering s\u00e5 skapar du sedan en <strong>komponentmapp<\/strong> i <strong>src-mappen<\/strong> d\u00e4r alla komponenter kommer att lagras.<\/p>\n<h4>Komponent f\u00f6r formul\u00e4rsektionen<\/h4>\n<p>Det h\u00e4r \u00e4r ett enkelt formul\u00e4r som best\u00e5r av en <code>textarea<\/code> och en s\u00e4nd-<code>button<\/code>.<\/p>\n<pre><code class=\"language-jsx\">\n\/\/ 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;\n<\/code><\/pre>\n<p>S\u00e5 h\u00e4r f\u00f6rv\u00e4ntas formul\u00e4ret se ut n\u00e4r du importerar det till din <strong>App.js<\/strong>-fil:<\/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=\"Komponent f\u00f6r formul\u00e4rsektionen\" width=\"1600\" height=\"360\"><figcaption class=\"wp-caption-text\">Komponent f\u00f6r formul\u00e4rsektionen<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Fokus i den h\u00e4r handledningen ligger mer p\u00e5 att bygga och distribuera din applikation. S\u00e5 du kan d\u00e4rf\u00f6r kopiera stilarna i filen <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">src\/index.css<\/a> till ditt eget projekt f\u00f6r att f\u00e5 samma resultat\/till\u00e4mpning.<\/p>\n<\/aside>\n\n<h4>Komponenten f\u00f6r svarsavsnittet<\/h4>\n<p>I det h\u00e4r avsnittet s\u00e5 kommer alla fr\u00e5gor och svar att visas. S\u00e5 h\u00e4r kommer avsnittet att se ut n\u00e4r du \u00e4ven importerar det i din <strong>App.js<\/strong>-fil.<\/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=\"Komponent f\u00f6r svarssektionen\" width=\"1600\" height=\"347\"><figcaption class=\"wp-caption-text\">Komponent f\u00f6r svarssektionen<\/figcaption><\/figure>\n<p>Du kommer att h\u00e4mta fr\u00e5gorna och svaren fr\u00e5n en matris och en slinga f\u00f6r att g\u00f6ra din kod l\u00e4ttare att l\u00e4sa och underh\u00e5lla.<\/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>Hemsidan<\/h4>\n<p>Nu har du skapat b\u00e5da komponenterna. Inget kommer dock att visas n\u00e4r du k\u00f6r applikationen eftersom du m\u00e5ste importera dem i din <strong>App.js<\/strong>-fil. F\u00f6r den h\u00e4r applikationen s\u00e5 kommer du inte att implementera n\u00e5gon form av routing. Som ett resultat s\u00e5 kommer\u00a0<strong>App.js<\/strong>-filen att fungera som applikationens hemkomponent\/sida.<\/p>\n<p>Du kan l\u00e4gga till lite inneh\u00e5ll, som titeln och beskrivningen av din applikation, innan du importerar komponenterna.<\/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>I koden ovan s\u00e5 importeras de tv\u00e5 komponenterna och l\u00e4ggs till i applikationen. N\u00e4r du k\u00f6r applikationen s\u00e5 kommer den att se ut s\u00e5 h\u00e4r:<\/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=\"Komplett ChatGPT-klonapplikation\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Komplett ChatGPT-klonapplikation<\/figcaption><\/figure>\n<h3>L\u00e4gga till funktionalitet och integrera OpenAI API<\/h3>\n<p>Du har nu anv\u00e4ndargr\u00e4nssnittet f\u00f6r din applikation. N\u00e4sta steg \u00e4r att g\u00f6ra applikationen funktionell s\u00e5 att den kan interagera med OpenAI API och f\u00e5 svar. F\u00f6rst s\u00e5 m\u00e5ste du h\u00e4mta v\u00e4rdet fr\u00e5n ditt formul\u00e4r n\u00e4r det skickas eftersom det kommer att anv\u00e4ndas f\u00f6r att fr\u00e5ga OpenAI API.<\/p>\n<h4>H\u00e4mta data fr\u00e5n formul\u00e4ret<\/h4>\n<p>I React s\u00e5 \u00e4r det b\u00e4sta s\u00e4ttet att lagra och uppdatera data att anv\u00e4nda tillst\u00e5nd. I funktionella komponenter anv\u00e4nds kroken <code>useState()<\/code> f\u00f6r att arbeta med tillst\u00e5nd. Du kan exempelvisd skapa ett tillst\u00e5nd, tilldela v\u00e4rdet fr\u00e5n ditt formul\u00e4r till tillst\u00e5ndet och uppdatera detta n\u00e4r v\u00e4rdet \u00e4ndras. Vi b\u00f6rjar med att importera <code>useState()<\/code>-kroken till komponenten <strong>FormSection.jsx<\/strong> och skapar sedan ett tillst\u00e5nd f\u00f6r att lagra och uppdatera <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>D\u00e4refter s\u00e5 kan du tilldela v\u00e4rdet av f\u00e4ltet <code>textarea<\/code> till tillst\u00e5ndet och skapa en h\u00e4ndelse <code>onChange()<\/code> f\u00f6r att uppdatera tillst\u00e5ndet n\u00e4r inmatningsv\u00e4rdet \u00e4ndras:<\/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;\n<\/code><\/pre>\n<h3>Skapa en onClick-h\u00e4ndelse<\/h3>\n<p>Slutligen s\u00e5 kan du skapa en <code>onClick()<\/code>-h\u00e4ndelse f\u00f6r att ladda en funktion n\u00e4r du klickar p\u00e5 knappen S\u00e4nd. Metoden skapas i filen <strong>App.js<\/strong> och skickas som en prop till komponenten <strong>FormSection.jsx<\/strong> med v\u00e4rdena <code>newQuestion<\/code> och <code>setNewQuestion<\/code> som argument.<\/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 har nu skapat ett tillst\u00e5nd f\u00f6r att lagra och uppdatera formul\u00e4rets v\u00e4rde, lagt till en metod som skickas som prop fr\u00e5n <strong>App.js<\/strong>-filen och hanterat klickh\u00e4ndelsen. S\u00e5 h\u00e4r kommer sedan den slutliga koden att se ut:<\/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>N\u00e4sta steg blir att skapa en metod i <strong>App.js<\/strong>-filen f\u00f6r att hantera hela processen f\u00f6r att interagera med OpenAI API.<\/p>\n<h4>Interaktion med OpenAI API<\/h4>\n<p>F\u00f6r att interagera med OpenAI API och f\u00e5 API-nycklar i en React-applikation s\u00e5 m\u00e5ste du skapa ett OpenAI API-konto. Du kan registrera dig f\u00f6r ett konto p\u00e5 OpenAI\u2019s webbplats med hj\u00e4lp av ditt Google-konto eller din e-post. F\u00f6r att generera en API-nyckel s\u00e5 klickar du p\u00e5 <strong>Personligt<\/strong>\u00a0i det \u00f6vre h\u00f6gra h\u00f6rnet p\u00e5 webbplatsen; n\u00e5gra alternativ visas; klicka p\u00e5 <strong>Visa API-nycklar<\/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=\"F\u00e5 tillg\u00e5ng till OpenAI API-nycklar.\" width=\"1600\" height=\"977\"><figcaption class=\"wp-caption-text\">F\u00e5 tillg\u00e5ng till OpenAI API-nycklar.<\/figcaption><\/figure>\n<p>Klicka p\u00e5 knappen <strong>Skapa ny hemlig nyckel<\/strong>, kopiera nyckeln n\u00e5gonstans s\u00e5 att du kan anv\u00e4nda den i den h\u00e4r applikationen f\u00f6r att interagera med OpenAI. Du kan nu forts\u00e4tta att initiera OpenAI genom att importera paketet openai (som du redan har installerat) tillsammans med konfigurationsmetoden. Skapa sedan en konfiguration med din genererade nyckel och anv\u00e4nd den f\u00f6r att initiera OpenAI.<\/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>I koden ovan s\u00e5 lagras OpenAI\u2019s API-nyckel som en <a href=\"https:\/\/kinsta.com\/blog\/what-is-an-environment-variable\/\">milj\u00f6variabel<\/a> i <strong>.env<\/strong>-filen. Du kan skapa en <strong>.env<\/strong>-fil i din applikations rotmapp och lagra nyckeln i variabeln <code>REACT_APP_OPENAI_API_KEY<\/code>.<\/p>\n<pre><code>\/\/ .env\nREACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx\u2026<\/code><\/pre>\n<p>Nu kan du skapa metoden <code>generateResponse<\/code> i filen <strong>App.js<\/strong> och skicka in de tv\u00e5 parametrar som f\u00f6rv\u00e4ntas fr\u00e5n det formul\u00e4r som du redan har skapat f\u00f6r att hantera beg\u00e4randet och f\u00e5 svar fr\u00e5n API: et.<\/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<h3>Skicka en beg\u00e4ran till OpenAI API<\/h3>\n<p>Det \u00e4r nu m\u00f6jligt att skicka en beg\u00e4ran till OpenAI API. OpenAI API kan utf\u00f6ra m\u00e5nga operationer, exempelvis fr\u00e5gor och svar (Q&#038;A), grammatikkorrigering, \u00f6vers\u00e4ttning och mycket mer. F\u00f6r var och en av dessa operationer s\u00e5 \u00e4r alternativen olika. Motorv\u00e4rdet f\u00f6r Q&#038;A \u00e4r exempelvis\u00a0<code>text-davinci-00<\/code>, medan motorv\u00e4rdet f\u00f6r SQL translate \u00e4r <code>code-davinci-002<\/code>. Du f\u00e5r g\u00e4rna kolla i <a href=\"https:\/\/platform.openai.com\/examples\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI:s exempeldokumentation<\/a> f\u00f6r de olika exemplen och deras alternativ.<\/p>\n<p>I den h\u00e4r handledningen s\u00e5 arbetar vi endast med <a href=\"https:\/\/platform.openai.com\/examples\/default-qa\" target=\"_blank\" rel=\"noopener noreferrer\">Q&#038;A<\/a>, s\u00e5 h\u00e4r ser alternativet ut:<\/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>Observera:<\/strong> Jag har \u00e4ndrat v\u00e4rdet f\u00f6r prompten.<\/p>\n<p>Prompten \u00e4r den fr\u00e5ga som skickas fr\u00e5n formul\u00e4ret. Som ett resultat s\u00e5 m\u00e5ste du f\u00e5 den fr\u00e5n den formul\u00e4rinmatning som du skickar in i <code>generateResponse<\/code>-metoden som en parameter. F\u00f6r att g\u00f6ra detta s\u00e5 definierar du alternativen och anv\u00e4nder sedan <a href=\"https:\/\/kinsta.com\/blog\/spread-operator-javascript\/\">spridningsoperatorn<\/a> f\u00f6r att skapa ett komplett alternativ som inneh\u00e5ller prompten:<\/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>Nu \u00e5terst\u00e5r bara att skicka en beg\u00e4ran via metoden <code>createCompletion<\/code> till OpenAI f\u00f6r att f\u00e5 ett svar.<\/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<h3>Testa din applikation<\/h3>\n<p>I koden ovan s\u00e5 kommer svarets text att visas i konsolen. Testa g\u00e4rna din applikation genom att st\u00e4lla vilken fr\u00e5ga som helst. Det sista steget skulle sedan vara att skapa ett tillst\u00e5nd som kommer att h\u00e5lla matrisen av fr\u00e5gor och svar och sedan skicka denna matris som en prop till komponenten <strong>AnswerSection<\/strong>. S\u00e5 h\u00e4r kommer den slutliga koden f\u00f6r <strong>App.js<\/strong> att se ut:<\/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<h3>Redigera komponenten AnswerSection<\/h3>\n<p>Du kan nu redigera komponenten <strong>AnswerSection<\/strong> s\u00e5 att den tar emot v\u00e4rdet f\u00f6r prop fr\u00e5n <strong>App.js<\/strong> och anv\u00e4nda JavaScript-metoden <code>Map()<\/code> f\u00f6r att titta igenom matrisen <code>storedValues<\/code>:<\/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>N\u00e4r du k\u00f6r applikationen och testar den genom att st\u00e4lla fr\u00e5gor s\u00e5 visas svaret nedan. Men du kommer exempelvis att m\u00e4rka att kopieringsknappen inte fungerar. Du m\u00e5ste d\u00e4rf\u00f6r l\u00e4gga till en <code>onClick()<\/code>-h\u00e4ndelse till knappen s\u00e5 att den utl\u00f6ser en metod f\u00f6r att hantera funktionaliteten. Nyttja metoden <code>navigator.clipboard.writeText()<\/code> f\u00f6r att hantera funktionaliteten. S\u00e5 h\u00e4r kommer komponenten <strong>AnswerSection<\/strong> nu att se ut:<\/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>N\u00e4r du k\u00f6r applikationen s\u00e5 kommer din ChatGPT-klon att fungera perfekt. Du kan nu distribuera din applikation f\u00f6r att f\u00e5 tillg\u00e5ng till den online och dela den med v\u00e4nner.<\/p>\n<h2>S\u00e5 h\u00e4r distribuerar du din React-applikation till Kinsta<\/h2>\n<p>Det r\u00e4cker dock inte att bygga den h\u00e4r applikationen och l\u00e4mna den p\u00e5 dina lokala datorer. Du b\u00f6r dela den p\u00e5 n\u00e4tet s\u00e5 att andra kan f\u00e5 tillg\u00e5ng till den. L\u00e5t oss se hur du g\u00f6r detta med hj\u00e4lp av exempelvis\u00a0<a href=\"https:\/\/kinsta.com\/blog\/what-is-github\/\">GitHub<\/a> och <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinsta<\/a>.<\/p>\n<h3>Skicka din kod till GitHub<\/h3>\n<p>F\u00f6r att <a href=\"https:\/\/kinsta.com\/blog\/how-to-push-code-to-github\/\">skicka din kod<\/a> till GitHub s\u00e5 kan du anv\u00e4nda <a href=\"https:\/\/kinsta.com\/blog\/git-for-web-development\/\">Git-kommandon<\/a>. Detta \u00e4r ett p\u00e5litligt och effektivt s\u00e4tt att hantera kod\u00e4ndringar, samarbeta i projekt och uppr\u00e4tth\u00e5lla versionshistorik.<\/p>\n<p>Det f\u00f6rsta steget f\u00f6r att pusha dina koder \u00e4r att skapa ett nytt arkiv genom att logga in p\u00e5 ditt GitHub-konto, klicka sedan p\u00e5 <strong>+<\/strong>-knappen i det \u00f6vre h\u00f6gra h\u00f6rnet av sk\u00e4rmen och v\u00e4lja <strong>Nytt arkiv<\/strong> i rullgardinsmenyn.<\/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=\"Skapa ett nytt arkiv p\u00e5 GitHub\" width=\"1600\" height=\"770\"><figcaption class=\"wp-caption-text\">Skapa ett nytt arkiv p\u00e5 GitHub<\/figcaption><\/figure>\n<p>Ge ditt arkiv ett namn, l\u00e4gg till en beskrivning (valfritt) och v\u00e4lj om du vill att det ska vara offentligt eller privat. Klicka p\u00e5<strong> Skapa arkiv<\/strong> f\u00f6r att skapa det.<\/p>\n<p>N\u00e4r ditt arkiv har skapats s\u00e5 ska du sedan se till att du f\u00e5r tag p\u00e5 webbadressen till arkivet fr\u00e5n huvudsidan f\u00f6r ditt arkiv, som du beh\u00f6ver f\u00f6r att skicka din kod till GitHub.<\/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=\"F\u00e5 tillg\u00e5ng till webbadressen f\u00f6r ditt arkiv\" width=\"1600\" height=\"738\"><figcaption class=\"wp-caption-text\">F\u00e5 tillg\u00e5ng till webbadressen f\u00f6r ditt arkiv<\/figcaption><\/figure>\n<p>\u00d6ppna terminalen eller kommandotolken och navigera till katalogen som inneh\u00e5ller ditt projekt. K\u00f6r f\u00f6ljande kommandon ett efter ett f\u00f6r att skicka din kod till ditt GitHub-arkiv:<\/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> initialiserar ett lokalt Git-arkiv, <code>git add .<\/code> l\u00e4gger till alla filer i den aktuella katalogen och dess underkataloger till det nya Git-arkivet. <code>git commit -m \"my first commit\"<\/code> \u00f6verf\u00f6r sedan \u00e4ndringarna till arkivet med ett kort meddelande. <code>git remote add origin [repository URL]<\/code> anger webbadressen f\u00f6r arkivet som fj\u00e4rrarkivet och <code>git push -u origin master<\/code> skjuter koden till fj\u00e4rrarkivet (ursprunget) i master-gren.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Du kan ers\u00e4tta &#8221;mitt f\u00f6rsta utf\u00f6rande&#8221; med ett eget kort meddelande som beskriver de \u00e4ndringar som du har gjort och &#8221;[repository URL]&#8221; med ditt GitHub-arkivs webbadress. N\u00e4r din kod har lagts ut p\u00e5 GitHub s\u00e5 kan du sedan distribuera ditt arkiv till Kinsta.<\/p>\n<\/aside>\n\n<h3>Distribuera din ChatGPT Clone React-applikation till Kinsta<\/h3>\n<p>F\u00f6r att distribuera ditt arkiv till Kinsta s\u00e5 f\u00f6ljer du de h\u00e4r stegen:<\/p>\n<ol>\n<li>Logga in p\u00e5 eller skapa ditt Kinsta-konto p\u00e5 instrumentpanelen <a href=\"https:\/\/my.kinsta.com\/?lang=sv\">MyKinsta<\/a>.<\/li>\n<li>Klicka p\u00e5 <strong>Applikationer<\/strong> i det v\u00e4nstra sidof\u00e4ltet och klicka sedan p\u00e5 <strong>L\u00e4gg till tj\u00e4nst<\/strong>.<\/li>\n<li>V\u00e4lj <strong>Applikation<\/strong> i rullgardinsmenyn f\u00f6r att distribuera en React-applikation till Kinsta.<\/li>\n<li>V\u00e4lj det arkiv som du vill distribuera fr\u00e5n den modala dialogrutan som visas. Om du har flera grenar s\u00e5 kan du v\u00e4lja den som du vill distribuera och tilldela applikationen ett namn. V\u00e4lj en <a href=\"https:\/\/kinsta.com\/docs\/service-information\/data-center-locations\/#application-and-database-hosting-data-centers\">datacenterplats<\/a> bland de tillg\u00e4ngliga 24. Som ett resultat s\u00e5 kommer Kinsta automatiskt att uppt\u00e4cka ett startkommando.<\/li>\n<li>Slutligen s\u00e5 \u00e4r det inte s\u00e4kert att skicka ut API-nycklar till offentliga hostar som GitHub, den lades till som en milj\u00f6variabel lokalt. N\u00e4r du \u00e4r host s\u00e5 kan du \u00e4ven l\u00e4gga till den som en <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">milj\u00f6variabel<\/a> med samma variabelnamn och nyckeln som v\u00e4rde.<\/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=\"Distribuera ChatGPT-klon till Kinsta.\" width=\"1440\" height=\"788\"><figcaption class=\"wp-caption-text\">Distribuera ChatGPT-klon till Kinsta.<\/figcaption><\/figure>\n<p>Din applikation b\u00f6rjar distribueras och inom n\u00e5gra minuter s\u00e5 kommer en l\u00e4nk att tillhandah\u00e5llas f\u00f6r att komma \u00e5t den distribuerade versionen av din applikation. I det h\u00e4r fallet s\u00e5 \u00e4r detta\u00a0<strong>https:\/\/chatgpt-clone-g9q10.kinsta.app\/ <\/strong><\/p>\n<p><strong>OBS:<\/strong> Du kan aktivera automatisk distribuering, s\u00e5 att Kinsta distribuerar din applikation p\u00e5 nytt n\u00e4r du \u00e4ndrar din kodbas och skickar den till GitHub.<\/p>\n\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=vmNem6wxfSQ\"><\/kinsta-video>\n<h2>Sammanfattning<\/h2>\n<p>OpenAI API kan anv\u00e4ndas f\u00f6r att bygga ett stort antal potentiella till\u00e4mpningar. Det kan exempelvis handla om allt ifr\u00e5n kundsupport och personliga hj\u00e4lpredor till spr\u00e5k\u00f6vers\u00e4ttning och inneh\u00e5llsskapande.<\/p>\n<p>I den h\u00e4r handledningen s\u00e5 har du l\u00e4rt dig hur man bygger en ChatGPT-klonapplikation med React och OpenAI. Du kan sedan integrera den h\u00e4r applikationen\/funktionen i andra applikationer f\u00f6r att ge anv\u00e4ndarna m\u00e4nniskoliknande samtalsupplevelser.<\/p>\n<p>Det finns mer om vad som kan g\u00f6ras med OpenAI API och hur man kan f\u00f6rb\u00e4ttra den h\u00e4r klonapplikationen. Du kan exempelvis implementera lokal lagring s\u00e5 att tidigare fr\u00e5gor och svar inte f\u00f6rsvinner \u00e4ven n\u00e4r du uppdaterar din webbl\u00e4sare.<\/p>\n<p>Med Kinsta\u2019s kostnadsfria provperiod och <a href=\"https:\/\/sevalla.com\/pricing\/\">Hobbyniv\u00e5<\/a>\u00a0s\u00e5 kan du enkelt komma ig\u00e5ng utan kostnad med v\u00e5rt applikationshosting. S\u00e5 varf\u00f6r inte ge det ett f\u00f6rs\u00f6k och se vad du kan skapa?<\/p>\n<p>Dela med dig av ditt projekt och dina erfarenheter i kommentaren nedan.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Anv\u00e4ndningen av chatbots och virtuella assistenter forts\u00e4tter att \u00f6ka. D\u00e4rf\u00f6r s\u00e5 s\u00f6ker m\u00e5nga f\u00f6retag och utvecklare efter s\u00e4tt att skapa sina egna AI-drivna chatbots. ChatGPT \u00e4r &#8230;<\/p>\n","protected":false},"author":287,"featured_media":51321,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[757,808],"class_list":["post-51320","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>Bygg \/ distribuera en ChatGPT-klonapp med React och OpenAI API - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"L\u00e4r dig hur du bygger en ChatGPT-klonapplikation med React och OpenAI API och distribuera den sedan i denna interantiva handledning.\" \/>\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\/se\/blog\/chatgpt-klon\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hur du bygger och distribuerar en ChatGPT-klonapplikation med React och OpenAI API\" \/>\n<meta property=\"og:description\" content=\"L\u00e4r dig hur du bygger en ChatGPT-klonapplikation med React och OpenAI API och distribuera den sedan i denna interantiva handledning.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstasweden\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-16T07:22:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-21T09:43:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/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=\"L\u00e4r dig hur du bygger en ChatGPT-klonapplikation med React och OpenAI API och distribuera den sedan i denna interantiva handledning.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/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_se\" \/>\n<meta name=\"twitter:label1\" content=\"Skriven av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Ber\u00e4knad l\u00e4stid\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 minuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Hur du bygger och distribuerar en ChatGPT-klonapplikation med React och OpenAI API\",\"datePublished\":\"2023-03-16T07:22:38+00:00\",\"dateModified\":\"2023-09-21T09:43:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/\"},\"wordCount\":3278,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/\",\"url\":\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/\",\"name\":\"Bygg \/ distribuera en ChatGPT-klonapp med React och OpenAI API - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"datePublished\":\"2023-03-16T07:22:38+00:00\",\"dateModified\":\"2023-09-21T09:43:11+00:00\",\"description\":\"L\u00e4r dig hur du bygger en ChatGPT-klonapplikation med React och OpenAI API och distribuera den sedan i denna interantiva handledning.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/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\/se\/blog\/chatgpt-klon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/se\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/se\/topics\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Hur du bygger och distribuerar en ChatGPT-klonapplikation med React och OpenAI API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/se\/#website\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/se\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/se\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstasweden\/\",\"https:\/\/x.com\/kinsta_se\",\"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\/se\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/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\/se\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bygg \/ distribuera en ChatGPT-klonapp med React och OpenAI API - Kinsta\u00ae","description":"L\u00e4r dig hur du bygger en ChatGPT-klonapplikation med React och OpenAI API och distribuera den sedan i denna interantiva handledning.","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\/se\/blog\/chatgpt-klon\/","og_locale":"sv_SE","og_type":"article","og_title":"Hur du bygger och distribuerar en ChatGPT-klonapplikation med React och OpenAI API","og_description":"L\u00e4r dig hur du bygger en ChatGPT-klonapplikation med React och OpenAI API och distribuera den sedan i denna interantiva handledning.","og_url":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstasweden\/","article_published_time":"2023-03-16T07:22:38+00:00","article_modified_time":"2023-09-21T09:43:11+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/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":"L\u00e4r dig hur du bygger en ChatGPT-klonapplikation med React och OpenAI API och distribuera den sedan i denna interantiva handledning.","twitter_image":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_se","twitter_misc":{"Skriven av":"Joel Olawanle","Ber\u00e4knad l\u00e4stid":"22 minuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Hur du bygger och distribuerar en ChatGPT-klonapplikation med React och OpenAI API","datePublished":"2023-03-16T07:22:38+00:00","dateModified":"2023-09-21T09:43:11+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/"},"wordCount":3278,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","inLanguage":"sv-SE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/","url":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/","name":"Bygg \/ distribuera en ChatGPT-klonapp med React och OpenAI API - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","datePublished":"2023-03-16T07:22:38+00:00","dateModified":"2023-09-21T09:43:11+00:00","description":"L\u00e4r dig hur du bygger en ChatGPT-klonapplikation med React och OpenAI API och distribuera den sedan i denna interantiva handledning.","breadcrumb":{"@id":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/blog\/chatgpt-klon\/#primaryimage","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/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\/se\/blog\/chatgpt-klon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/se\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/se\/topics\/api\/"},{"@type":"ListItem","position":3,"name":"Hur du bygger och distribuerar en ChatGPT-klonapplikation med React och OpenAI API"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/se\/#website","url":"https:\/\/kinsta.com\/se\/","name":"Kinsta\u00ae","description":"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar","publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/se\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/se\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/se\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstasweden\/","https:\/\/x.com\/kinsta_se","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\/se\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/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\/se\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/51320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/comments?post=51320"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/51320\/revisions"}],"predecessor-version":[{"id":54966,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/51320\/revisions\/54966"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/51320\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/51320\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/51320\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/51320\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/51320\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/51320\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/51320\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/51320\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/51320\/translations\/dk"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/51320\/translations\/pt"},{"href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/51320\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media\/51321"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media?parent=51320"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/tags?post=51320"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/topic?post=51320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}