BuilderBot - Crear chatbots es Un juego de niños !

Historia

Porque se origina esto de yo "jugando" chatbots? En los primeros meses del 2024, un amigo estaba que estaba empezando un emprendimiento y se quejaba porque los clientes casi siempre preguntaban lo mismo y era justo cuando estaba apareciendo GPT y a modo de broma los 2 dijimos.

"Que bueno estaria tener una IA que responda por vos esos mensajes"

Spoiler, mi amigo consiguio trabajo en otro lado y dejo morir el emprendimiento, pero yo me quede con el bichito de "se tiene que poder hacer algo asi".
Y un dia en uno de los recomendados de youtube un dia me aparecio el creador Leifer Mendez, con su framework y lo que se podia hacer. Y bueno, la historia ya se cuenta sola... En pocas palabras el culpable es Youtube claramente...

Ahora yendo al grafico,

• Aprox 2022: arranco bot-whatsapp con los distintos providers (ya llegaremos a que son).
• Aprox el 2023: fue el cambio de branding por tema de derechos, y nacio builderbot Cluod, que seria la empresa tipo saas en base a este framework
• Aprox 2024: aparece GPT, (yo conozco el framework por aca), que es donde se introducen mejoras tipo langchain

Tecnologias

Builderbot ya viene por defectos con estas tecnologias

• Baileys y qr-image, para capturar la session (Baileys es el mas utilizado aunque hay otras opciones)
• sharp es para el envio de imagenes
• dialogflow: procesamiento de lenguaje natural
• contexts-dialogFlow-cx: permite un contexto
• express y nodemon: porque tiene un backend incorporado
• y docker + rollup: porque tambien permite hacer un build para subir a produccion

Opinion personal, lo unico que le falto tener fue dotenv o algo para manejar las variables de entorno.

Gestor de paquetes

pnpm vs npm...
funciona mejor con pnpm a la hora de instalar e incluso es mas rapido para compilar.
Incluso con npm, sharp da un problema que tenes que forzar la instalacion si o si.
El latest: actualmente esta por la version 1.2.5 y ya lleva mas de 34 releases en casi 3 años, el ultimo fue hace 20 dias aprox

CLI

El CLI, nos va a simplificar la configuracion inicial, mediante estas 3 preguntas

• Providers (no me detengo mucho en los providers porque lo explico mas adelante) solo quedense conque Baileys es el favorito de los gratis, y meta el favorito de los pagos
• Base de datos
• TS vs JS

Levantar/conectar bot

Pensando en ambiente desarrollo (y utilizando baileys que es el mas popular)

• instalamos dependencias
• levantamos el bot
• vamos a la url que por defecto es localhost 3008
• y en nuestro telefono vamos a whatsapp, vincular dispositivos y escaneamos el QR (se actualiza cada 60 seg) Y listo, el bot automaticamente captura todos los datos de la session, y ya se vincula con la api de whatsapp y podemos usar todo lo que trae el framework.

APP.ts

En el src esta el app.ts que es el archivo de entrada al bot. Yo me voy a detener en la parte de la instancia del bot, lo que necesita para funcionar es:

• necesita flows,
• necesita providers,
• y necesita una db (teoricamente se configuro todo con el CLI)

Noten el createFlow, todo flow que no este ahi, no va a ser reconocido por el bot como flow, por ende no va a funcionar.

Como el app.ts tiene unas 175 lineas, y para mi gusto tiene todo mezclado, yo recomiendo componetizarlo, es decir, separar los flows, la database, los providers, services, utils, prompts, conectores con IA, etc

Database

Como veran el framework es agnostico a la base de datos, ya que puede funcionar tanto con SQL o noSQL, incluso se le puede adaptar cosas como firebase o googleSheet.
Quizas la mas desconocida sea memoryDB, y la caracteristica principal es que aca la data no persiste, es decir cuando se resetea el bot se pierde la informacion.

Flows

Los flows son el alma del bot. (y nuevamente todo flow que no este incorporado al CreateFlow el bot no lo va a reconocer como tal y no va a funcionar).
Aca hay 3 palabras claves aca que quiero que se les queden: addkeyword, addAnswer y addAction.

