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

Ya sea para reservar citas, responder preguntas frecuentes o recomendar productos, casi cualquier sitio web puede beneficiarse de un Agente de IA o chatbot.

Y así es. Los chatbots son el canal de comunicación de mayor crecimiento para las marcas, así que este es el mejor momento para sumarte.

¿Cómo unir todas estas piezas? Además de React, tienes que elegir tu proveedor de LLM, frameworks de agentes de IA y empaquetar todo en componentes de interfaz con los que tus visitantes puedan interactuar.

La buena noticia es que las plataformas de chatbots ya resuelven esto. En esta guía te mostraré cómo:

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

Con poco esfuerzo, tendrás un chatbot profesional y eficiente integrado perfectamente en tu sitio React.

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

2. Crea un chatbot

Vamos con la primera parte importante: el chatbot.

Para crear un bot, ve al studio y haz clic en Create Bot +.

Ayuda definir un propósito, pero no necesitas una idea muy desarrollada. Seguramente tu empresa ya tiene documentos de políticas, preguntas frecuentes o un catálogo de productos. Un chatbot sencillo con acceso a esta información puede ahorrarte mucho tiempo respondiendo preguntas repetitivas.

En mi caso, voy a crear un sumiller digital: un bot que aconseja a los usuarios sobre qué vinos comprar, usando un catálogo externo de vinos.

Define el flujo

Haga lo que haga tu bot, necesitará un flujo. Es la lógica que determina su comportamiento.

En el studio, haz clic en Workflows en el panel izquierdo.

No tiene que ser complicado. Un solo nodo autónomo con acceso a tus documentos (es decir, el bot por defecto) puede ser muy eficaz.

Es importante darle instrucciones al bot. Esto incluye:

• La personalidad que debe adoptar, por ejemplo: educado, amistoso o que refleje el tono del usuario
• Formas de iniciar o terminar el mensaje
• Cómo responder a ciertas preguntas
• A qué documentos debe recurrir y cuándo

Agrega la base de conocimientos

Esta es la información que el bot utilizará para RAG (generación aumentada por recuperación), es decir, adaptar sus respuestas a tus datos. Es sencillo, pero vale la pena aprender cómo optimizar tus archivos para obtener el mejor RAG posible.

Wynona, mi sumiller digital, tiene acceso a una lista de vinos. Es solo una parte del conjunto de datos Wine Reviews: una lista de vinos con sus regiones y notas de cata.

Publicar

Cuando estés satisfecho con tu bot, haz clic en Publish en el studio y tu bot estará en línea.

Esto lo hace disponible para integrarlo en todo tipo de canales de comunicación, como WhatsApp, Telegram y aplicaciones web, como la que estamos creando.

2. Crea una app en React

Ya tenemos el chatbot, pero necesita un lugar donde vivir, así que vamos a crear rápidamente una app en React para que los usuarios interactúen con el bot.

Ten en cuenta que usaré Next.js. Me parece más relevante y completo que React puro, y este tutorial cubrirá todo lo que necesitas saber si usas React.

Ejecuta create-next-app

Ejecuta:

npx create-next-app@14

Verás que uso Next.js 14. La razón es que necesitamos React 18 para que nuestra app sea compatible con el chatbot. Si usas @latest, se instalarán Next.js 15 y React 19. El comando anterior es la forma más sencilla de asegurarte de usar la versión correcta de React y que Next sea compatible.

Configura la aplicación

Se te harán una serie de preguntas. Yo suelo quedarme con la configuración por defecto, que es la que usaré en este tutorial.

Si todo va bien, verás el mensaje de éxito.

3. Integra tu chatbot en tu app React

Es hora de juntar las piezas.

Obtén el boilerplate React de Botpress

Para integrar el chatbot en nuestra app, necesitaremos:

• Nuestro ID de cliente
• Los componentes webchat de React ya preparados.

Botpress ofrece un código base que incluye ambos. Para conseguirlo:

• Ve al studio y haz clic en Share en la esquina superior derecha.
• En la parte inferior derecha de la ventana emergente, haz clic en Configure

• Haz clic en la pestaña React en la parte superior derecha.
• Aquí encontrarás el boilerplate de Botpress, con el comando de instalación y el client ID

Por cierto, si alguna vez necesitas tu client ID rápidamente:

• Ve a tu panel de Botpress
• Selecciona Webchat en el panel lateral
• Haz clic en Advanced Settings

Lo ideal es guardar esto en una variable de entorno, pero por ahora lo dejaremos en el componente.

Crea un componente de chat en tu app

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

Luego agrega el código del 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 de Botpress con algunos ajustes importantes:

• "use client" al inicio, para componentes que gestionan estado
• Renombrar la función de App a Chat
• Algo de estilos

Ahora ve a app/page.tsx e impórtalo justo antes 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 puedes ejecutar npm run dev en una terminal dentro del directorio del proyecto para verlo en un servidor local.

Impulsa una app React con un chatbot

Con frameworks web robustos, puedes centrarte en la funcionalidad principal sin preocuparte por los complementos.

Botpress incluye componentes preconstruidos, un constructor visual drag-and-drop y personalización total. La integración sencilla no sacrifica el rendimiento.

Si trabajas con React, buscas calidad. Tu chatbot debe estar a la altura.

Empieza a construir hoy. Es gratis.

Preguntas frecuentes

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

Sí, puedes publicar el chatbot en producción después de publicarlo en Botpress Studio e integrarlo en tu app React. Una vez integrado, puedes desplegar toda la aplicación usando plataformas como Vercel o cualquier proveedor de hosting compatible con tu stack tecnológico.

2. ¿Puedo personalizar el aspecto del chatbot?

Sí, puedes personalizar completamente el aspecto del chatbot usando el componente Webchat de Botpress. Permite ajustar colores, tamaño, posición y estilos, y puedes sobrescribir los estilos por defecto con CSS personalizado para que coincida con el diseño de tu marca.

3. ¿Debo definir una personalidad para el bot y cómo afecta las conversaciones?

Sí, definir una personalidad para el bot es importante porque guía cómo se comunica el chatbot, incluyendo el tono y la forma de expresarse. Esto asegura que la conversación esté alineada con la voz de tu marca y mejora la confianza del usuario.

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

El flujo del chatbot sirve para controlar la lógica de cómo responde el bot a los usuarios. En Botpress, defines los flujos visualmente en la pestaña “Workflows” usando nodos para acciones, mensajes, condiciones y transiciones.

5. ¿Puedo usar mis documentos existentes (por ejemplo, FAQs o catálogos de productos) para entrenar el bot?

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