Crea Chatbots React Como un Profesional - No Necesitas Experiencia

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.

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.

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.