1. addkeyword: que puede ser un evento o una palabra clave (incluso puede ser mas de uno, o incluso pueden ser ambos).

2. addAnswer: consta de 3 partes,
   a. el texto inicial
   b. las opciones (delay, capture)
   c. y la funcion

b y c son opcionales, pero a, osea el texto inicial, tiene que estar SI o SI.

1. addActions: esta NO tiene texto inicial, y puede o no tener las opciones, pero SI necesita la funcion. Si aca se necesitara un texto por algun motivo, se puede recurrir a flowDynamic.

Por experiencia personal, no recomendaria mezclar addAnswer y addAction en el mismo flow (recomiendo utilizar solo un tipo por flow), ya que hay algun que otro bug que hace que no se disparen de forma correcta el orden de las respuestas al estar combinados.

Flow events

Como vimos los flow se puede disparar con palabras, pero tambien con eventos, en la documentacion solo se habla de 5, pero actualmente son 8

1. WELCOME: es el flow por defecto, si no puede entrar a otro viene para aca.
2. ACTION: es el que se utiliza cuando se va de flow en flow, o cuando necesitas que se dispare sin ninguna palabra en concreto.
3. MEDIA: cuando el bot recibe imagen, video o sticker.
4. VOICE_NOTE: el bot recibe notas de audio.
5. DOCUMENT: recibe archivos .doc .pdf.
6. LOCATION: cuando el bot recibe una ubicacion, pero detalle recibe un json de whatsapp no de googlemaps.
7. order y 8. template son cosas de meta y no estan en la documentacion de builderbot, asique si alguno le interesa saber mas, yo no puedo decir nada porque no los he utilizado aun.

Flow context

Tanto en addAnswer o addAction, dentro de la funcion vamos a tener acceso a 2 metodos context o ctx y contextFunctions.
Las 4 cosas que nos permite el context

1. Conocer el numero de quien escribe
2. Saber el nombre con el que esa persona se registro en whatsapp
3. Si el usuario escribio un texto se puede capturar
4. El numero del bot

flow methods

Son varios, yo voy a comentar los mas usados que son los amarillos

1. State: que tiene 4 funciones, uptdate, get que trae solo lo solicitado, el getMyState (porque no se llamara getAll, no??) que trae todo el json que tenga ese estado, y el limpiar el estado.
2. Global State, lo mismo pero que va a funcionar a nivel de bot y no a nivel de conversacion individual.
3. DynamicFlow: mediante template strings podes generar textos dinamicamente y/o logica
4. GoToFlow: es para redireccionar de un flow a otro
5. Fallback: es la funcion por defecto
6. EndFlow: se suele utilizar no tanto para la conversacion actual, sino para indicarle al bot que termino la interaccion e indicar que siga con lo siguiente de la queue (ya llegaremos). Suele ir junto a un state.clear()
7. Blacklist: por si se quiere bloquear a un usuario. Puede ser manualmente a nivel admin o mediante un flow a nivel de usuario.

Ejemplo con flow (menu con switch)

Los addKeyboards aca son palabras y eventos.
La idea suele ser, poner un texto a modo de listado tratando que se responda con un solo caracter, numero o letra, capturarlo, y con eso redireccinar a otro flow.

• Ventaja, es casi instantaneo.
• Desventaja, apelas a las inteligencia de las personas, lo cual puede ser un problema, sobretodo con gente que no lee.

Cosas interesantes sobre flows

Son temas que se quedaron afuera de la charla pero me parece relevante mencionarlos rapidamente:

• Fast Entries: Clientes que escriben muchas mensajes en muy poco tiempo.
• Idle: o estado de suspension.
• Turn off: apagar el bot para que no conteste incluso si le escriben.
• Forward to human
• Blacklist: no necesariamente es bloquear al usuario, sino es hacer que el bot no responda por determinado motivo. Ej: un proveedor.
• List y Buttons, son las cosas pagas que solo permite meta y twilio

Routes

Como el bot tiene incorporado express, nos permite crear endpoints de la misma forma, solo que agregando el parametro bot gracias al handleCtx.

No se recomienda hacer esto con proveedores como baileys (ya llegaremos a eso).

Queue - cola de mensajes

