Crea un chatbot con la API ChatGPT en React (Tutorial gpt-3.5-turbo)

Tabla de contenidos

1. Introducción
2. Configuración del proyecto
3. Creación de la interfaz de chat
4. Enviando mensajes y procesando respuestas
5. Agregando funcionalidad de indicador de escritura
6. Estableciendo conexión con la API de chat GPT
7. Formateo de mensajes para la API
8. Recibiendo y mostrando respuestas de la API
9. Personalizando el comportamiento de chat GPT
10. Conclusiones

Creando un chatbot con la API de chat GPT

¡Hola amigos! En este video vamos a construir un chatbot utilizando la nueva API de chat GPT. Con esta API, podremos hacerle preguntas al chatbot y obtener respuestas en tiempo real. Este proyecto es una excelente introducción para aquellos que deseen utilizar esta API en aplicaciones de React.

1. Introducción

El chatbot que vamos a crear utilizará el modelo GPT 3.5 turbo, el cual es más económico que las versiones anteriores. Esto significa que ahora es mucho más accesible agregar inteligencia artificial a nuestras aplicaciones de React.

2. Configuración del proyecto

Para empezar, necesitamos crear una nueva aplicación utilizando Create React App. Podemos hacerlo ejecutando el siguiente comando en nuestro terminal:

npm create-react-app chatbot-app

A continuación, instalaremos el paquete @chat-ui/kit-react, el cual nos permitirá construir fácilmente la interfaz de chat de nuestro chatbot. Ejecutamos el siguiente comando para instalarlo:

npm install @chat-ui/kit-react

3. Creación de la interfaz de chat

Ahora que tenemos nuestra aplicación configurada, vamos a construir la interfaz de chat. En el archivo App.jsx, eliminaremos el código existente y añadiremos el siguiente código:

import React from 'react';
import { MainContainer, ChatContainer, MessageList, Message, MessageInput, TypingIndicator } from '@chat-ui/kit-react';

function App() {
  return (
    <div className="app">
      <MainContainer>
        <ChatContainer>
          <MessageList>
            {/* Aquí se mostrarán los mensajes */}
          </MessageList>
          <MessageInput placeholder="Escribe un mensaje..." onSend={() => {/* Lógica para enviar el mensaje */}} />
        </ChatContainer>
      </MainContainer>
    </div>
  );
}

export default App;

En este código, hemos importado los componentes necesarios del paquete @chat-ui/kit-react y los hemos añadido en la estructura de nuestra aplicación. A continuación, vamos a implementar la lógica para enviar mensajes.

4. Enviando mensajes y procesando respuestas

Para enviar un mensaje y obtener una respuesta del chatbot, debemos implementar la función handleSend en nuestro componente App. Esta función se ejecutará cuando el usuario envíe un mensaje.

import React, { useState } from 'react';
// ...

function App() {
  const [messages, setMessages] = useState([
    { message: 'Hola, soy un chatbot', sender: 'chatbot' }
  ]);

  const handleSend = async (message) => {
    const newMessage = { message, sender: 'user' };
    setMessages([...messages, newMessage]);

    // Lógica para enviar el mensaje a la API y procesar la respuesta
    // ...
  };

  return (
    <div className="app">
      {/* ... */}
      <MessageInput placeholder="Escribe un mensaje..." onSend={handleSend} />
    </div>
  );
}

export default App;

En este código, hemos agregado el estado messages utilizando el hook useState. El estado inicial contiene un mensaje de bienvenida del chatbot. También hemos creado la función handleSend, que se encargará de agregar el nuevo mensaje al estado y enviarlo a la API para obtener una respuesta.

5. Agregando funcionalidad de indicador de escritura

Una funcionalidad interesante que podemos agregar es un indicador de escritura, para que el usuario sepa cuando el chatbot está redactando una respuesta. Para esto, debemos agregar un nuevo estado llamado typing y actualizarlo cuando el chatbot esté procesando una respuesta.

import React, { useState } from 'react';
// ...

function App() {
  const [messages, setMessages] = useState([
    { message: 'Hola, soy un chatbot', sender: 'chatbot' }
  ]);
  const [typing, setTyping] = useState(false);

  const handleSend = async (message) => {
    const newMessage = { message, sender: 'user' };
    setMessages([...messages, newMessage]);
    setTyping(true);

    // Lógica para enviar el mensaje a la API y procesar la respuesta
    // ...

    setTyping(false); // Indicar que el chatbot ha terminado de escribir
  };

  return (
    <div className="app">
      {/* ... */}
      {typing && <TypingIndicator />}
      <MessageInput placeholder="Escribe un mensaje..." onSend={handleSend} />
    </div>
  );
}

export default App;

En este código, hemos agregado el estado typing utilizando el hook useState. Cuando enviamos un mensaje, establecemos typing en true para mostrar el indicador de escritura. Luego, después de procesar la respuesta de la API, establecemos typing en false para indicar que el chatbot ha terminado de escribir.

6. Estableciendo conexión con la API de chat GPT

