{"id":66969,"date":"2023-03-16T08:16:46","date_gmt":"2023-03-16T07:16:46","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=66969&#038;preview=true&#038;preview_id=66969"},"modified":"2023-08-22T21:35:16","modified_gmt":"2023-08-22T20:35:16","slug":"clone-di-chatgpt","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/","title":{"rendered":"Come Costruire e Distribuire un&#8217;App Clone di ChatGPT con React e API OpenAI"},"content":{"rendered":"<p>L&#8217;utilizzo dei chatbot e degli assistenti virtuali continua ad aumentare. Per questo molte aziende e sviluppatori stanno cercando di creare i propri chatbot dotati di intelligenza artificiale. ChatGPT \u00e8 uno di questi chatbot, creato da OpenAI, in grado di avviare conversazioni simili a quelle umane e di rispondere a un&#8217;ampia gamma di domande.<\/p>\n<h2>Cosa Costruiremo<\/h2>\n<p>In questo tutorial impareremo a creare un clone di ChatGPT utilizzando <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a> e le API di OpenAI. Se volete cimentarvi in un progetto divertente e stimolante per passare il weekend, questa potrebbe essere un&#8217;ottima occasione per scoprire React e OpenAI.<\/p>\n<p>Imparerete anche a distribuire direttamente dal vostro repository GitHub alla piattaforma di <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hosting di Applicazioni<\/a> di Kinsta, che offre un dominio <em>.kinsta.app<\/em> gratuito per rendere il vostro progetto operativo rapidamente. Inoltre, grazie alla prova gratuita e al <a href=\"https:\/\/sevalla.com\/pricing\/\">Piano Hobby<\/a> di Kinsta, potrete iniziare a lavorarci su senza alcun costo.<\/p>\n<p>Ecco una demo live dell&#8217;<a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">applicazione clone di ChatGPT<\/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=\"Applicazione clone di ChatGPT\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Applicazione clone di ChatGPT<\/figcaption><\/figure>\n<p>Se volete esaminare pi\u00f9 da vicino questo progetto, potete accedere al <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\" target=\"_blank\" rel=\"noopener noreferrer\">repository GitHub<\/a>.<\/p>\n<p>In alternativa, utilizzando questo template di <a href=\"https:\/\/github.com\/olawanlejoel\/chatgpt-clone-starter\">progetto starter<\/a>, \u00e8 possibile selezionare <strong>Usa questo template<\/strong> &gt; <strong>Crea un nuovo repository<\/strong>: in questo modo si copier\u00e0 il codice starter in un nuovo repository. Questo progetto starter \u00e8 dotato di elementi fondamentali come gli stili, il link al CDN di Font Awesome, il <a href=\"https:\/\/www.npmjs.com\/package\/openai\">pacchetto OpenAi<\/a> e la struttura di base per aiutarvi a cominciare.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Il credito gratuito per l&#8217;utilizzo dell&#8217;API di OpenAI \u00e8 limitato a 18 dollari. Se si sta testando <a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\">questa applicazione demo<\/a> e smette di funzionare, il credito potrebbe essere esaurito. Per continuare a utilizzare l&#8217;API di OpenAI, \u00e8 necessario aggiornare il proprio piano.<\/p>\n<\/aside>\n\n<h3>Requisiti\/Prequisiti<\/h3>\n<p>Questo tutorial \u00e8 stato progettato per essere un&#8217;esperienza &#8220;follow-along&#8221;. Pertanto, \u00e8 consigliabile che disponiate dei seguenti elementi per poter programmare senza intoppi:<\/p>\n<ul>\n<li>Conoscenza di base di <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a> e <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a><\/li>\n<li>Una certa familiarit\u00e0 con <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a><\/li>\n<li>Node.js e npm (<a href=\"https:\/\/kinsta.com\/it\/blog\/cos-e-npm\/\">Node Package Manager<\/a>) o yarn installati sul 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>Cos&#8217;\u00e8 OpenAI API?<\/h2>\n<p><a href=\"https:\/\/platform.openai.com\/overview\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI API<\/a> \u00e8 una piattaforma basata sul cloud che consente agli sviluppatori di accedere ai modelli linguistici di OpenAI, come GPT-3, tramite un&#8217;API. Permette agli sviluppatori di aggiungere alle loro applicazioni alcune funzioni di elaborazione del linguaggio naturale come completamento del testo, sentiment analysis, sintesi e traduzione senza avere la necessit\u00e0 di sviluppare e allenare i propri modelli.<\/p>\n<p>Per utilizzare l&#8217;API OpenAI, gli sviluppatori devono creare un account sul <a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">sito web OpenAI<\/a> e ottenere una chiave API. La chiave API viene utilizzata per autenticare le richieste API e tenere traccia del suo utilizzo.<\/p>\n<p>Una volta ottenuta la chiave API, gli sviluppatori possono utilizzare l&#8217;API per inviare il testo al modello linguistico e ricevere le risposte.<\/p>\n\n<h2>Perch\u00e9 React?<\/h2>\n<p>React \u00e8 una <a href=\"https:\/\/kinsta.com\/it\/blog\/librerie-javascript\/\">popolare libreria JavaScript<\/a> per la creazione di interfacce utente. Secondo il <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#section-most-popular-technologies-web-frameworks-and-technologies\" target=\"_blank\" rel=\"noopener noreferrer\">sondaggio Stack Overflow del 2022 sugli sviluppatori<\/a>, \u00e8 la seconda tecnologia web pi\u00f9 utilizzata, con il 42,62% della quota di mercato.<\/p>\n<p>React permette agli sviluppatori di creare componenti dichiarativi che rappresentano diverse parti dell&#8217;interfaccia utente. Questi componenti vengono definiti utilizzando una sintassi chiamata JSX, che \u00e8 una combinazione di JavaScript e HTML.<\/p>\n<p>Grazie al suo ampio <a href=\"https:\/\/kinsta.com\/it\/blog\/libreria-componenti-react\/\">ecosistema di librerie e kit di componenti<\/a>, gli sviluppatori possono facilmente lavorare e integrare API, come l&#8217;API OpenAI, per costruire complesse interfacce di chat e questo lo rende una scelta eccellente per la realizzazione di un&#8217;applicazione clone di ChatGPT.<\/p>\n<h3>Come Impostare l&#8217;Ambiente di Sviluppo React<\/h3>\n<p>Il modo migliore per <a href=\"https:\/\/kinsta.com\/it\/blog\/installare-react\/\">installare React<\/a> o creare un progetto React \u00e8 installarlo con <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">create-react-app<\/a>. Un prerequisito \u00e8 <a href=\"https:\/\/kinsta.com\/it\/blog\/come-installare-node-js\/\">avere Node.js installato sul proprio computer<\/a>. Per verificare che Node sia installato, eseguite il seguente comando nel vostro terminale.<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Se ne visualizzate una versione, vuol dire che ne avete gi\u00e0 una installata. Per utilizzare <a href=\"https:\/\/github.com\/npm\/npm\/releases\/tag\/v5.2.0\" target=\"_blank\" rel=\"noopener noreferrer\">npx<\/a>, dovrete assicurarvi che la versione di Node non sia inferiore alla v14.0.0 e che la versione di NPM non sia inferiore alla v5.6; in caso contrario, potreste doverla aggiornare eseguendo <code>npm update -g<\/code>. Una volta capito come funziona npm, \u00e8 possibile impostare un progetto React eseguendo il comando seguente:<\/p>\n<pre><code class=\"language-bash\">npx create-react-app chatgpt-clone<\/code><\/pre>\n<p><strong>Nota:<\/strong> &#8220;chatgpt-clone&#8221; \u00e8 il nome dell&#8217;applicazione che stiamo creando, ma potete cambiarlo con un nome a vostra scelta.<\/p>\n<p>Il processo di installazione potrebbe richiedere alcuni minuti. Una volta terminato, potete navigare nella directory e installare il pacchetto Node.js OpenAI, che fornisce un comodo accesso all&#8217;API OpenAI da Node.js, utilizzando il comando seguente:<\/p>\n<pre><code class=\"language-bash\">npm install openai<\/code><\/pre>\n<p>Ora potete eseguire <code>npm start<\/code> per vedere la vostra applicazione in diretta su <strong>localhost:3000<\/strong>.<\/p>\n<p>Quando un progetto React viene creato con il comando <code>create-react-app<\/code>, viene creata automaticamente una struttura di cartelle. La cartella principale che vi interessa \u00e8 la cartella <code>src<\/code>, dove avviene lo sviluppo. Questa cartella contiene molti file per impostazione predefinita, ma a voi dovrebbero interessare solo i file <strong>App.js<\/strong>, <strong>index.js<\/strong> e <strong>index.css<\/strong>.<\/p>\n<ol>\n<li><strong>App.js<\/strong>: il file <strong>App.js<\/strong> \u00e8 il componente principale di un&#8217;applicazione React. In genere rappresenta il componente di primo livello che esegue il rendering di tutti gli altri componenti dell&#8217;applicazione.<\/li>\n<li><strong>index.js<\/strong>: questo file \u00e8 il punto di ingresso dell&#8217;applicazione React. \u00c8 il primo file caricato all&#8217;apertura dell&#8217;applicazione ed \u00e8 responsabile del rendering del componente <strong>App.js<\/strong> nel browser.<\/li>\n<li><strong>index.css<\/strong>: Questo file \u00e8 responsabile della definizione dello stile e del layout generale dell&#8217;applicazione React.<\/li>\n<\/ol>\n<h2>Come Creare un Clone di ChatGPT con React e OpenAI API<\/h2>\n<p>L&#8217;applicazione clone di ChatGPT sar\u00e0 composta da due componenti per rendere l&#8217;applicazione pi\u00f9 facile da capire e da mantenere. Questi due componenti sono:<\/p>\n<ol>\n<li><strong>Form Section<\/strong>: Questo componente include un&#8217;area di testo e un pulsante per consentire agli utenti di interagire con il chatbot.<\/li>\n<li><strong>Answer Section<\/strong>: Le domande e le risposte corrispondenti saranno memorizzate in un array e visualizzate in questa sezione. Si scorrer\u00e0 l&#8217;array in ordine cronologico, che mostrer\u00e0 la pi\u00f9 recente per prima.<\/li>\n<\/ol>\n<h3>Impostazione dell&#8217;Applicazione Clone di ChatGPT<\/h3>\n<p>In questa esercitazione, inizieremo a costruire l&#8217;interfaccia dell&#8217;applicazione per poi implementare le funzionalit\u00e0 in modo che l&#8217;applicazione interagisca con l&#8217;API OpenAI. Iniziamo creando i due componenti che utilizzeremo in questo tutorial. Per una corretta organizzazione, creemo una cartella <strong>components<\/strong> nella cartella <strong>src<\/strong> in cui saranno memorizzati tutti i componenti.<\/p>\n<h4>Il Componente Form Section<\/h4>\n<p>Si tratta di un semplice modulo che consiste in una <code>textarea<\/code> e in un <code>button<\/code> invio.<\/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;<\/code><\/pre>\n<p>Questo \u00e8 l&#8217;aspetto che dovrebbe avere il modulo quando lo importerete nel vostro file <strong>App.js<\/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\/form-section-component.jpg\" alt=\"Componente Form Section per il clone di ChatGPT\" width=\"1600\" height=\"360\"><figcaption class=\"wp-caption-text\">Componente sezione modulo<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>L&#8217;obiettivo di questo tutorial \u00e8 quello di costruire e distribuire la vostra applicazione. Potete quindi copiare gli stili del file <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">src\/index.css<\/a> nel vostro progetto per ottenere lo stesso risultato\/applicazione.<\/p>\n<\/aside>\n\n<h4>Il Componente Answer Section<\/h4>\n<p>In questa sezione verranno visualizzate tutte le domande e le risposte. Ecco come apparir\u00e0 questa sezione quando la importerete anche nel vostro file <strong>App.js<\/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\/answer-section-component.jpg\" alt=\"Componente Answer Section del clone di ChatGPT\" width=\"1600\" height=\"347\"><figcaption class=\"wp-caption-text\">Componente Answer Section<\/figcaption><\/figure>\n<p>Le domande e le risposte verranno recuperate da un array e da un ciclo per rendere il codice pi\u00f9 facile da leggere e da mantenere.<\/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>La Pagina Iniziale<\/h4>\n<p>Ora avete creato entrambi i componenti, ma quando eseguirete l&#8217;applicazione non apparir\u00e0 nulla perch\u00e9 dovrete prima importarli nel vostro file <strong>App.js<\/strong>. Per questa applicazione, non implementerete alcuna forma di routing, quindi il file <strong>App.js<\/strong> servir\u00e0 come componente\/pagina iniziale dell&#8217;applicazione.<\/p>\n<p>Potete aggiungere alcuni contenuti, come il titolo e la descrizione dell&#8217;applicazione, prima di importare i componenti.<\/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>Nel codice qui sopra, i due componenti vengono importati e aggiunti all&#8217;applicazione. Quando eseguirete l&#8217;applicazione, avr\u00e0 questo aspetto:<\/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=\"Applicazione clone di ChatGPT completa\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Applicazione clone di ChatGPT completa<\/figcaption><\/figure>\n<h3>Aggiunta di Funzionalit\u00e0 e Integrazione dell&#8217;API OpenAI<\/h3>\n<p>Ora avete l&#8217;interfaccia utente della vostra applicazione. Il passo successivo \u00e8 rendere l&#8217;applicazione funzionale in modo che possa interagire con l&#8217;API OpenAI e ottenere risposte. Per prima cosa, dovete ottenere il valore dal vostro modulo quando viene inviato perch\u00e9 verr\u00e0 utilizzato per interrogare l&#8217;API OpenAI.<\/p>\n<h4>Ottenere i Dati dal Modulo<\/h4>\n<p>In React, il modo migliore per memorizzare e aggiornare i dati \u00e8 utilizzare gli stati. Nei componenti funzionali, l&#8217;hook <code>useState()<\/code> \u00e8 utilizzato per lavorare con gli stati. \u00c8 possibile creare uno stato, assegnare il valore del modulo allo stato e aggiornarlo ogni volta che il suo valore cambia. Iniziamo importando l&#8217;hook <code>useState()<\/code> nel componente <strong>FormSection.jsx<\/strong> e poi creiamo uno stato per memorizzare e aggiornare <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>Successivamente, potrete assegnare il valore del campo <code>textarea<\/code> allo stato e creare un evento <code>onChange()<\/code> per aggiornare lo stato ogni volta che il valore dell&#8217;input cambia:<\/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>Infine, potete creare un evento <code>onClick()<\/code> per caricare una funzione ogni volta che viene cliccato il pulsante di invio. Questo metodo verr\u00e0 creato nel file <strong>App.js<\/strong> e passato come props nel componente <strong>FormSection.jsx<\/strong> con i valori <code>newQuestion<\/code> e <code>setNewQuestion<\/code> come argomenti.<\/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>Ora avete creato uno stato per memorizzare e aggiornare il valore del modulo, avete aggiunto un metodo che viene passato come props dal file <strong>App.js<\/strong> e avete gestito l&#8217;evento click. Ecco come apparir\u00e0 il codice finale:<\/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>Il prossimo passo sar\u00e0 quello di creare un metodo nel file <strong>App.js<\/strong> per gestire l&#8217;intero processo di interazione con l&#8217;API OpenAI.<\/p>\n<h4>Interagire con OpenAI API<\/h4>\n<p>Per interagire con OpenAI API e ottenere le chiavi API in un&#8217;applicazione React, dovrete creare un account OpenAI API. Potete registrarvi sul sito web di OpenAI utilizzando il vostro account google o la vostra email. Per generare una chiave API, cliccate su <strong>Personal<\/strong> nell&#8217;angolo in alto a destra del sito; appariranno alcune opzioni; cliccate su <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=\"Accedere alle chiavi API di OpenAI\" width=\"1600\" height=\"977\"><figcaption class=\"wp-caption-text\">Accedere alle chiavi API di OpenAI.<\/figcaption><\/figure>\n<p>Cliccate sul pulsante <strong>Create new secret key<\/strong> e copiate la chiave da qualche parte per utilizzarla in questa applicazione per interagire con OpenAI. Ora potete procedere all&#8217;inizializzazione di OpenAI importando il pacchetto openai (che avrete gi\u00e0 installato) insieme al metodo di configurazione. Quindi create una configurazione con la chiave generata e usatela per inizializzare 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>Nel codice qui sopra, la chiave API di OpenAI \u00e8 memorizzata come <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-sono-le-variabili-d-ambiente\/\">variabile d&#8217;ambiente<\/a> nel file <strong>.env<\/strong>. Potete creare un file <strong>.env<\/strong> nella cartella principale della vostra applicazione e memorizzare la chiave nella variabile <code>REACT_APP_OPENAI_API_KEY<\/code>.<\/p>\n<pre><code>\/\/ .env\nREACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx\u2026<\/code><\/pre>\n<p>Ora potete creare il metodo <code>generateResponse<\/code> nel file <strong>App.js<\/strong> e passare i due parametri previsti dal modulo che avete gi\u00e0 creato per gestire la richiesta e ottenere la risposta dall&#8217;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>Adesso potete inviare una richiesta all&#8217;API OpenAI. L&#8217;API OpenAI pu\u00f2 eseguire molte operazioni, come domande e risposte (Q&#038;A), correzione grammaticale, traduzione e molto altro. Per ognuna di queste operazioni, le opzioni sono diverse. Ad esempio, il valore del motore per Q&#038;A \u00e8 <code>text-davinci-00<\/code>, mentre per SQL translate \u00e8 <code>code-davinci-002<\/code>. Consultate la <a href=\"https:\/\/platform.openai.com\/examples\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione di OpenAI<\/a> per vedere vari esempi e le relative opzioni.<\/p>\n<p>In questo tutorial lavoreremo solo con il <a href=\"https:\/\/platform.openai.com\/examples\/default-qa\" target=\"_blank\" rel=\"noopener noreferrer\">Q&#038;A:<\/a> ecco come si presenta l&#8217;opzione:<\/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>Nota:<\/strong> ho cambiato il valore del prompt.<\/p>\n<p>Il prompt \u00e8 la domanda che viene inviata dal modulo. Ci\u00f2 significa che dovrete riceverlo dall&#8217;input del modulo che passerete al metodo <code>generateResponse<\/code> come parametro. Per farlo, dovrete definire le opzioni e poi utilizzare l&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/operatore-spread-javascript\/\">operatore spread<\/a> per creare un&#8217;opzione completa che includa il prompt:<\/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>A questo punto, non resta che inviare una richiesta tramite il metodo <code>createCompletion<\/code> a OpenAI per ottenere una risposta.<\/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>Nel codice qui sopra, il testo della risposta verr\u00e0 visualizzato nella console. Sentitevi liberi di testare la vostra applicazione ponendo qualsiasi domanda. Il passo finale consiste nel creare uno stato che contenga l&#8217;array di domande e risposte e poi inviare questo array come prop nel componente <strong>AnswerSection<\/strong>. Ecco come apparir\u00e0 il codice finale di <strong>App.js<\/strong>:<\/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>A questo punto, potete modificare il componente <strong>AnswerSection<\/strong> in modo che riceva il valore di prop da <strong>App.js<\/strong> e utilizzare il metodo JavaScript <code>Map()<\/code> per esaminare l&#8217;array <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>Quando eseguirete l&#8217;applicazione e la testerete ponendo delle domande, le risposte verranno visualizzate qui sotto. Ma noterete che il pulsante di copia non funziona. Dovrete aggiungere un evento <code>onClick()<\/code> al pulsante, in modo da attivare un metodo per gestire la funzionalit\u00e0. Potete utilizzare il metodo <code>navigator.clipboard.writeText()<\/code> per gestire la funzionalit\u00e0. Ecco come apparir\u00e0 ora il componente <strong>AnswerSection<\/strong>:<\/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>Quando eseguirete l&#8217;applicazione, il clone di ChatGPT funzioner\u00e0 perfettamente. \u00c8 arrivato finalmente il momento di distribuire l&#8217;applicazione per accedervi online e condividerla con gli amici.<\/p>\n<h2>Come Distribuire l&#8217;Applicazione React su Kinsta<\/h2>\n<p>Non \u00e8 sufficiente creare questa applicazione e lasciarla sui vostri computer locali. Dovrete condividerla online, in modo che altri possano accedervi. Vediamo come fare utilizzando <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-github\/\">GitHub<\/a> e <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinsta<\/a>.<\/p>\n<h3>Inviare il Codice a GitHub<\/h3>\n<p>Per <a href=\"https:\/\/kinsta.com\/it\/blog\/come-inviare-codice-github\/\">inviare il vostro codice<\/a> a GitHub, potete utilizzare i comandi di <a href=\"https:\/\/kinsta.com\/it\/blog\/git-per-lo-sviluppo-web\/\">Git<\/a>, un metodo affidabile ed efficiente per gestire le modifiche al codice, collaborare ai progetti e mantenere la cronologia delle versioni.<\/p>\n<p>Il primo passo da fare per inviare il codice \u00e8 creare un nuovo repository accedendo al vostro account GitHub, cliccando sul pulsante <strong>+<\/strong> nell&#8217;angolo in alto a destra dello schermo e selezionando <strong>Nuovo repository<\/strong> dal menu a tendina.<\/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=\"Creare un nuovo repository su GitHub\" width=\"1600\" height=\"770\"><figcaption class=\"wp-caption-text\">Creare un nuovo repository su GitHub<\/figcaption><\/figure>\n<p>Date un nome al vostro repository, aggiungete una descrizione (facoltativa) e scegliete se volete che sia pubblico o privato. Cliccate su <strong>Crea repository<\/strong> per crearlo.<\/p>\n<p>Una volta creato, assicuratevi di ottenere l&#8217;URL del repository dalla pagina principale del repository, che vi servir\u00e0 per inviare il codice a 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=\"Accedere all'URL del proprio repository\" width=\"1600\" height=\"738\"><figcaption class=\"wp-caption-text\">Accedere all&#8217;URL del proprio repository<\/figcaption><\/figure>\n<p>Aprite il vostro terminale o il prompt dei comandi e naviga nella directory che contiene il tuo progetto. Esegui i seguenti comandi uno alla volta per inviare il codice al tuo repository GitHub:<\/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> <code>git add .<\/code> aggiunge tutti i file della directory corrente e delle sue sottodirectory al nuovo repository Git. <code>git commit -m \"my first commit\"<\/code> apporta le modifiche al repository con un breve messaggio. <code>git remote add origin [repository URL]<\/code> imposta l&#8217;URL del repository come repository remoto e <code>git push -u origin master<\/code> invia il codice al repository remoto (origin) nel branch master.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Potete sostituire &#8220;my first commit&#8221; con un breve messaggio che descriva le modifiche apportate e &#8220;[URL del repository]&#8221; con l&#8217;URL del repository GitHub. Una volta inviato il codice a GitHub, potrete distribuire il vostro repository su Kinsta.<\/p>\n<\/aside>\n\n<h3>Distribuire l&#8217;Applicazione ChatGPT Clone React su Kinsta<\/h3>\n<p>Per distribuire il vostro repository su Kinsta, seguite i seguenti passaggi:<\/p>\n<ol>\n<li>Effettuare l&#8217;accesso o creare un account Kinsta nel cruscotto <a href=\"https:\/\/my.kinsta.com\/?lang=it\">MyKinsta<\/a>.<\/li>\n<li>Cliccare su <strong>Applicazioni<\/strong> nella barra laterale di sinistra e poi su <strong>Aggiungi servizio<\/strong>.<\/li>\n<li>Selezionare <strong>Applicazione<\/strong> dal menu a tendina per distribuire un&#8217;applicazione React su Kinsta.<\/li>\n<li>Selezionare il repository che desiderate distribuire dalla finestra di dialogo che appare. Se avete pi\u00f9 branch, scegliete quella che volete distribuire e assegnate un nome all&#8217;applicazione. Selezionate un <a href=\"https:\/\/kinsta.com\/it\/docs\/informazioni-sul-servizio\/sedi-data-center\/#application-and-database-hosting-data-centers\">data centre<\/a> tra quelli disponibili tra i nostri 24 e Kinsta rilever\u00e0 automaticamente un comando di avvio.<\/li>\n<li>Infine, non \u00e8 sicuro inviare le chiavi API a host pubblici come GitHub, quindi la abbiamo aggiunta come variabile d&#8217;ambiente a livello locale. Durante l&#8217;hosting, \u00e8 possibile aggiungerla come <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">variabile d&#8217;ambiente<\/a> utilizzando lo stesso nome della variabile e la chiave come valore.<\/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=\"Distribuzione del clone di ChatGPT su Kinsta\" width=\"1440\" height=\"788\"><figcaption class=\"wp-caption-text\">Distribuzione del clone di ChatGPT su Kinsta.<\/figcaption><\/figure>\n<p>L&#8217;applicazione inizier\u00e0 ad essere distribuita ed entro pochi minuti verr\u00e0 fornito un link per accedere alla sua versione distribuita. In questo caso, si tratta di <strong>https:\/\/chatgpt-clone-g9q10.kinsta.app\/<\/strong><\/p>\n<p><strong>Note:<\/strong> Potete attivare la distribuzione automatica, in modo che Kinsta distribuisca nuovamente l&#8217;applicazione ogni volta che modificate la base di codice e la inviate a GitHub.<\/p>\n\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=vmNem6wxfSQ\"><\/kinsta-video>\n<h2>Riepilogo<\/h2>\n<p>L&#8217;API OpenAI pu\u00f2 essere utilizzata per creare un&#8217;ampia gamma di potenziali applicazioni, dall&#8217;assistenza clienti agli assistenti personali, dalla traduzione linguistica alla creazione di contenuti.<\/p>\n<p>In questo tutorial abbiamo imparato a costruire un&#8217;applicazione clone di ChatGPT con React e OpenAI. Potete integrare questa applicazione\/funzione in altre applicazioni per fornire agli utenti esperienze di conversazione simili a quelle umane.<\/p>\n<p>C&#8217;\u00e8 molto altro che si pu\u00f2 fare sia con l&#8217;API OpenAI che per migliorare questa applicazione clone. Ad esempio, potete implementare la memorizzazione locale in modo che le domande e le risposte precedenti non scompaiano anche dopo l&#8217;aggiornamento del browser.<\/p>\n<p>Grazie alla prova gratuita di Kinsta e al <a href=\"https:\/\/sevalla.com\/pricing\/\">Piano Hobby<\/a>, potete iniziare facilmente e senza alcun costo a utilizzare il nostro Hosting di Applicazioni. Allora perch\u00e9 non provare e vedere cosa riuscite a creare?<\/p>\n<p>Condividete i vostri progetti e le vostre esperienze nei commenti qui sotto.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>L&#8217;utilizzo dei chatbot e degli assistenti virtuali continua ad aumentare. Per questo molte aziende e sviluppatori stanno cercando di creare i propri chatbot dotati di intelligenza &#8230;<\/p>\n","protected":false},"author":287,"featured_media":66970,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26212],"class_list":["post-66969","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>Come Costruire e Distribuire un&#039;App Clone di ChatGPT con React e API OpenAI- Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Scopri come costruire un&#039;applicazione clone di ChatGPT usando React e l&#039;API OpenAI e poi distribuiscila su 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\/it\/blog\/clone-di-chatgpt\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Costruire e Distribuire un&#039;App Clone di ChatGPT con React e API OpenAI\" \/>\n<meta property=\"og:description\" content=\"Scopri come costruire un&#039;applicazione clone di ChatGPT usando React e l&#039;API OpenAI e poi distribuiscila su Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-16T07:16:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T20:35:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"Scopri come costruire un&#039;applicazione clone di ChatGPT usando React e l&#039;API OpenAI e poi distribuiscila su Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Come Costruire e Distribuire un&#8217;App Clone di ChatGPT con React e API OpenAI\",\"datePublished\":\"2023-03-16T07:16:46+00:00\",\"dateModified\":\"2023-08-22T20:35:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/\"},\"wordCount\":2778,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/\",\"name\":\"Come Costruire e Distribuire un'App Clone di ChatGPT con React e API OpenAI- Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"datePublished\":\"2023-03-16T07:16:46+00:00\",\"dateModified\":\"2023-08-22T20:35:16+00:00\",\"description\":\"Scopri come costruire un'applicazione clone di ChatGPT usando React e l'API OpenAI e poi distribuiscila su Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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\/it\/blog\/clone-di-chatgpt\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Costruire e Distribuire un&#8217;App Clone di ChatGPT con React e API OpenAI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Costruire e Distribuire un'App Clone di ChatGPT con React e API OpenAI- Kinsta\u00ae","description":"Scopri come costruire un'applicazione clone di ChatGPT usando React e l'API OpenAI e poi distribuiscila su 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\/it\/blog\/clone-di-chatgpt\/","og_locale":"it_IT","og_type":"article","og_title":"Come Costruire e Distribuire un'App Clone di ChatGPT con React e API OpenAI","og_description":"Scopri come costruire un'applicazione clone di ChatGPT usando React e l'API OpenAI e poi distribuiscila su Kinsta.","og_url":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-03-16T07:16:46+00:00","article_modified_time":"2023-08-22T20:35:16+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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":"Scopri come costruire un'applicazione clone di ChatGPT usando React e l'API OpenAI e poi distribuiscila su Kinsta.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"18 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Come Costruire e Distribuire un&#8217;App Clone di ChatGPT con React e API OpenAI","datePublished":"2023-03-16T07:16:46+00:00","dateModified":"2023-08-22T20:35:16+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/"},"wordCount":2778,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/","url":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/","name":"Come Costruire e Distribuire un'App Clone di ChatGPT con React e API OpenAI- Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","datePublished":"2023-03-16T07:16:46+00:00","dateModified":"2023-08-22T20:35:16+00:00","description":"Scopri come costruire un'applicazione clone di ChatGPT usando React e l'API OpenAI e poi distribuiscila su Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/clone-di-chatgpt\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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\/it\/blog\/clone-di-chatgpt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/it\/argomenti\/react\/"},{"@type":"ListItem","position":3,"name":"Come Costruire e Distribuire un&#8217;App Clone di ChatGPT con React e API OpenAI"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/66969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=66969"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/66969\/revisions"}],"predecessor-version":[{"id":72539,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/66969\/revisions\/72539"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/66969\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/66969\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/66969\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/66969\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/66969\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/66969\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/66969\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/66969\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/66969\/translations\/dk"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/66969\/translations\/pt"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/66969\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/66970"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=66969"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=66969"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=66969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}