Cómo Crea un chatbot en React JS como un profesional

Ya sea para reservar citas, preguntas frecuentes o recomendaciones de productos, casi cualquier sitio web podría beneficiarse de un agente de IA o chatbot.

Y lo están haciendo. Dado que los chatbots son el canal de comunicación de más rápido crecimiento para las marcas, no hay mejor momento que el presente para entrar en acción.

Entonces, ¿cómo encadenar todos estos componentes? Además de React, tienes que preocuparte por tu proveedor de LLM , los marcos de agentes de IA y, de alguna manera, empaquetar todo eso en componentes de interfaz de usuario con los que tus visitantes puedan interactuar.

La buena noticia es que las plataformas de chatbot te tienen cubierto. En esta guía te daré los pasos para:

• Crea un chatbot personalizado
• Crear un sitio web con Next.js y React
• Integra tu chatbot en el front-end de React
• Personalizar el estilo de la interfaz de usuario del chatbot

Con poco esfuerzo, tendrás un chatbot profesional y de alto rendimiento integrado a la perfección en tu sitio React.

Por cierto, puedes saltarte el tutorial y consultar el código.

2. Crea un chatbot

Pasemos a la primera gran pieza del rompecabezas: el chatbot.

Para crear un bot, ve al estudio y haz clic en Crear Bot +.

Definir un propósito ayuda, pero no hace falta tener una idea especialmente desarrollada. Es casi seguro que su empresa tiene documentos de política, preguntas frecuentes o un catálogo de productos. Un simple chatbot con acceso a esta información podría liberarte de mucho tiempo que dedicas a responder preguntas repetitivas.

En mi caso, construiré un sumiller digital: un bot que asesore a los usuarios sobre los vinos que deben comprar, guiado por un catálogo de vinos externo.

Definir el flujo

Independientemente de lo que haga, tu bot necesitará un flujo. Esta es la lógica que determina el comportamiento del bot. 

En el estudio, pulsa Flujos de trabajo en el panel izquierdo.

No tiene por qué ser complicado. Un único nodo autónomo con acceso a tus documentos (es decir, el bot por defecto) puede ser sumamente eficaz.

Es importante dar instrucciones al robot. Esto incluye:

• La personalidad que desea que adopte, por ejemplo, cortés, amistoso o que refleje el tono del usuario.
• Formas de empezar o terminar el mensaje
• Cómo responder a preguntas concretas
• Documentos de referencia

Añadir la base de conocimientos

Esta es la información en la que se basará el bot para la RAG (retrieval-augmented generation), o para elaborar sus respuestas a tus datos. Esto es relativamente sencillo, pero merece la pena aprender a optimizar tus archivos para obtener la mejor RAG posible.

Wynona, mi sumiller(-ère) digital tiene acceso a una lista de vinos. No es más que un subconjunto del conjunto de datos de Wine Reviews: una lista de vinos con sus regiones y notas de cata.

Despliegue

Una vez que estés satisfecho con tu bot, pulsa Publicar en el estudio y tu bot estará activo.

Esto hace que esté disponible para su integración en todo tipo de canales de comunicación, como WhatsAppTelegram, y en aplicaciones web, como la que estamos construyendo.

2. Crear una aplicación React

Tenemos nuestro chatbot, pero necesita un hogar, así que vamos a construir una rápida aplicación React donde los usuarios puedan interactuar con el bot.

Ten en cuenta que usaré Next.js. Creo que es más relevante y completo que el simple React, y este tutorial cubrirá todo el terreno que los usuarios de React necesitan.

Ejecutar crear-siguiente-app

Corre:

npx crear-siguiente-app@14

Notarás que estoy usando Next.js 14. La razón es que necesitamos React 18 para hacer nuestra aplicación compatible con chatbot. Ejecutar con @latest construirá con Next.js 15 y React 19. Ejecutar el comando anterior es la forma más fácil de asegurarse de que ejecuta la versión correcta de React, y que Next es compatible.

Establecer la configuración de la aplicación

Se te harán una serie de preguntas. Yo personalmente me quedo con la configuración por defecto, que es lo que voy a hacer para este tutorial.

Suponiendo que todo vaya bien, verás el registro de éxito.

3. Integra tu chatbot en tu aplicación React

Es hora de hacer que nuestras Barbies se besen.

Consigue el Botpress React Boilerplate

Para integrar el chatbot en nuestra app, necesitaremos:

• Nuestro cliente ID
• Los componentes preconstruidos de webchat React.

Botpress tiene código boilerplate que incluye ambos. Para conseguirlo:

• Navega hasta el estudio y haz clic en Compartir en la esquina superior derecha.
• En la parte inferior derecha de la ventana emergente, haga clic en Configurar

• Haga clic en la pestaña React de la parte superior derecha.
• Aquí encontrarás el boilerplate Botpress , incluyendo el comando de instalación un ID de cliente

Por cierto, si alguna vez necesitas acceder rápidamente a tu ID de cliente:

• Vaya a su panel deBotpress
• Seleccione Webchat en el panel lateral
• Haga clic en Configuración avanzada

Es una buena práctica almacenar esto en una variable de entorno, pero lo mantendremos en el componente por ahora.

Cree un componente de Chat en su aplicación

En el directorio de mi proyecto, voy a crear un archivo chat.tsx.

A continuación, rellénalo con el código para el cliente del chatbot:

"use client"
import { useState } from 'react';


