00:00:00
bienvenido o bienvenida a un nuevo video
00:00:02
en este video voy a explicar Cómo
00:00:04
vincular los assistants de Open Ai con
00:00:07
WhatsApp esto lo vamos a hacer mediante
00:00:10
código nodejs en javascript lo vamos a
00:00:12
hacer usando una librería que es builder
00:00:14
Bot que es la que venimos usando en el
00:00:16
canal y voy a partir desde un template
00:00:18
que ya tengo configurado que te lo voy a
00:00:20
dejar para que lo puedas descargar y te
00:00:22
voy a mostrar un poco qué es lo que
00:00:23
tiene bien lo primero te vas a descargar
00:00:25
el template yo lo tengo acá ya
00:00:28
descargado es un archivo zip vamos a
00:00:30
descomprimir y una vez que lo
00:00:31
descomprimir lo abrís en visual Studio
00:00:33
code Yo acá ya lo tenía abierto esto
00:00:36
tiene algunos archivos Primero lo
00:00:39
primero que se ve es esta carpeta de src
00:00:41
donde vamos a tener tres subcarpetas la
00:00:44
primera es la de configuración donde
00:00:46
vamos a configurar todas las variables
00:00:48
de entorno que traigamos de nuestro
00:00:50
archivo variable de entorno que ahora lo
00:00:52
vamos a crear tenemos la carpeta de
00:00:54
providers que esta es la que nos vincula
00:00:57
con el proveedor de WhatsApp a través de
00:00:59
la librería tenemos dos para configurar
00:01:02
en este caso uno es meta que es un
00:01:05
Provider de pago porque es el Provider
00:01:07
oficial y tenemos bist que es Open
00:01:10
source y al ser Open source es gratis
00:01:13
cada uno tiene algunas diferencias con
00:01:15
meta vas a necesitar un número dedicado
00:01:18
a meta o usar el número de prueba En
00:01:20
caso de que estés arrancando y puedas
00:01:22
usar la configuración o desde bails que
00:01:25
podemos usar un número que ya tengamos
00:01:27
abierto en algún WhatsApp de nuestro
00:01:29
teléfono
00:01:30
en este template están para configurar
00:01:32
los dos simplemente cambiando el nombre
00:01:35
de El Provider en el archivo variable de
00:01:38
entorno te lo voy a mostrar ahora un
00:01:39
poco más adelante después tenemos la
00:01:41
subcarpeta que es templates en esta
00:01:44
carpeta de templates van a estar los
00:01:46
flujos que serían cómo vamos a manejar
00:01:48
los mensajes del usuario por ejemplo
00:01:50
tenemos en un principio un Welcome Flow
00:01:54
que dice bienvenido a este chatbot una
00:01:55
vez que el usuario envía un mensaje
00:01:58
directamente le va a contestar esta esta
00:02:01
respuesta Esto es lo único que está
00:02:02
configurado por el momento En este
00:02:04
template tenemos el Index que es donde
00:02:07
vamos a exportar estos flujos y después
00:02:10
tenemos el
00:02:11
app.js que es el archivo principal en
00:02:14
donde creamos todas estas
00:02:16
configuraciones y arrancamos a correr
00:02:19
este código Entonces ahora con esto
00:02:23
listo antes de avanzar y agregar las
00:02:25
funciones que vamos a necesitar para
00:02:26
vincular los assistants vamos a ir a la
00:02:29
página de Open Ai y vamos a sacar todo
00:02:31
lo que necesitamos en la página de Open
00:02:34
Ai vamos a tener que hacer dos cosas uno
00:02:36
crear un assistant y dos conseguir una
00:02:38
Api key ahora para usar la Api key
00:02:41
necesitamos tener créditos cargados en
00:02:44
Open Ai que no es lo mismo que tener
00:02:46
chat gpt Plus Así que hay que tenero en
00:02:48
cuenta para que funcione correctamente
00:02:50
la ipi Key Así que en Open Ai te vas a
00:02:54
crear una cuenta o vas a loguearte con
00:02:56
tu cuenta en caso de que ya la tengas
00:02:58
vas a ir a la sección de dashboard y
00:03:00
vamos a ir primero a la sección De Api
00:03:02
Keys en Api Keys vas a tener que crear
00:03:05
una nueva Api key y copiarla y en la
00:03:09
sección de assistants vamos a tener que
00:03:11
crear un assistant la configuración del
00:03:14
assistant va a depender de qué es lo que
00:03:16
queres que haga tu chatbot vamos a tener
00:03:17
que darle dos cosas un prompt y en mi
00:03:20
caso le voy a dar un PDF que es de donde
00:03:22
quiero que vaya tomando la información
00:03:25
en este ejemplo voy a hacer un chatbot
00:03:27
que conteste dudas sobre un curso por
00:03:29
ejemplo
00:03:30
Entonces vas a venir a crear vas a crear
00:03:33
un nuevo assistant Vamos a ponerle
00:03:36
nombre vendedor cursos
00:03:39
YouTube vamos a tener que darle un
00:03:42
prompt yo tengo acá un prompt preparado
00:03:45
Este es el que le voy a dar al Bot dice
00:03:48
que es un asistente de ventas para un
00:03:49
curso que está acá para ayudar a los
00:03:51
usuarios interesados a obtener
00:03:53
información Clara y precisa que tiene
00:03:55
adjunto un PDF con preguntas frecuentes
00:03:58
para responder las preguntas y las
00:04:00
instrucciones son simples dice usa el
00:04:03
nombre del usuario para cada respuesta
00:04:05
respondé de manera breve si Solicito un
00:04:07
detalle de los módulos ahí sí da una
00:04:10
respuesta detallada y completa y el
00:04:12
objetivo que es facilitar la decisión de
00:04:14
compra resolver dudas comunes y ser
00:04:16
amigable y profesional Así que voy a
00:04:19
copiar este prompt lo voy a pegar acá en
00:04:23
instrucciones vamos a elegir el modelo
00:04:25
en este caso están todos los modelos
00:04:27
disponibles una ventaja de usar el
00:04:29
assistant es que es muy simple cambiar
00:04:32
el modelo cambiar las instrucciones o lo
00:04:34
que sea se hace directamente desde acá
00:04:37
para el ejemplo voy a usar gpt 3.5 Turbo
00:04:40
porque la información que le voy a dar
00:04:41
es bastante simple Así que creo que lo
00:04:43
puede manejar vamos a seleccionar la
00:04:46
opción de file Search para que pueda
00:04:49
Buscar dentro de los archivos y vamos a
00:04:52
agregarle un archivo el archivo que le
00:04:54
voy a agregar es este que tiene un fq
00:04:58
del curso tiene primero una intro de qué
00:05:00
es lo que hace el curso algunas
00:05:02
preguntas que puede hacer el usuario y
00:05:05
el temario del curso no bastante simple
00:05:08
obviamente podes agregar pdfs más
00:05:10
grandes la ventaja de agregarlo de esta
00:05:14
manera Es que esto usa bases de datos
00:05:17
vectoriales lo que significa que tu PDF
00:05:20
lo está guardando seccionado en varias
00:05:22
partes y cada vez que el usuario le hace
00:05:25
una consulta va a buscar directamente la
00:05:27
parte más relacionada a a esa pregunta
00:05:30
para traer una respuesta Lo cual es algo
00:05:34
Bastante útil de tenerlo acá porque hace
00:05:36
que sea un poco más rápido el proceso y
00:05:39
después tenemos otras dos
00:05:41
configuraciones que son las últimas dos
00:05:42
que son la temperatura y top p la
00:05:45
temperatura controla qué tan Random
00:05:48
querés que sea la respuesta No si le
00:05:51
ponés menos temperatura entonces las
00:05:54
respuestas van a ser más Random de eh
00:05:57
más determinísticas que las que debería
00:05:59
dar si le pones más temperatura ahí sí
00:06:01
las respuestas van a ser más Random y le
00:06:03
das más chances al modelo de que invente
00:06:07
cosas y la de Top p tiene que ver con la
00:06:11
base de datos vectorial que te estaba
00:06:13
mencionando Cuando vos haces una
00:06:14
pregunta y va a buscar algo relacionado
00:06:17
a esa pregunta mientras menos top p
00:06:21
tiene significa que más preguntas
00:06:25
relacionadas puede encontrar No si un
00:06:27
usuario no hace exactamente la misma
00:06:29
pregunta por ejemplo Cuánto cuesta el
00:06:31
curso y esa pregunta no está Exactamente
00:06:34
igual si tiene un top p más bajo puede
00:06:38
ser que tome otra pregunta de referencia
00:06:40
o Que responda que no lo sabe no Eso
00:06:43
depende de la el balance entre el promp
00:06:46
la temperatura y este parámetro para
00:06:49
este ejemplo los voy a dejar simplemente
00:06:50
como están por default y lo voy a crear
00:06:53
de esa manera una vez que ya lo tengas
00:06:56
configurado vas además de copiar la ipq
00:06:59
cop este nombre que este nombre es el
00:07:01
assistant ID es el ID de nuestro
00:07:03
asistente lo vas a copiar y vamos a ir
00:07:06
de vuelta al código lo primero que hay
00:07:09
que hacer es ver el archivo de variables
00:07:11
de entorno de ejemplo que estas son
00:07:13
todas las variables que vas a necesitar
00:07:16
para completar este video primero vamos
00:07:18
a crear un archivo de punto enb que va a
00:07:21
ser el nuestro archivo actual de
00:07:23
variables de entorno y vemos que tiene
00:07:26
en este caso seis variables la primera
00:07:29
es el Provider el Provider va a ser si
00:07:31
elegimos bist o meta la segunda va a ser
00:07:35
en caso de que usemos meta las
00:07:37
credenciales que necesitamos de meta Y
00:07:40
por último tenemos Open Ai que vamos a
00:07:43
necesitar como te mencioné la Open Ai
00:07:45
Api key y el assistant ID Así que vamos
00:07:48
a copiar todo este ejemplo lo vamos a
00:07:50
pegar en el archivo abri de entorno en
00:07:52
un principio voy a usar bail porque
00:07:54
Funciona muy bien para crear mvps Y es
00:07:57
más simple la configuración de meta no
00:08:00
lo voy a completar y la parte de Open a
00:08:03
voy a completar mi ipi key y el
00:08:05
assistant ID una vez que lo pegues lo
00:08:07
que hay que hacer es ir a la sección de
00:08:08
config y agregar la configuración de
00:08:11
chat gpt lo primero que vamos a
00:08:13
necesitar va a ser el open Api key vamos
00:08:17
a traerlo de
00:08:19
process.en openapi key y el assistant ID
00:08:24
que en este caso lo tengo como assistant
00:08:26
Así que vamos a ponerle assistant
00:08:31
do
00:08:33
process.env
00:08:36
assistant bien De esta manera ya quedó
00:08:39
configurado en nuestro archivo config y
00:08:40
ya lo vamos a poder usar en todo el
00:08:42
resto del código lo que vamos a empezar
00:08:44
a configurar Ahora va a ser la llamada
00:08:47
Api que vamos a hacer a chat gpt para
00:08:50
seguir manteniendo prolijo el código
00:08:51
dentro de la carpeta src vamos a crear
00:08:53
una nueva carpeta que se llame una nueva
00:08:56
carpeta que se llame
00:08:58
services dentro de esta carpeta vamos a
00:09:00
crear un nuevo archivo que sea chat gpt
00:09:03
js que va a ser el archivo encargado de
00:09:06
realizar esta llamada en este archivo
00:09:09
vamos a pegar este Script No te
00:09:11
preocupes no lo tenés que copiar en la
00:09:13
descripción voy a dejar para que lo
00:09:14
puedas descargar gratis y lo puedas
00:09:16
implementar a tu manera pero sí lo voy a
00:09:18
explicar para que entiendas Qué es lo
00:09:20
que está pasando primero vamos a usar el
00:09:23
import para traer Open Ai de Open Ai
00:09:26
siempre que hacemos un import nuevo Hay
00:09:27
que hacer un pnpm inst de esa librería
00:09:31
vamos a traer el archivo de config de
00:09:33
nuestro
00:09:34
index.js que es donde tenemos las
00:09:36
variables de entorno que vamos a usar y
00:09:39
vamos a traer la Open Api key que la
00:09:42
traemos desde config Open Api key y el
00:09:45
assistant ID que le vamos a poner
00:09:46
assistant y desde config assistant al
00:09:49
igual que antes ahora va a empezar lo
00:09:52
que sería la función chat que es la
00:09:53
función que vamos a usar para llamar a
00:09:55
nuestro asistente va a ser una función
00:09:57
asincrónica que recibe tres parámetros
00:09:59
la pregunta que va a ser la pregunta que
00:10:02
el usuario le esté haciendo a Open Ai el
00:10:05
nombre que en este caso va a ser el
00:10:06
nombre del usuario que se lo vamos a dar
00:10:08
como parámetro si te acuerdas en el
00:10:09
promp decía siempre usa el nombre en
00:10:12
este caso se lo vamos a dar porque los
00:10:13
nombres claramente varían y el thread el
00:10:16
thread es como si fuese un hilo de el
00:10:20
historial de conversación que tenemos
00:10:22
con el usuario en caso de que no exista
00:10:24
vamos a crear uno nuevo que ahora te voy
00:10:26
a mostrar en qué parte y en caso de que
00:10:28
ya tenga uno existente vamos vamos a
00:10:29
usar ese para que pueda mantener el
00:10:31
historial de
00:10:32
conversación lo primero que hacemos Es
00:10:34
crear un instanci amiento de la clase de
00:10:37
Open Ai con la Api key y vamos a buscar
00:10:41
el thread Cómo se busca el thread bueno
00:10:43
primero decimos si viene como parámetro
00:10:46
vuelve usar directamente el que viene
00:10:49
como parámetro y en caso de que esto sea
00:10:52
nul que haga la llamada a Open Ai el
00:10:56
método threads create para crear un
00:10:58
nuevo
00:11:00
thre una vez que lo creamos vamos a
00:11:03
abrir el hilo de la conversación con ese
00:11:05
usuario vamos a agregar vamos a hacer un
00:11:07
create con el método create con el
00:11:10
thread que viene como parámetro punto ID
00:11:13
para sacar el ID y vamos a agregar como
00:11:15
rle user o sea como usuario la pregunta
00:11:18
que este usuario está teniendo una vez
00:11:20
que lo agregamos a ese thread tenemos
00:11:22
que hacer un Run tenemos que hacer un
00:11:25
threads Run create and po con el ID y el
00:11:30
assistant ID usando las instrucciones
00:11:33
que te mencioné recién que diga el
00:11:35
nombre del usuario es y le sumamos a la
00:11:37
cadena de texto el nombre del usuario
00:11:39
que viene como
00:11:41
parámetro una vez que hacemos ese run en
00:11:44
este caso vamos a traer primero todos
00:11:47
los mensajes usando Open Ai Beta threads
00:11:50
messages list con el thread ID que es el
00:11:53
que estamos usando en este caso puse un
00:11:56
ciclo for simplemente para que puedas
00:12:00
ver por consola Cuál es el historial del
00:12:02
usuario en este caso de pruebas que lo
00:12:04
estamos haciendo Está bueno verlo por
00:12:06
consola para entender Si está
00:12:08
funcionando correctamente si no lo
00:12:09
queres ver por consola puedes
00:12:11
directamente comentar esta línea y
00:12:13
seguir avanzando con el código una vez
00:12:15
que termine ese ciclo for vamos a hacer
00:12:17
que messages Data se guarde en el
00:12:20
assistant response con el filtro de que
00:12:24
el message roll sea el assistant porque
00:12:27
lo que queremos hacer es extraer el
00:12:29
último mensaje que está enviando el
00:12:31
asistente porque es el que vamos a
00:12:33
devolver por
00:12:34
WhatsApp finalmente hace un pop que
00:12:37
obtiene el último mensaje del asistente
00:12:39
y la respuesta que va a ser la respuesta
00:12:43
del asistente que es esta que acabamos
00:12:45
de sacar lo vamos a traer de esta manera
00:12:47
si no existe el assistant response que
00:12:49
es el que acabamos de guardar que
00:12:51
directamente traiga el content Zero text
00:12:54
value porque significa que hay uno solo
00:12:56
y en caso de que no sea este que haga un
00:12:59
nul y nos lo va a devolver también al
00:13:01
mensaje así que a veces también el la
00:13:05
respuesta cuando usa un source o usa
00:13:09
un usa algo del PDF la respuesta Lo
00:13:12
devuelve con una referencia a de dónde
00:13:16
trajo esa respuesta Entonces no lo
00:13:18
queremos que eso nos lo responda por
00:13:20
WhatsApp Así que hacemos un replace con
00:13:23
esta estructura que lo que hace
00:13:24
básicamente es sacar esa referencia y
00:13:27
vamos a responder a a devolver por la
00:13:30
función el thread porque lo vamos a
00:13:31
guardar en el historial y la respuesta
00:13:34
limpia que es sin ese parámetro del
00:13:38
final finalmente hacemos el return de la
00:13:41
función con el thread y la respuesta que
00:13:44
en caso de que el Run no se haya
00:13:46
completado nos va a devolver nul Y si
00:13:48
hay un error con alguna de todas estas
00:13:50
llamadas que te puede pasar si por
00:13:52
ejemplo no tenés créditos en Open Ai lo
00:13:55
va a imprimir por consola y te va a
00:13:56
decir cuál es el error para que puedas
00:13:58
de buguear y encontrar Cuál es el error
00:14:01
exacto de lo que está pasando así que
00:14:03
eso sería toda la función de chat gpt
00:14:06
que vamos a usar vamos a ver cómo
00:14:08
implementarla ahora dentro de nuestro
00:14:10
código y cómo vincularlo con WhatsApp
00:14:12
para agregarlo a nuestro código desde el
00:14:14
Welcome Flow que es el mensaje la
00:14:17
función el Flow que va a tomar todos los
00:14:19
mensajes entrantes vamos a reemplazar el
00:14:21
bienvenido a este chatbot por todas
00:14:23
estas líneas de código qué está pasando
00:14:26
acá lo primero que tenemos que ver es el
00:14:29
State el State es como una memoria
00:14:30
temporal que se guarda directamente en
00:14:32
la máquina Donde lo estés corriendo en
00:14:34
este caso lo voy a estar corriendo local
00:14:35
Así que se va a guardar en la memoria de
00:14:37
mi computadora primero vamos a crear
00:14:39
esta constante que sea el State usando
00:14:41
las funciones que trae la librería
00:14:44
state.get my State Esto va a traer todo
00:14:46
el State que es único por usuario si
00:14:49
otro usuario le escribe no va a tener el
00:14:51
mismo State que yo que le estoy
00:14:54
escribiendo también al bote Esta es la
00:14:55
idea es separar la memoria en cada uno
00:14:58
de los usuarios
00:14:59
vamos a preguntar si existe un thread si
00:15:02
existe ese State si existe ese thread si
00:15:05
no existe que lo traiga como nul que en
00:15:07
el primer mensaje no va a haber ningún
00:15:10
thread Entonces nos lo va a dar como nul
00:15:12
y va a hacer la llamada a chat que lo
00:15:15
tenemos que importar vamos a hacer un
00:15:17
import de chat de Services chat gpt
00:15:23
js vamos a guardar vamos a hacer la
00:15:26
llamada a chat con ctx que es donde
00:15:29
viene la pregunta del usuario ctx name
00:15:32
que es donde viene el nombre del usuario
00:15:34
que tiene cargado en WhatsApp y el
00:15:36
thread que en el primer mensaje
00:15:38
claramente nos va a devolver nul una vez
00:15:41
que haga Esa llamada nos va a devolver
00:15:43
una respuesta y esa respuesta la vamos a
00:15:45
guardar en el State para que la próxima
00:15:48
pregunta sí la encuentre en el nuevo
00:15:51
usuario para que sí tenga el historial
00:15:53
entonces para eso hacemos un ctx
00:15:55
functions State update y update el
00:15:59
thread con la respuesta de esta función
00:16:02
usando el método de response thread
00:16:05
dentro de esta respuesta tenemos dos
00:16:07
parámetros que es lo que vimos antes que
00:16:09
devuelve la función uno es el response
00:16:12
que da la respuesta digamos de texto y
00:16:15
el thread que es el que el thread que
00:16:17
estuvo usando para darle el mensaje a
00:16:20
ese usuario entonces usamos response
00:16:22
thread para update arlo en el State y
00:16:25
vamos a usar un end Flow para terminar
00:16:28
este flujo con el response response que
00:16:31
en este caso va a ser la respuesta en
00:16:32
texto y Esto va a ser lo que nos mande
00:16:35
el mensaje por WhatsApp una vez todo
00:16:38
configurado y explicado llegó el momento
00:16:40
de correr el Bot lo primero que tenés
00:16:42
que hacer es hacer un pnpm install para
00:16:44
instalar las dependencias que tenemos en
00:16:46
esta librería y después una vez que
00:16:49
estén instaladas vamos a hacer un pnpm
00:16:50
Run dev para empezar a correrlo ahora
00:16:53
como estamos usando bail y tengo que
00:16:55
configurar mi celular nos va a salir un
00:16:58
mensaje de acción requerida eso
00:17:00
significa que tenemos que escanear este
00:17:02
QR que aparece acá vamos a ir desde tu
00:17:05
celular a settings vincular un nuevo
00:17:08
dispositivo dispositivos vinculados
00:17:10
vincular un nuevo dispositivo vas a
00:17:12
escanear este código QR que aparece
00:17:16
acá una vez que escanees te debería
00:17:18
salir un cartel de proveedor conectado y
00:17:21
listo perfecto nos va a dar para poner
00:17:23
un nombre yo voy a poner template
00:17:26
javascript y ahora le podemos escribir a
00:17:29
mi número personal ahora que escaneé el
00:17:32
QR con mi teléfono significa que mi
00:17:34
teléfono ahora es el Host del Bot
00:17:36
significa que ahora mi número de
00:17:37
WhatsApp que tenía en el teléfono es el
00:17:40
Bot entonces para ver las respuestas
00:17:42
tenemos que escribirle desde otro número
00:17:44
de teléfono a ese WhatsApp para ver las
00:17:47
respuestas del Bot Así que vamos
00:17:48
entonces a abrir WhatsApp vamos a
00:17:50
escribir por ejemplo un hola a ver qué
00:17:52
es lo que no contesta por atrás debería
00:17:54
estar haciendo toda la función y la
00:17:56
llamada al threads que acabamos de
00:17:58
configurar
00:17:59
me dice hola en qué puedo ayudarte hoy
00:18:01
vamos a decirle Por ejemplo una pregunta
00:18:04
sobre el PDF Me gustaría saber cuáles
00:18:08
son los módulos que
00:18:11
incluye ahora también está teniendo
00:18:14
nuestra conversación si vamos a la
00:18:17
consola vemos que antes trajo Hola hola
00:18:20
en qué puedo ayudarte hoy esto ya es
00:18:22
parte del historial Esto es lo que
00:18:24
imprimió por consola y el segundo
00:18:26
mensaje Dice nuevamente Hola hola que
00:18:28
puede ayudarte hoy porque es todo el
00:18:30
historial que teníamos y nos va a decir
00:18:32
la pregunta que acabamos de hacer y la
00:18:33
respuesta que nos acaba de enviar por
00:18:35
WhatsApp con todos los módulos que
00:18:38
incluye el curso Entonces ahora sabiendo
00:18:40
que tiene el historial podemos
00:18:42
preguntarle por ejemplo explicame un
00:18:44
poco mejor que es lo que tiene el módulo
00:18:48
5 Ahora hay que tener en cuenta que el
00:18:51
prompt que le pasé fue bastante simple y
00:18:54
el PDF tampoco tenía mucha información
00:18:56
Así que en este caso es donde juega la
00:18:59
temperatura Mientras más tenemos más nos
00:19:02
va a inventar o nos va a dar una
00:19:06
respuesta más específica en este curso
00:19:08
en este en esta respuesta nos da una
00:19:11
opción de qué es lo que pasa en cada
00:19:15
módulo Cuántos minutos tienes y todo lo
00:19:17
que tienes sin embargo dice como no
00:19:20
tiene la información de todos estos eh
00:19:23
segmentos dice con su respuesta Que este
00:19:25
segmento probablemente se Centre en
00:19:28
hacer hacer ciertas cosas que es
00:19:30
probable probable porque no tiene la
00:19:32
información y lo está tomando del PDF
00:19:35
Así que este sería el código si querés
00:19:39
agregarle funciones más avanzadas como
00:19:42
por ejemplo que interprete audios o que
00:19:44
pueda hablar con audios y tener este
00:19:46
código deploy en la nube 247 te dejo
00:19:50
entonces acá este video para que pases a
00:19:52
verlo en donde agrego todo esto que te
00:19:55
acabo de mencionar Gracias por llegar
00:19:57
hasta acá y nos vemos aí