Recuerdan el endFlow? Va asociado a este punto. Cuando se instancia el bot, por defecto soporta 15 personas simultaneas, con un tiempo de espera en cada conversacion de 20seg.
Se puede modificar como se ve en la foto, en principio que se conozca no hay maximo en tiempo ni en cantidad de persona.

Providers

Tenemos de 2 tipos, pagos y gratuitos:
Los pagos que son los "productos Meta" junto a Twilio.
Y los "free con arterisco" si bien son varios, baileys es el mas popular por la simpleza para conectarse a las apis.

Ejemplos de distintos providers

Empiezo por la parte facil, noten que todos tienen sus respectivos providers

Este es bastante sencillo de obtener esos datos, pero a nivel costo no es tan buena opcion.

Este es el mas buscado, y a la vez el mas complicado de obtener esos datos.

Como ven en telegram solo se necesita el token del usuario

Este es el "distinto", ya que todos los datos van en el CreateShopifyflow, y no en el provider.

Meta vs Baileys

Y llegamos a la parte mas complicada de contar por la cantidad de datos , no tecnicos que hay que tener en cuenta (posiblemnte la parte que mas me costo hacer).

Meta:
Es el preferido para poner en produccion, pero tambien el mas dificil de completar las requisitos.

1. Permite botones y listas y todo el spam que se les ocurra

2. Es dificil con todo lo que exige Meta para aprobarte como usuario
   Requiere por nombrar algunos
   a) Tener un Facebook Business Manager verificado.
   b) Proveer documentación oficial que respalde la legitimidad de tu negocio (por ejemplo, registro de la empresa, facturación, etc.).
   c) La integración con un CRM para gestionar las conversaciones (whatsapp web no esta permitido. El mas popular es Chatwoot, que es un "whatsapp con esteroides", con un costo de 19 dolares mensuales.
   d) La configuración debe incluir la vinculación de los datos de pago
   e) Tener un token de autenticación
   f) añadir un numero virgen, osea que nunca haya tenido whatsapp anteriormente

3. Costos de meta: el costo, en la categoria de servicio (hay varias) en argentina es de 0.0316 centavos de dolar por conversacion cada 24hs. Y no cobra por mensaje enviado.

Twilio, que es el otro provider pago, este cobra $0.0367 Conversation, mas $0.005 por message enviado.

1. No tenes riesgo de bloqueo al ser servicio oficial de meta.

2. Si o si requiere un crm o una interfaz visual (no permite usar el celular o whatsappweb porque necesita ser un numero virgen para funcionar.

3. No requiere vinculacion mediante QR, ya que se hace todo mediante las api keys que nos brinda meta.

*Baileys: *

Es mas para testear o programar que para ponerlo en produccion, podria decirse que es jugar con fuego, y si arriesgas eventualmente te vas a quemar.

1. Al ser gratuito no permite las cosas de pago como los botones o spam.

2. Aca SI hay posibilidad de baneos (mas adelante especifico mas)

3. Su funcionamiento depende de los servidores de baileys

4. Aca no hace falta un cms, aca si se puede usar whatsapp web, o el mismo telefono.

5. Como vimos al principio su vinculacion se hace mediante QR

Como evitar baneo con baileys o providers gratuitos.

AutoSpoiler: no actuar como BOT

1. No hacer spam
2. Si responder, pero no iniciar muchas conversaciones
3. Pedir que agenden el bot, esto es importante porque esa data que sale en la api, y figurar como contacto agendado es señal de que es alguien relevante para la persona
4. En lo posible tener respuestas aleatorias, con IA esto dejaria de ser un problema depende como se use la IA, pero si es secuencial tener algo de que agarrarse para que se modifiquen, ej ajustarse al minutero del reloj para definir un saludo
5. Apagar el bot (noches o findes), osea actuar como una persona que se toma tiempo libre.
6. Tener cuidado con los links, cuanto mas largo mas sospechoso
7. No disparar mensajes inmediatamente, osea simula ser una persona que se demora en escribir el mensaje.
8. Prograsar lentamente con el uso. La idea es ir escalando paulatinamente. No hay data concreta de cuanto msj podes por mes, pero muchos dicen que mas de 250 diarios ya es un warning

Previo a deployar

• Baileys, con todas las consideraciones que ya el cliente deberia saber, es literalmente igual que en desarrollo.
  1) construis la build
  2) la subis a un hosting
  3) Aca por un tema de seguridad, necesitas capturar nuevamente la session desde produccion al 3008, ya que el build no guarda los datos de la session.