import {
   Webchat,
   WebchatProvider,
   Fab,
   getClient,
   Configuration,
} from '@botpress/webchat';


const clientId = "";


const configuration: Configuration = {
   color: '#000',
};


export default function Chat() {
   const client = getClient({
       clientId,
   });


   const [isWebchatOpen, setIsWebchatOpen] = useState(false);


   const toggleWebchat = () => {
       setIsWebchatOpen((prevState) => !prevState);
   };


   return (
       <div
           style={{
               position: 'fixed',
               display: 'flex',
               flexDirection: 'column',
               bottom: 0,
               right: 0,
               alignItems: 'flex-end',
               gap: '12px',
               padding: '24px', // give some breathing room
               zIndex: 9999,
           }}
       >
           <WebchatProvider client={client} configuration={configuration}>


               <div
                   style={{
                       // position: '',
                       marginTop: '12px',
                       marginBottom: '72px',
                       width: '350px',
                       maxHeight: '500px',
                       overflow: 'scroll',
                       borderRadius: '16px',
                       backgroundColor: '#fff',
                       transform: isWebchatOpen ? 'scale(1)' : 'scale(0)',
                       transformOrigin: 'bottom right',
                       transition: 'transform 0.3s ease-in-out',
                   }}
               >
                   <Webchat />
               </div>
               <Fab onClick={toggleWebchat} style={{ position: 'absolute', bottom: '24px', right: '24px' }} />
           </WebchatProvider>
       </div>
   );
}

Este es el código botpress con algunos ajustes notables:

• "usar cliente" en la parte superior, para componentes que se ocupan de la gestión de estados
• Cambiar el nombre de la función de App a Chat
• Algunos estilos

Ahora navega hasta app/página.tsx e importarlo justo encima del pie de página:

import Image from "next/image";
import styles from "./page.module.css";
import Chat from "./chat";


export default function Home() {
 return (
   <div className={styles.page}>
     <main className={styles.main}>
      
       <Image
         className={styles.logo}
         src="https://nextjs.org/icons/next.svg"
         alt="Next.js logo"
         width={180}
         height={38}
         priority
       />
       <ol>
         <li>
           Get started by editing <code>app/page.tsx</code>.
         </li>
         <li>Save and see your changes instantly.</li>
       </ol>


       <div className={styles.ctas}>
         <a
           className={styles.primary}
           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
         >
           <Image
             className={styles.logo}
             src="https://nextjs.org/icons/vercel.svg"
             alt="Vercel logomark"
             width={20}
             height={20}
           />
           Deploy now
         </a>
         <a
           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
           className={styles.secondary}
         >
           Read our docs
         </a>
       </div>
      
     </main>
     <Chat/>
     <footer className={styles.footer}>
       <a
         href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/file.svg"
           alt="File icon"
           width={16}
           height={16}
         />
         Learn
       </a>
       <a
         href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/window.svg"
           alt="Window icon"
           width={16}
           height={16}
         />
         Examples
       </a>
       <a
         href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/globe.svg"
           alt="Globe icon"
           width={16}
           height={16}
         />
         Go to nextjs.org →
       </a>
     </footer>
   </div>
 );
}

Ahora puede ejecutar npm run dev en un terminal del directorio del proyecto para ejecutarlo en un servidor local.

Potenciar una aplicación React con un chatbot

Con los frameworks web de alto rendimiento, estarás demasiado ocupado con la funcionalidad principal como para preocuparte por los complementos.

Botpress viene con componentes pre-construidos, un constructor visual de arrastrar y soltar, y personalizable de arriba a abajo. La integración sencilla no va en detrimento del rendimiento. 

Si estás construyendo con React, entonces buscas calidad. Tu chatbot debe reflejarlo.

Empieza a construir hoy mismo. Es gratis.

Preguntas frecuentes

1. ¿Puedo desplegar este chatbot en producción?

Sí, puedes desplegar el chatbot a producción después de publicarlo en Botpress Studio e incrustarlo en tu aplicación React. Una vez incrustado, puedes desplegar toda la aplicación utilizando plataformas como Vercel o cualquier proveedor de alojamiento que admita tu stack tecnológica.

2. ¿Puedo personalizar el aspecto de la interfaz de usuario del chatbot?

Sí, puedes personalizar completamente el aspecto de la interfaz de usuario del chatbot utilizando el componente Botpress Webchat . Admite accesorios para los colores, el tamaño, la colocación y el estilo, y puedes anular los estilos predeterminados con CSS personalizado para que coincida con el diseño de tu marca.

3. ¿Necesito definir un bot persona y cómo afecta a las conversaciones?

Sí, definir un bot persona es importante porque guía la forma en que el chatbot se comunica, incluido el tono y la redacción. Esto garantiza que la conversación se ajuste a la voz de tu marca y mejora la confianza del usuario.

4. ¿Para qué sirve un flujo de chatbot y cómo se define?

El propósito de un flujo de chatbot es controlar la lógica de cómo el bot responde a los usuarios. En Botpress, los flujos se definen visualmente en la pestaña "Flujos de trabajo" utilizando nodos para acciones, mensajes, condiciones y transiciones.

5. ¿Puedo utilizar mis documentos existentes (por ejemplo, preguntas frecuentes o catálogos de productos) para entrenar al bot?

Sí, puedes cargar documentos existentes, como preguntas frecuentes o manuales, en la base de conocimientos Botpress . El bot utiliza la generación aumentada por recuperación (RAG) para responder a las preguntas extrayendo la información relevante directamente de esos documentos.