Como Crear Un ChatGPT Con React y Clouding

7 minuto(s)

Demo Github

En la actualidad la Inteligenciar Artificial que va de la mano con el Machine Learning (Aprendizaje automático), ya que una inteligencia artificial necesita aprender para poder actuar, nos puede facilitar las cosas en esta vida compleja. No solo nos puede ayudar a los desarrolladores, sino también a las demás personas de otras áreas. Te has preguntado algunas ves ¿ Como Crear mi propio ChatGPT de la misma empresa OpenAI ?, esa una pregunta interesante, en este Post te enseñaré a Como Crear Un ChatGPT Con React y Clouding, vamos con ello.

Inteligencia Artificial
La Inteligencia Artificial mejora varios aspectos de las vidas de los usuarios

Como Crear Tu Propio ChatGPT Con React y Clouding

Primero vamos a crear un nuevo proyecto con React JS.

Nuevo Proyecto con React

Abrimos nuestra consola de comandos y ejecutamos el siguiente comando:


En el comando anterior puedes ver que le he puesto de nombre michatgpt a mi proyecto, tu le puedes poner el nombre que desees, no hay problema.

Una ves que React ha terminado de crear el proyecto, me ha generado un conjunto de archivos y directorios indispensables para que el proyecto funcione correctamente:


Para poder usar la API de OpenAI debemos obtener nuestra API KEY.

Obtener Una API KEY de OpenAI

Para no extender mucho el tutorial y enfocarnos en crear el proyecto, sigue el siguiente tutorial. Para obtener una API Key de OpenAI sigue los pasos del artículo Como Obtener Una API KEY de OpenAI ChatGPT:

Una ves que ya tengas tu API Key, puedes continuar con los siguientes pasos, no hay problema.

Bien, para mantener las buenas prácticas de un desarrollo de software seguro y profesional, vamos a crear un archivo .env en donde colocaremos nuestra API Key de OpenAI, este archivo lo creamos en el directorio principal del proyecto:


Abro el archivo .env y le agrego lo siguiente:


Lo que estamos haciendo es aislar nuestra API KEY y no exponerla publicamente en el archivo en donde crearemos el código del proyecto, es una mala práctica hacerlo, ya que otros usuarios podrias usar tu API KEY y gastar su cuota de uso.

Ahora abro el archivo App.js que se encuentra en michatgtpia > src > App.js


Dentro del archivo App.js comenzamos importando lo siguiente, entre las importaciones importo la dependencia de OpenAI que instalaremos mas adelante:


Dentro de nuestra función App() agregamos lo siguiente (He colocado comentarios para explicar que hacen las partes importantes del código):


A continuación, el código completo del archivo App.js:


Ya casi lo tenemos listo, solo nos faltaría instalar la dependencia de OpenAI,  lo cual haremos a continuación.

Dependencia NPM de OpenAI

Mediante esta dependencia podemos acceder a los servicios de OpenAI, en este caso a su servicio ChatGPT. En mi consola de comandos ejecuto el siguiente comando, para instalar la dependencia NPM de OpenAI:


Entonces si ejecutamos el servidor local de React:


Automaticamente React abre el navegador en la ruta http://localhost:3000, si no te abre, puedes ingresar directamente a esa ruta y podemos ver nuestro ChatGPT:

Le puede realizar cualquier consulta, tal cual como lo hariamos desde la misma página de ChatGPT (OpenAI), por ejemplo le pido la Receta de Tallarines Rojos:

Todo bien y todo bonito, pero solo lo puedo ver yo, como que no tiene sentido, si bien aprendemos a crear nuestro propio ChatGPT, pero ¿ Porque no Compartirlo con los Demás ? 

Pasando a Producción

Estuve buscando un servidor que me brinde rapidez para publicar un proyecto, ya que en el mundo actual el tiempo se pasa volando y necesitamos manejar las cosas lo mas rápido posible, encontré varias alternativas con buenos precios, opte por Clouding, básicamente me gusta la rapidez con la que puedo montar mi proyecto y la seguridad que me brinda.

Algo que no he visto en otras plataformas de VPS potentes pero con un buen precio es que nos crea automáticamente nuestras claves SSH de seguridad, la cual puedes usarlas para conectar por ejemplo tu FPT como Filezilla para subir los archivos de tu proyecto a su servidor:

Al momento de crear tu servidor puedes decirle a Clouding que cree las SSH Keys automáticamente, de esta manera te olvidas de configurarlas por tu cuenta.

Asimismo cuando creas el servidor lo haces en menos de 1 minuto. Como te mencione anteriormente la rapidez y seguridad que nos brinda Clouding es increible, no he visto otras plataformas que sean asi de dinámicas.

En el siguiente enlace puedes ver el proyecto de ChatGPT publicado en Clouding: http://93.189.94.31/ (También he colocado una Demo al inicio de este tutorial). 

Y si quieres ver como subí mi proyecto a Clouding de manera rápida y segura, sigue el siguiente video COMO CREAR TU PROPIO CHATGPT CON REACT Y CLOUDING:

Clouding es una plataforma lista para subir proyectos de Inteligencia Artificial como el que te comparti en el enlace anterior. Por cierto hasta la fecha de este Post “estan regalando €5 por solo registrarse”, que mas podemos pedir, es una buena plataforma que piensa en nuestros bolsillos:

También he visto que la mayoría de precios de otras plataformas estan desde los $5 hacia arriba y Clouding nos ofrece planes desde los 3€:

Asi que si quieres comenzar un proyecto nuevo en donde tengas precios comodos y te den seguridad y rapidez para publicarlo, Clouding es una buena opción. 

Conclusión

En este tutorial hemos aprendido a crear nuestro propio ChatGPT haciendo uso de la misma tecnología de ChatGPT de OpenAI. Conociendo como crearlo te ayudará a crear proyectos más avanzados o complejos con Inteligencia Artificial.

Nota (s)

  • Al inicio de este tutorial he colocado una Demo para que veas el proyecto en acción y un enlace al código fuente del proyecto alojado en un repositorio de GitHub para que lo descargues y uses en tus proyectos.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.