{"id":63896,"date":"2023-03-16T08:21:55","date_gmt":"2023-03-16T07:21:55","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=63896&#038;preview=true&#038;preview_id=63896"},"modified":"2023-08-20T15:13:39","modified_gmt":"2023-08-20T13:13:39","slug":"clon-chatgpt","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/","title":{"rendered":"C\u00f3mo Construir y Desplegar una Aplicaci\u00f3n Clon de ChatGPT con React y la API OpenAI"},"content":{"rendered":"<p>A medida que crece el uso de chatbots y asistentes virtuales, muchas empresas y desarrolladores buscan formas de crear sus propios chatbots con IA. ChatGPT es uno de esos chatbots, creado por OpenAI, que es capaz de entablar conversaciones similares a las humanas y responder a una amplia gama de preguntas.<\/p>\n<h2>Qu\u00e9 Vas a Construir<\/h2>\n<p>En este tutorial, aprender\u00e1s a construir una aplicaci\u00f3n clon de ChatGPT utilizando <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">React<\/a> y la API de OpenAI. Si quieres probar suerte en un proyecto divertido y atractivo durante el fin de semana, esta es una gran oportunidad para sumergirte en React y OpenAI.<\/p>\n<p>Tambi\u00e9n aprender\u00e1s a desplegar directamente desde tu repositorio de GitHub a la plataforma de<a href=\"https:\/\/sevalla.com\/application-hosting\/\"> Alojamiento de Aplicaciones<\/a> de Kinsta, que proporciona un dominio <em>.kinsta.app<\/em> gratuito para que tu proyecto se ponga en marcha r\u00e1pidamente. Y con la prueba gratuita de Kinsta y el <a href=\"https:\/\/sevalla.com\/pricing\/\">nivel Hobby<\/a>, puedes empezar f\u00e1cilmente sin ning\u00fan coste.<\/p>\n<p>Aqu\u00ed tienes una demostraci\u00f3n en directo de la <a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">aplicaci\u00f3n clon de 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=\"Aplicaci\u00f3n clon de ChatGPT\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Aplicaci\u00f3n clon de ChatGPT<\/figcaption><\/figure>\n<p>Si quieres inspeccionar este proyecto m\u00e1s de cerca, puedes acceder a su <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\" target=\"_blank\" rel=\"noopener noreferrer\">repositorio de GitHub<\/a>.<\/p>\n<p>Alternativamente, usando esta plantilla de <a href=\"https:\/\/github.com\/olawanlejoel\/chatgpt-clone-starter\">proyecto de inicio<\/a>, puedes seleccionar <strong>Usar esta plantilla<\/strong> &gt; <strong>Crear un nuevo repositori<\/strong>o \u2014 esto copiar\u00e1 el c\u00f3digo de inicio en un nuevo repositorio. Este proyecto de inicio viene con elementos fundamentales como estilos, enlace Font Awesome CDN, <a href=\"https:\/\/www.npmjs.com\/package\/openai\">paquete OpenAi<\/a>, y la estructura b\u00e1sica para ayudarte a empezar.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>El cr\u00e9dito gratuito para usar la API de OpenAI est\u00e1 limitado a 18 $. Si est\u00e1s probando <a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\">esta aplicaci\u00f3n de demostraci\u00f3n<\/a> y deja de funcionar, significa que el cr\u00e9dito puede haberse agotado. Para seguir usando la API de OpenAI, tendr\u00e1s que actualizar tu plan<\/p>\n<\/aside>\n\n<h3>Requisitos\/Prerrequisitos<\/h3>\n<p>Este tutorial est\u00e1 dise\u00f1ado para ser una experiencia \u00abfollow-along\u00bb (para seguir) . Por lo tanto, se recomienda que tengas lo siguiente para poder programar juntos con facilidad:<\/p>\n<ul>\n<li>Conocimientos b\u00e1sicos de <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a> y <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a><\/li>\n<li>Cierta familiaridad con <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">React<\/a><\/li>\n<li>Node.js y npm (<a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-npm\/\">Node Package Manager<\/a>) o yarn instalados en tu ordenador<\/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>\u00bfQu\u00e9 Es la API OpenAI?<\/h2>\n<p>La <a href=\"https:\/\/platform.openai.com\/overview\">API de OpenAI<\/a> es una plataforma basada en la nube que permite a los desarrolladores acceder a los modelos ling\u00fc\u00edsticos de OpenAI, como el GPT-3, a trav\u00e9s de una API. Permite a los desarrolladores a\u00f1adir a sus aplicaciones funciones de procesamiento del lenguaje natural, como completado de texto, an\u00e1lisis de sentimientos, resumen y traducci\u00f3n, sin necesidad de desarrollar y entrenar sus modelos.<\/p>\n<p>Para utilizar la API de OpenAI, los desarrolladores deben crear una cuenta en el <a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">sitio web de OpenAI<\/a> y obtener una clave API. La clave de la API se utiliza para autenticar las solicitudes de la API y hacer un seguimiento de su uso.<\/p>\n<p>Una vez obtenida la clave de la API, los desarrolladores pueden utilizarla para enviar texto al modelo ling\u00fc\u00edstico y recibir respuestas.<\/p>\n\n<h2>\u00bfPor Qu\u00e9 React?<\/h2>\n<p>React es una <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/\">popular biblioteca JavaScript<\/a> para construir interfaces de usuario. Seg\u00fan la <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#section-most-popular-technologies-web-frameworks-and-technologies\" target=\"_blank\" rel=\"noopener noreferrer\">encuesta a desarrolladores de Stack Overflow de 2022<\/a>, es la segunda tecnolog\u00eda web m\u00e1s utilizada, con el 42,62% de la cuota de mercado.<\/p>\n<p>React permite a los desarrolladores crear componentes declarativos que representan diferentes partes de la interfaz de usuario. Estos componentes se definen mediante una sintaxis llamada JSX, que es una combinaci\u00f3n de JavaScript y HTML.<\/p>\n<p>Gracias a su gran <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-de-componentes-react\/\">ecosistema de bibliotecas y kits de componentes<\/a>, los desarrolladores pueden trabajar f\u00e1cilmente con APIs como la API OpenAI e integrarlas, para construir complejas interfaces de chat, y eso es lo que lo convierte en una excelente opci\u00f3n para construir una aplicaci\u00f3n clonada de ChatGPT.<\/p>\n<h3>C\u00f3mo Configurar Tu Entorno de Desarrollo React<\/h3>\n<p>La mejor forma de <a href=\"https:\/\/kinsta.com\/es\/blog\/instalar-react\/\">instalar React<\/a> o crear un proyecto React es instalarlo 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 requisito previo es <a href=\"https:\/\/kinsta.com\/es\/blog\/como-instalar-node-js\/\">tener Node.js instalado en tu m\u00e1quina<\/a>. Para confirmar que tienes Node instalado, ejecuta el siguiente comando en tu terminal.<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Si aparece una versi\u00f3n, es que existe. Para utilizar <a href=\"https:\/\/github.com\/npm\/npm\/releases\/tag\/v5.2.0\" target=\"_blank\" rel=\"noopener noreferrer\">npx<\/a>, tendr\u00e1s que asegurarte de que tu versi\u00f3n de Node no es inferior a v14.0.0, y tu versi\u00f3n de NPM no es inferior a v5.6; de lo contrario, podr\u00edas tener que actualizarla ejecutando <code>npm update -g<\/code>. Una vez que te hayas familiarizado con npm, ya puedes configurar un proyecto React ejecutando el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">npx create-react-app chatgpt-clone<\/code><\/pre>\n<p><strong>Nota:<\/strong> \u00abchatgpt-clone\u00bb es el nombre de la aplicaci\u00f3n que estamos creando, pero puedes cambiarlo por cualquier nombre de tu elecci\u00f3n.<\/p>\n<p>El proceso de instalaci\u00f3n puede tardar unos minutos. Una vez finalizado con \u00e9xito, puedes navegar hasta el directorio e instalar el paquete OpenAI de Node.js, que proporciona un c\u00f3modo acceso a la API de OpenAI desde Node.js utilizando el comando que se indica a continuaci\u00f3n:<\/p>\n<pre><code class=\"language-bash\">npm install openai<\/code><\/pre>\n<p>Ahora puedes ejecutar <code>npm start<\/code> para ver tu aplicaci\u00f3n en directo en <strong>localhost:3000<\/strong>.<\/p>\n<p>Cuando se crea un proyecto React utilizando el comando <code>create-react-app<\/code>, se crea autom\u00e1ticamente una estructura de carpetas. La carpeta principal que te concierne es la carpeta <code>src<\/code>, que es donde tiene lugar el desarrollo. Esta carpeta contiene muchos archivos por defecto, pero s\u00f3lo deber\u00edan preocuparte los archivos <strong>App.js<\/strong>, <strong>index.js<\/strong> e <strong>index.css<\/strong>.<\/p>\n<ol>\n<li><strong>App.js<\/strong>: El archivo <strong>App.js<\/strong> es el componente principal de una aplicaci\u00f3n React. Normalmente representa el componente de nivel superior que renderiza todos los dem\u00e1s componentes de la aplicaci\u00f3n.<\/li>\n<li><strong>index.js<\/strong>: Este archivo es el punto de entrada de tu aplicaci\u00f3n React. Es el primer archivo que se carga cuando se abre la aplicaci\u00f3n y es responsable de renderizar el componente <strong>App.js<\/strong> en el navegador.<\/li>\n<li><strong>index.css<\/strong>: Este archivo es responsable de definir el estilo general y el dise\u00f1o de tu aplicaci\u00f3n React.<\/li>\n<\/ol>\n<h2>C\u00f3mo Construir un Clon de ChatGPT con React y la API OpenAI<\/h2>\n<p>La aplicaci\u00f3n clon de ChatGPT constar\u00e1 de dos componentes para que la aplicaci\u00f3n sea m\u00e1s f\u00e1cil de entender y mantener. Estos dos componentes son:<\/p>\n<ol>\n<li><strong>Secci\u00f3n Formulario<\/strong>: Este componente incluye un campo de \u00e1rea de texto y un bot\u00f3n para que los usuarios interact\u00faen con el chatbot.<\/li>\n<li><strong>Secci\u00f3n de Respuestas:<\/strong> Las preguntas y sus correspondientes respuestas se almacenar\u00e1n en un array y se mostrar\u00e1n en esta secci\u00f3n. Recorrer\u00e1s el array cronol\u00f3gicamente, mostrando primero la m\u00e1s reciente.<\/li>\n<\/ol>\n<h3>Configuraci\u00f3n de la Aplicaci\u00f3n Clon ChatGPT<\/h3>\n<p>En este tutorial, vamos a empezar por construir primero la interfaz de la aplicaci\u00f3n y luego podr\u00e1s implementar funcionalidades para que tu aplicaci\u00f3n interact\u00fae con la API de OpenAI. Empieza creando los dos componentes que utilizar\u00e1s en este tutorial. Para una correcta organizaci\u00f3n, crear\u00e1s una carpeta llamada <strong>components<\/strong> en la carpeta <strong>src<\/strong> donde se almacenar\u00e1n todos los componentes.<\/p>\n<h4>El Componente Secci\u00f3n de Formulario<\/h4>\n<p>Este es un formulario simple que consiste en un <code>textarea<\/code> y un submit <code>button<\/code>.<\/p>\n<pre><code class=\"language-jsx\">\n\/\/ components\/FormSection.jsx\nconst FormSection = () =&gt; {\n\n    return (\n        &lt;div className=\"form-section\"&gt;\n            &lt;textarea\n                rows=\"5\"\n                className=\"form-control\"\n                placeholder=\"Ask me anything...\"\n            &gt;&lt;\/textarea&gt;\n            &lt;button className=\"btn\"&gt;\n                Generate Response \ud83e\udd16\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    )\n}\n\nexport default FormSection;<\/code><\/pre>\n<p>Este es el aspecto que se espera que tenga el formulario cuando lo importes a tu archivo <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 de secci\u00f3n de formulario para el clon de ChatGPT\" width=\"1600\" height=\"360\"><figcaption class=\"wp-caption-text\">Componente de la secci\u00f3n Formulario<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Este tutorial se centra m\u00e1s en construir y desplegar tu aplicaci\u00f3n. As\u00ed que puedes copiar los estilos del archivo <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">src\/index.css<\/a> en tu propio proyecto para obtener el mismo resultado\/aplicaci\u00f3n.<\/p>\n<\/aside>\n\n<h4>El Componente de la Secci\u00f3n de Respuestas<\/h4>\n<p>Esta secci\u00f3n es donde se mostrar\u00e1n todas las preguntas y respuestas. Este es el aspecto que tendr\u00e1 esta secci\u00f3n cuando tambi\u00e9n la importes a tu archivo <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 de la secci\u00f3n de respuestas del clon ChatGPT\" width=\"1600\" height=\"347\"><figcaption class=\"wp-caption-text\">Componente de la secci\u00f3n de respuestas<\/figcaption><\/figure>\n<p>Obtendr\u00e1s estas preguntas y respuestas de un array y un bucle para que tu c\u00f3digo sea m\u00e1s f\u00e1cil de leer y mantener.<\/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 P\u00e1gina de Inicio<\/h4>\n<p>Ya tienes ambos componentes creados, pero no aparecer\u00e1 nada cuando ejecutes tu aplicaci\u00f3n porque necesitas importarlos a tu archivo <strong>App.js<\/strong>. Para esta aplicaci\u00f3n, no implementar\u00e1s ninguna forma de enrutamiento, lo que significa que el archivo <strong>App.js<\/strong> servir\u00e1 como componente\/p\u00e1gina de inicio de tu aplicaci\u00f3n.<\/p>\n<p>Puedes a\u00f1adir algo de contenido, como el t\u00edtulo y la descripci\u00f3n de tu aplicaci\u00f3n, antes de importar los componentes.<\/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>En el c\u00f3digo anterior, los dos componentes se importan y se a\u00f1aden a la aplicaci\u00f3n. Cuando ejecutes tu aplicaci\u00f3n, \u00e9ste es el aspecto que tendr\u00e1:<\/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=\"Aplicaci\u00f3n clon completa de ChatGPT\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Aplicaci\u00f3n clon completa de ChatGPT<\/figcaption><\/figure>\n<h3>A\u00f1adir Funcionalidad e Integrar la API OpenAI<\/h3>\n<p>Ya tienes la interfaz de usuario de tu aplicaci\u00f3n. El siguiente paso es hacer que la aplicaci\u00f3n sea funcional para que pueda interactuar con la API OpenAI y obtener respuestas. En primer lugar, necesitas obtener el valor de tu formulario cuando se env\u00ede, ya que se utilizar\u00e1 para consultar la API OpenAI.<\/p>\n<h4>Obtener Datos del Formulario<\/h4>\n<p>En React, la mejor forma de almacenar y actualizar datos es utilizar estados. En los componentes funcionales, el hook <code>useState()<\/code> se utiliza para trabajar con estados. Puedes crear un estado, asignarle el valor de tu formulario y actualizarlo cada vez que cambie su valor. Empecemos importando el hook <code>useState()<\/code> en el componente <strong>FormSection.jsx<\/strong> y, a continuaci\u00f3n, creando un estado para almacenar y actualizar <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>A continuaci\u00f3n, puedes asignar el valor del campo <code>textarea<\/code> al estado y crear un evento <code>onChange()<\/code> para actualizar el estado cada vez que cambie el valor de la entrada:<\/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>Por \u00faltimo, puedes crear un evento <code>onClick()<\/code>, para cargar una funci\u00f3n cada vez que se pulse el bot\u00f3n de env\u00edo. Este m\u00e9todo se crear\u00e1 en el archivo <strong>App.js<\/strong> y se pasar\u00e1 como props al componente <strong>FormSection.jsx<\/strong> con los valores <code>newQuestion<\/code> y <code>setNewQuestion<\/code> como argumentos.<\/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>Ahora has creado un estado para almacenar y actualizar el valor del formulario, has a\u00f1adido un m\u00e9todo que se pasa como props desde el archivo <strong>App.js<\/strong> y has gestionado el evento clic. Este es el aspecto que tendr\u00e1 el c\u00f3digo final:<\/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>El siguiente paso ser\u00e1 crear un m\u00e9todo en el archivo <strong>App.js<\/strong> para manejar todo el proceso de interacci\u00f3n con la API de OpenAI.<\/p>\n<h4>Interactuar con la API OpenAI<\/h4>\n<p>Para interactuar con la API de OpenAI y obtener claves de API en una aplicaci\u00f3n React, debes crear una cuenta de API de OpenAI. Puedes registrarte para obtener una cuenta en el sitio web de OpenAI utilizando tu cuenta de google o tu correo electr\u00f3nico. Para generar una clave API, haz clic en <strong>Personal<\/strong> en la esquina superior derecha del sitio web; aparecer\u00e1n algunas opciones; haz clic en <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=\"Acceder a las claves API de OpenAI.\" width=\"1600\" height=\"977\"><figcaption class=\"wp-caption-text\">Acceder a las claves API de OpenAI.<\/figcaption><\/figure>\n<p>Haz clic en el bot\u00f3n <strong>Create new secret key<\/strong>, copia la clave en alg\u00fan lugar ya que la vas a utiliza en esta aplicaci\u00f3n para interactuar con OpenAI. Ahora puedes proceder a inicializar OpenAI importando el paquete openai (que ya has instalado) junto con el m\u00e9todo de configuraci\u00f3n. A continuaci\u00f3n, crea una configuraci\u00f3n con tu clave generada y util\u00edzala para inicializar 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>En el c\u00f3digo anterior, la clave de la API de OpenAI se almacena como una <a href=\"https:\/\/kinsta.com\/es\/blog\/variables-de-entorno\/\">variable de entorno<\/a> en el archivo . <strong>env<\/strong>. Puedes crear un archivo . <strong>env<\/strong> en la carpeta root de tu aplicaci\u00f3n y almacenar la clave en la variable <code>REACT_APP_OPENAI_API_KEY<\/code>.<\/p>\n<pre><code>\/\/ .env\nREACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx\u2026<\/code><\/pre>\n<p>Ahora puedes proceder a crear el m\u00e9todo <code>generateResponse<\/code> en el archivo <strong>App.js<\/strong>, y pasar los dos par\u00e1metros esperados del formulario que ya has creado para gestionar la solicitud y obtener la respuesta de la 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>Ahora puedes enviar una solicitud a la API OpenAI. La API OpenAI puede realizar muchas operaciones, como preguntas y respuestas (P&#038;R), correcci\u00f3n gramatical, traducci\u00f3n y muchas m\u00e1s. Para cada una de estas operaciones, las opciones son diferentes. Por ejemplo, el valor del motor para preguntas y respuestas es <code>text-davinci-00<\/code>, mientras que para la traducci\u00f3n SQL es <code>code-davinci-002<\/code>. No dudes en consultar la <a href=\"https:\/\/platform.openai.com\/examples\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n de ejemplos de OpenAI<\/a> para ver los distintos ejemplos y sus opciones.<\/p>\n<p>Para este tutorial, vamos a trabajar s\u00f3lo con el <a href=\"https:\/\/platform.openai.com\/examples\/default-qa\">Q&#038;A<\/a>, as\u00ed es como se ve la opci\u00f3n:<\/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> He cambiado el valor del prompt.<\/p>\n<p>El prompt es la pregunta que se env\u00eda desde el formulario. Esto significa que tendr\u00e1s que recibirla de la entrada del formulario que est\u00e1s pasando al m\u00e9todo <code>generateResponse<\/code> como par\u00e1metro. Para ello, definir\u00e1s las opciones y luego utilizar\u00e1s el <a href=\"https:\/\/kinsta.com\/es\/blog\/operador-javascript-spread\/\">operador spread<\/a> para crear una opci\u00f3n completa que incluya la pregunta:<\/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>Llegados a este punto, lo que queda es enviar una petici\u00f3n a trav\u00e9s del m\u00e9todo <code>createCompletion<\/code> a OpenAI para obtener una respuesta.<\/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>En el c\u00f3digo anterior, el texto de la respuesta se mostrar\u00e1 en tu consola. Si\u00e9ntete libre de probar tu aplicaci\u00f3n haciendo cualquier pregunta. El paso final ser\u00eda crear un estado que contenga la matriz de preguntas y respuestas y luego enviar este array como prop al componente <strong>AnswerSection<\/strong>. Este es el aspecto que tendr\u00e1 el c\u00f3digo final de <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>Ahora puedes editar el componente <strong>AnswerSection<\/strong>, para que reciba el valor props de <strong>App.js<\/strong> y utilizar el m\u00e9todo JavaScript <code>Map()<\/code> para buscar en la matriz <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>Cuando ejecutes tu aplicaci\u00f3n y la pruebes haciendo preguntas, la respuesta se mostrar\u00e1 a continuaci\u00f3n. Pero te dar\u00e1s cuenta de que el bot\u00f3n de copiar no funciona. Tendr\u00e1s que a\u00f1adir un evento <code>onClick()<\/code> al bot\u00f3n, para que active un m\u00e9todo que se encargue de la funcionalidad. Puedes utilizar el m\u00e9todo <code>navigator.clipboard.writeText()<\/code> para manejar la funcionalidad. Este es el aspecto que tendr\u00e1 ahora el 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>Cuando ejecutes tu aplicaci\u00f3n, tu aplicaci\u00f3n clon de ChatGPT funcionar\u00e1 perfectamente. Ahora puedes desplegar tu aplicaci\u00f3n para acceder a ella online y compartirla con tus amigos.<\/p>\n<h2>C\u00f3mo Desplegar tu Aplicaci\u00f3n React en Kinsta<\/h2>\n<p>No basta con crear esta aplicaci\u00f3n y dejarla en tus ordenadores locales. Querr\u00e1s compartirla online, para que otros puedan acceder a ella. Veamos c\u00f3mo hacerlo utilizando <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-github\/\">GitHub<\/a> y <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinsta<\/a>.<\/p>\n<h3>Env\u00eda Tu C\u00f3digo a GitHub<\/h3>\n<p>Para <a href=\"https:\/\/kinsta.com\/es\/blog\/como-enviar-codigo-a-github\/\">enviar tu c\u00f3digo a GitHub<\/a>, puedes utilizar comandos <a href=\"https:\/\/kinsta.com\/es\/blog\/git-para-desarrollo-web\/\">Git<\/a>, que es una forma fiable y eficaz de gestionar los cambios de c\u00f3digo, colaborar en proyectos y mantener el historial de versiones.<\/p>\n<p>El primer paso para enviar tu c\u00f3digo ser\u00e1 crear un nuevo repositorio accediendo a tu cuenta de GitHub, haciendo clic en el bot\u00f3n <strong>+<\/strong> de la esquina superior derecha de la pantalla y seleccionando <strong>New repository<\/strong>\u00a0en el men\u00fa desplegable.<\/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=\"Crear un nuevo repositorio en GitHub\" width=\"1600\" height=\"770\"><figcaption class=\"wp-caption-text\">Crear un nuevo repositorio en GitHub<\/figcaption><\/figure>\n<p>Dale un nombre a tu repositorio, a\u00f1ade una descripci\u00f3n (opcional) y elige si quieres que sea p\u00fablico o privado. Haz clic en <strong>Create repository<\/strong>\u00a0para crearlo.<\/p>\n<p>Una vez creado tu repositorio, aseg\u00farate de obtener la URL del repositorio de la p\u00e1gina principal de tu repositorio, que necesitar\u00e1s para enviar tu c\u00f3digo 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=\"Accede a la URL de tu repositorio\" width=\"1600\" height=\"738\"><figcaption class=\"wp-caption-text\">Accede a la URL de tu repositorio<\/figcaption><\/figure>\n<p>Abre tu terminal o s\u00edmbolo del sistema y navega hasta el directorio que contiene tu proyecto. Ejecuta los siguientes comandos uno a uno para enviar tu c\u00f3digo a tu repositorio de 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> inicializa un repositorio Git local, <code>git add .<\/code> a\u00f1ade todos los archivos del directorio actual y sus subdirectorios al nuevo repositorio Git. <code>git commit -m \"mi primer commit\"<\/code> env\u00eda los cambios al repositorio con un breve mensaje. <code>git remote add origin [repository URL]<\/code> establece la URL del repositorio como repositorio remoto y <code>git push -u origin master<\/code> env\u00eda el c\u00f3digo al repositorio remoto (origen) en la rama maestra.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Puedes sustituir \u00abmi primer commit\u00bb por un breve mensaje tuyo que describa los cambios que has realizado y \u00ab[URL del repositorio]\u00bb por la URL de tu repositorio de GitHub. Una vez que tu c\u00f3digo haya sido enviado a GitHub, puedes desplegar tu repositorio en Kinsta.<\/p>\n<\/aside>\n\n<h3>Despliega tu Aplicaci\u00f3n ChatGPT Clone React en Kinsta<\/h3>\n<p>Para desplegar tu repositorio en Kinsta, sigue estos pasos:<\/p>\n<ol>\n<li>Inicia sesi\u00f3n o crea tu cuenta Kinsta en el panel <a href=\"https:\/\/my.kinsta.com\/?lang=es\">MyKinsta<\/a>.<\/li>\n<li>Haz clic en <strong>Aplicaciones<\/strong> en la barra lateral izquierda y luego en <strong>A\u00f1adir servicio<\/strong>.<\/li>\n<li>Selecciona <strong>Aplicaci\u00f3n<\/strong> en el men\u00fa desplegable para desplegar una aplicaci\u00f3n React en Kinsta.<\/li>\n<li>Selecciona el repositorio que deseas desplegar en el modal que aparece. Si tienes varias ramas, puedes elegir la que deseas desplegar y asignar un nombre a la aplicaci\u00f3n. Selecciona una <a href=\"https:\/\/kinsta.com\/es\/docs\/servicio-de-informacion\/ubicaciones-de-los-centros-de-datos\/#application-and-database-hosting-data-centers\">ubicaci\u00f3n de centro de datos<\/a> entre las 24 disponibles, y Kinsta detectar\u00e1 autom\u00e1ticamente un comando de inicio.<\/li>\n<li>Por \u00faltimo, no es seguro enviar claves de API a alojamientos p\u00fablicos como GitHub, se a\u00f1adi\u00f3 como una variable de entorno localmente. Cuando se aloja, tambi\u00e9n se puede a\u00f1adir como una <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">variable de entorno<\/a> utilizando el mismo nombre de variable y la clave como su valor.<\/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=\"Desplegando el clon de ChatGPT en Kinsta.\" width=\"1440\" height=\"788\"><figcaption class=\"wp-caption-text\">Desplegando el clon de ChatGPT en Kinsta.<\/figcaption><\/figure>\n<p>Tu aplicaci\u00f3n comenzar\u00e1 a desplegarse y, en unos minutos, se proporcionar\u00e1 un enlace para acceder a la versi\u00f3n desplegada de tu aplicaci\u00f3n. En este caso, se trata de <strong>https:\/\/chatgpt-clone-g9q10.kinsta.app\/ <\/strong><\/p>\n<p><strong>Nota:<\/strong> Puedes activar el despliegue autom\u00e1tico, para que Kinsta vuelva a desplegar tu aplicaci\u00f3n cada vez que cambies tu c\u00f3digo base y lo env\u00edes a GitHub.<\/p>\n\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=vmNem6wxfSQ\"><\/kinsta-video>\n<h2>Resumen<\/h2>\n<p>La API de OpenAI puede utilizarse para crear una amplia gama de aplicaciones potenciales, desde la atenci\u00f3n al cliente y los asistentes personales hasta la traducci\u00f3n de idiomas y la creaci\u00f3n de contenidos.<\/p>\n<p>En este tutorial, has aprendido a construir una aplicaci\u00f3n clon de ChatGPT con React y OpenAI. Puedes integrar esta aplicaci\u00f3n\/funci\u00f3n en otras aplicaciones para proporcionar experiencias conversacionales similares a las humanas a los usuarios.<\/p>\n<p>Hay m\u00e1s cosas que se pueden hacer con la API de OpenAI y c\u00f3mo mejorar esta aplicaci\u00f3n clon. Por ejemplo, puedes implementar el almacenamiento local para que las preguntas y respuestas anteriores no desaparezcan incluso despu\u00e9s de actualizar el navegador.<\/p>\n<p>Con la prueba gratuita de Kinsta y el <a href=\"https:\/\/sevalla.com\/pricing\/\">Nivel Hobby<\/a>, puedes empezar f\u00e1cilmente sin ning\u00fan coste en nuestro Alojamiento de Aplicaciones. As\u00ed que, \u00bfpor qu\u00e9 no lo pruebas y ves lo que puedes crear?<\/p>\n<p>Comparte tu proyecto y tus experiencias en los comentarios.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A medida que crece el uso de chatbots y asistentes virtuales, muchas empresas y desarrolladores buscan formas de crear sus propios chatbots con IA. ChatGPT es &#8230;<\/p>\n","protected":false},"author":287,"featured_media":63897,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1270],"class_list":["post-63896","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api"],"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>C\u00f3mo Construir y Desplegar una Aplicaci\u00f3n Clon de ChatGPT con React y la API OpenAI - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende c\u00f3mo construir una aplicaci\u00f3n clon de ChatGPT usando React y la API OpenAI y luego desplegarla en Kinsta en este tutorial interactivo.\" \/>\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\/es\/blog\/clon-chatgpt\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Construir y Desplegar una Aplicaci\u00f3n Clon de ChatGPT con React y la API OpenAI\" \/>\n<meta property=\"og:description\" content=\"Aprende c\u00f3mo construir una aplicaci\u00f3n clon de ChatGPT usando React y la API OpenAI y luego desplegarla en Kinsta en este tutorial interactivo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-16T07:21:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-20T13:13:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Aprende c\u00f3mo construir una aplicaci\u00f3n clon de ChatGPT usando React y la API OpenAI y luego desplegarla en Kinsta en este tutorial interactivo.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"C\u00f3mo Construir y Desplegar una Aplicaci\u00f3n Clon de ChatGPT con React y la API OpenAI\",\"datePublished\":\"2023-03-16T07:21:55+00:00\",\"dateModified\":\"2023-08-20T13:13:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/\"},\"wordCount\":3185,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/\",\"name\":\"C\u00f3mo Construir y Desplegar una Aplicaci\u00f3n Clon de ChatGPT con React y la API OpenAI - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"datePublished\":\"2023-03-16T07:21:55+00:00\",\"dateModified\":\"2023-08-20T13:13:39+00:00\",\"description\":\"Aprende c\u00f3mo construir una aplicaci\u00f3n clon de ChatGPT usando React y la API OpenAI y luego desplegarla en Kinsta en este tutorial interactivo.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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\/es\/blog\/clon-chatgpt\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Construir y Desplegar una Aplicaci\u00f3n Clon de ChatGPT con React y la API OpenAI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Construir y Desplegar una Aplicaci\u00f3n Clon de ChatGPT con React y la API OpenAI - Kinsta\u00ae","description":"Aprende c\u00f3mo construir una aplicaci\u00f3n clon de ChatGPT usando React y la API OpenAI y luego desplegarla en Kinsta en este tutorial interactivo.","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\/es\/blog\/clon-chatgpt\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Construir y Desplegar una Aplicaci\u00f3n Clon de ChatGPT con React y la API OpenAI","og_description":"Aprende c\u00f3mo construir una aplicaci\u00f3n clon de ChatGPT usando React y la API OpenAI y luego desplegarla en Kinsta en este tutorial interactivo.","og_url":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-03-16T07:21:55+00:00","article_modified_time":"2023-08-20T13:13:39+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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":"Aprende c\u00f3mo construir una aplicaci\u00f3n clon de ChatGPT usando React y la API OpenAI y luego desplegarla en Kinsta en este tutorial interactivo.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"18 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"C\u00f3mo Construir y Desplegar una Aplicaci\u00f3n Clon de ChatGPT con React y la API OpenAI","datePublished":"2023-03-16T07:21:55+00:00","dateModified":"2023-08-20T13:13:39+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/"},"wordCount":3185,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/","url":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/","name":"C\u00f3mo Construir y Desplegar una Aplicaci\u00f3n Clon de ChatGPT con React y la API OpenAI - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","datePublished":"2023-03-16T07:21:55+00:00","dateModified":"2023-08-20T13:13:39+00:00","description":"Aprende c\u00f3mo construir una aplicaci\u00f3n clon de ChatGPT usando React y la API OpenAI y luego desplegarla en Kinsta en este tutorial interactivo.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/clon-chatgpt\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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\/es\/blog\/clon-chatgpt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/es\/secciones\/api\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Construir y Desplegar una Aplicaci\u00f3n Clon de ChatGPT con React y la API OpenAI"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/63896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=63896"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/63896\/revisions"}],"predecessor-version":[{"id":69015,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/63896\/revisions\/69015"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/63896\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/63896\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/63896\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/63896\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/63896\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/63896\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/63896\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/63896\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/63896\/translations\/dk"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/63896\/translations\/pt"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/63896\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/63897"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=63896"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=63896"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=63896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}