• Meta.
  1) Cumplimentar con todos los requisitos de "meta business suite"
  2) Añadir en el bot, los endpoints para chatwoot
  3) construir la build
  4) subirla a hosting
  5) y listo (aca no hace falta vincular con QR, porque se hace todo mediante los api keys de "meta business suite")

Chatbot + IA

Pequeño Disclaimer, esto a continuacion es bajo las cosas que yo he encontrado y no necesariamente es la verdad absoluta y seguramente hay mejores cosas ya creadas e implementadas. Dicho eso...

• Langchain: Es una herramienta que descompone una consulta en multiples subconsultas, y utilizando modelos de lenguajes, es decir va creando la respuesta final mediante un grafo que se modifica dinamicamente.

Puede utilizar zod para validar y tipar datos, esto garantiza que cada subconsulta se amolde al esquema esperado. Los adaptadores disponibles son chatgpt y gemini.

Desventaja esta en la version 0.3 por lo que no es muy estable en el sentido que hay muchas cosas deprecadas en tan pocas versiones.

• Forma manual: es la mas popular que he encontrado. Tenes todo el control pero tambien tenes que hacer todo. Es como express o react basicamente...

La diferencia sustancial, es que aca no tenes subconsultas tipadas (con zod), sino que tenes un unico prompt, por lo que estas "regalado" a que la unica respuesta sea la que da la IA, sea o no correcta.

Forma manual

A que nos referimos con "hacer todo"?

• Manejar el estado (recuperas y pusheas del history a mano)
• Definis el prompt y las posibles opciones de respuestas
• Te conectas manualmente a la IA y le envias todo. Este es el punto critico, porque ACA es aveces donde falla, al ser una unica respuesta (no son varias como langchain) estas "atado de mano" a lo que la IA interprete.

Codigo IA manual

Aca quiero que notemos 4 cosas:

1. En rojo todo lo que tiene que ver con el historial de conversacion, tanto acceder y actualizar
2. Acceder al prompt
3. Mandas todo a la IA a que resuelva
4. y con esa respuesta de la IA, que va a ser una palabra, va a redireccionar a otro flow mediante el switch.

Ejemplo de Prompt

Yo les muestro este ejemplo que es el que a mi me ha funcionado, pero hay "n+1" posibilidades para hacerlo funcionar, y hasta quizas mas eficiente, consta de 3 partes:

1. Que rol sos y cual es tu funcion y/o que accion tiene que hacer:
2. Las distintas posibilidades de respuesta y en que casos debe caer en esa opcion o no.
3. Y a modo de resumen, el listado con las respuestas posibles (esto si bien es redundante, es porque aveces se sale de los posibles flujos)

La conexion con IA

Esto en principio funciona tanto para IA gratuitas o pagas. Segun que IA son los parametros que se les va a dar, apikey, temperature, max tokens, streaming, etc.

Este ejemplo esta utilizando history, que si bien es opcional, yo recomiendo que este le ayuda al bot a que infiera de una mejor manera.

Ejemplo Video IA

El mecanismo es el siguiente:

• Se capturan el texto escrito, se le agrega el prompt y los pasa a la IA, esta determina la posible mejor respuesta y con eso se dispara un nuevo flujo.

La Sorpresa

Disclaimer 1: (el bot va a funcionar por unos dias/horas por lo que si estas leyendo esto y no funciona, te invito a que vayas a mi perfil de github, dejes una estrella y mires el codigo, y porque no lo pongas a funcionar en local)

chatbot-beerJS-prototype

Disclaimer 2: el bot en produccion va a ser solo secuencial o sin IA

Y yo aprovecho para hacer una pequeña prueba de stress a ver que tal es el comportamiento del bot

Muchas gracias a todos

REDES:

• Instagram
• LinkedIn
• GitHub
• chatbot-beerJS-prototype