Ahora es el momento de establecer la conexión con la API de chat GPT. Para esto, necesitaremos generar una clave de API en la plataforma de OpenAI. Luego, podemos utilizar esta clave para hacer llamadas a la API.

import React, { useState } from 'react';
// ...

const API_KEY = 'API_KEY_GENERADA';

function App() {
  // ...

  const handleSend = async (message) => {
    // ...

    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer ' + API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        'messages': [...messages, newMessage].map((m) => ({ 'role': m.sender === 'user' ? 'user' : 'assistant', 'content': m.message }))
      })
    });

    const data = await response.json();
    console.log(data);

    // ...
  };

  return (
    <div className="app">
      {/* ... */}
    </div>
  );
}

export default App;

En este código, hemos definido la constante API_KEY y la hemos proporcionado con la clave de API generada en la plataforma de OpenAI. Luego, en la función handleSend, hacemos una llamada a la API utilizando fetch, pasando la clave de API en los headers y los mensajes en el cuerpo de la solicitud.

7. Formateo de mensajes para la API

Antes de enviar los mensajes a la API, necesitamos formatearlos correctamente. La API de chat GPT espera una estructura específica para los mensajes, con las propiedades role y content. Para Ello, debemos realizar una transformación sobre los mensajes creados por el usuario.

import React, { useState } from 'react';
// ...

function App() {
  // ...

  const handleSend = async (message) => {
    // ...

    const formattedMessages = [...messages, newMessage].map((m) => {
      if (m.sender === 'user') {
        return { role: 'user', content: m.message };
      } else {
        return { role: 'assistant', content: m.message };
      }
    });

    // ...

    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer ' + API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        'messages': formattedMessages
      })
    });

    // ...
  };

  return (
    <div className="app">
      {/* ... */}
    </div>
  );
}

export default App;

En este código, hemos añadido la variable formattedMessages, que es un nuevo array con los mensajes formateados correctamente. Si el remitente del mensaje es el usuario, establecemos el role en 'user'; de lo contrario, lo establecemos en 'assistant'. Luego, pasamos formattedMessages en el cuerpo de la llamada a la API.

8. Recibiendo y mostrando respuestas de la API

Una vez que hemos enviado los mensajes a la API, podemos recibir y mostrar las respuestas en nuestra interfaz de chat. Para ello, hacemos uso de la respuesta de la API y actualizamos el estado messages con la nueva respuesta.

import React, { useState } from 'react';
// ...

function App() {
  const [messages, setMessages] = useState([
    { message: 'Hola, soy un chatbot', sender: 'chatbot' }
  ]);
  // ...

  const handleSend = async (message) => {
    // ...

    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      // ...
    });

    const data = await response.json();
    const reply = data.choices[0].message.content;

    const newMessage = { message: reply, sender: 'chatbot' };
    setMessages([...messages, newMessage]);
    setTyping(false);
  };

  return (
    <div className="app">
      <MessageList messages={messages} />
      {/* ... */}
    </div>
  );
}

export default App;

En este código, hemos añadido la respuesta de la API en la variable reply. Luego, creamos un nuevo mensaje con esta respuesta y lo agregamos al estado messages utilizando setMessages. Finalmente, actualizamos el estado typing a false para indicar que el chatbot ha terminado de escribir.

9. Personalizando el comportamiento de chat GPT

Una característica interesante de la API de chat GPT es que podemos personalizar el comportamiento del chatbot proporcionando una Frase inicial de contexto. Esto nos permite especificar cómo queremos que el chatbot responda en función de ese contexto.

import React, { useState } from 'react';
// ...

function App() {
  // ...

  const handleSend = async (message) => {
    // ...

    const systemMessage = { role: 'system', content: 'Explícame todos los conceptos como si tuviera 10 años' };

    const formattedMessages = [systemMessage, ...messages, newMessage].map((m) => {
      if (m.sender === 'user') {
        return { role: 'user', content: m.message };
      } else {
        return { role: 'assistant', content: m.message };
      }
    });

    // ...

    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      // ...
    });

    // ...
  };

  return (
    <div className="app">
      {/* ... */}
    </div>
  );
}

export default App;

En este código, hemos definido una nueva variable systemMessage que contiene una frase inicial de contexto. Esta frase le indica a chat GPT que responda como si estuviera hablando con alguien de 10 años. Luego, agregamos este mensaje al principio de formattedMessages para asegurarnos de que siempre esté presente.

10. Conclusiones

En resumen, hemos creado un chatbot utilizando la API de chat GPT de OpenAI. Aprendimos cómo configurar el proyecto, crear la interfaz de chat, enviar mensajes y procesar respuestas de la API. También hemos agregado funcionalidades adicionales, como el indicador de escritura y la personalización del comportamiento de chat GPT.

Espero que este proyecto haya sido útil y divertido de realizar. El código completo está disponible en [reemplace_con_url_del_repositorio]. Si tienes alguna pregunta, no dudes en dejar un comentario. ¡Buena suerte con tu chatbot!