Cómo crear un chatbot de atención al cliente para una aplicación o sitio web NextJS

Muchos desarrolladores utilizan actualmente NextJS porque es SEO-friendly y permite desarrollar más rápido. Con NextJS, obtienes:

1. Características esenciales como Server Side Rendering (SSR), regeneración estática incremental (ISR) y rutas API integradas.
2. Actualizaciones en tiempo real mientras codificas.
3. Protección de datos porque NextJS protege los datos sensibles en el lado del servidor.

NextJS también se encarga directamente de tareas como la obtención de datos y el enrutamiento para que puedas centrarte en el desarrollo de las funciones principales.

Viendo su funcionalidad, en Kommunicate también hemos creado un chatbot NextJS AI. Al igual que NextJS ayuda a los desarrolladores a eliminar los bloqueos en su función, los chatbots de IA ayudan a los equipos de atención al cliente a ser más eficientes.

Por eso, en este post, te ayudaremos a crear un chatbot de atención al cliente empresarial para tu sitio web NextJS. Lo haremos paso a paso para que puedas seguirlo sin experiencia en codificación.

Requisitos previos

Hay algunas cosas que necesitas tener en tu ordenador antes de empezar:

• Node.js y NPM (Puedes encontrar el instalador en el sitio web de Node.js).
• Un editor de código de tu elección (yo estoy usando Visual Studio Code).
• Una cuenta Kommunicate (Puedes empezar registrándote (¡Es gratis!)).

La instalación se realiza en dos fases

Vamos a seguir dos grandes pasos para esta instalación:

1. Creación de un chatbot AI con Kommunicate
2. Integrarlo con NextJS

Fase 1: Creación de un Chatbot de IA con Kommunicate

Para empezar a crear un Chatbot NextJS AI, debes registrarte en Kommunicate. Puedes hacerlo desde nuestro Dashboard.

1. Navega a la sección Bots

• Al abrir Kommunicate, estarás en el Dashboard.
• Para crear nuestro chatbot AI, haga clic en el icono Bot en el lado izquierdo (A).

2. Ve a la página de integraciones de bots

• Si ya utiliza un bot de Kommunicate, accederás a la página Administrar bots.
• Para crear un nuevo chatbot, ve a la página Bot Integrations (A).

3. Selecciona el modelo de IA con el que desea entrenar tu chatbot de IA

• Cuando te desplaces hacia abajo, verás una lista de modelos de IA que puedes utilizar para crear un chatbot.
• Para este tutorial, vamos a utilizar los modelos Claude de Anthropic (A)

4. Describir los parámetros

• Selecciona el máximo de tokens (o palabras) (A) que tu chatbot de IA utilizará al responder. Lo mantendremos en 1000.
• Selecciona la Temperatura (B) del modelo de IA que se utilizará. Una temperatura más alta indica que el modelo dará respuestas más creativas. Dado que estamos construyendo un chatbot NextJS basado en hechos y preciso, estableceremos esto como 0.
• Para continuar, haz clic en Guardar y continuar (C ).

5. Selecciona un avatar para tu chatbot

• Dale a tu chatbot el nombre que prefieras; nosotros utilizaremos Credit Bot (A).
• Puedes utilizar uno de nuestros avatares predefinidos o subir tu propio avatar para tu chatbot de IA (B).
• Cuando estés satisfecho con el aspecto de tu chatbot, haz clic en Guardar y continuar (C ).

6. Elige si deseas activar el pase o no a un agente humano

• La función de traspaso chatbot-humano te permite tomar el control de una conversación cuando el chatbot no responde.
• Puedes activar esta función seleccionando «Sí, activar esta función». (A)
• Cuando hayas terminado, finaliza la edición haciendo clic en «Finalizar configuración del bot». (C )

7. ¡Enhorabuena! Has configurado tu Chatbot

• Aparecerá esta pantalla una vez que hayas configurado el bot.
• Selecciona «Lo configuraré más tarde» (A), y serás redirigido al entrenamiento del bot.

8. Configuración de la intención de bienvenida

• ¿Con qué debería empezar la conversación tu chatbot? Colócalo en el cuadro de texto en (A).
• Verás cómo quedará en el chatbot de prueba (B).
• Haz clic en Train Bot en el botón para entrenar al chatbot.

9. Dar a tu chatbot toda la información necesaria

• Navega hasta Knowledge Source en la parte izquierda del menú.
• Haz clic en la pestaña URL en la parte superior de la navegación. Introduzca la URL del sitio web que desea entrenar al chatbot dentro del cuadro de texto en (A).
• Haz clic en Añadir (B).
• Se abrirá el mapa del sitio web y podrás seleccionar las URL específicas de las que puede aprender el chatbot.

10. Establecer conversaciones (Intents)

• Ve a Intentos en la parte izquierda del Menú.
• Introduce las diferentes variaciones de una pregunta concreta. Recuerda que así es como se entrenará tu IA. Por lo tanto, más variaciones de las preguntas es mejor. Usa el botón (A) para añadir pistas y (B) para editar o borrar pistas.
• Una vez que hayas configurado las preguntas, puedes configurar la respuesta del Chatbot en Bot Dice (C ).

• Configura la respuesta que el chatbot debe dar en el cuadro de texto (A).
• Puedes optar por asignar esta conversación más adelante haciendo clic en Más+ y transferir automáticamente la conversación a uno de tus compañeros.
• Haz clic en Entrenar Bot para entrenar al chatbot.
• Haz clic en Probar chatbot para ver si el chatbot responde correctamente a las preguntas.

Ahora que tienes un chatbot entrenado y listo para responder preguntas, vamos a integrarlo con NextJS.

Fase 2: Integración de AI Chatbot con NextJS

1. Creación del componente Kommunicate Chatbot

• En la carpeta Components de la carpeta App, crea un archivo llamado KommunicateChat.js.
• Introdue el siguiente código en el nuevo archivo. Recuerda reemplazar el AppID dado con su AppID Kommunicate (Puede encontrarlo en INSTALL en Settings)

'use client';
import { useEffect } from 'react';
const KommunicateChat = () => {
  useEffect(() => {
    (function(d, m) {
      var kommunicateSettings = {
        "appId": "2ac6c5f9ec65dffb483de1e869fa2628f",
        "popupWidget": true,
        "automaticChatOpenOnNavigation": true
      };
      
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
      var h = document.getElementsByTagName("head")[0];
      h.appendChild(s);
      
      window.kommunicate = m;
      m._globals = kommunicateSettings;
    })(document, window.kommunicate || {});
  }, []);
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
};
export default KommunicateChat;

2. Añadir el componente a una página

Navega hasta el documento page.js en la carpeta de tu aplicación e introduzca el siguiente código:

import KommunicateChat from './KommunicateChat';
export default function Page() {
  return (
    <main>
      <KommunicateChat />
    </main>
  );
}

3. Prueba el Chatbot en acción

• Ejecuta tu aplicación introduciendo el siguiente código en el terminal:

npm run dev

Visita http://localhost:3000 para probar tu chatbot.

¡Ahí lo tienes! ¡Un chatbot en tu propio sitio web NextJS!

Conclusión

Crear un chatbot de IA en NextJS con Claude lleva menos de 10 minutos. Sólo tienes que entrenar a tus chatbots con Kommunicate, ¡y estarás listo para implementar tu chatbot de atención al cliente en un abrir y cerrar de ojos!

Teniendo en cuenta la popularidad de NextJS, creemos que este chatbot beneficiará a cualquiera que cree una webapp o sitio web con el framework.

Si quieres un soporte de IA de última generación para tu sitio web basado en NextJS. ¡Habla con nosotros!