El formulario de contacto forma parte de esa colección vintage de casi cualquier web. Las nuevas generaciones los ignoran porque esperan inmediatez. El resto se pelea con ellos normalmente como último recurso. El usuario intuye que le dará problemas, porque en efecto, los formularios suelen ser complicados. Si la hubiera, la asignatura de formularios podría llenar todo un año de un curso de diseño y programación web: validaciones, usabilidad, control de spam, seguridad, entregabilidad..y mucho más. El autocompletado del navegador a veces ayuda, pero rellenar formularios sigue siendo el peaje de nuestra sociedad burocrática.
Llevaba tiempo dándole vueltas a como actualizar al formulario de contacto. Sinceramente los chatbots nunca me han gustado. Son una solución con buena teoría y mala ejecución. Parecen ingeniosos pero suelen ser muy torpes más allá del primer saludo. Deben tener sus instrucciones muy precisas para conseguir que el usuario no se sienta decepcionado. Por otra parte vivimos tiempos con la IA en los que los chatbots “están de revival”. Hoy los chatbots son más agentes que con la correcta instrucción y la ayuda de la IA, pueden interactuar con fluidez con un usuario sin sentirse “robótico”.
Un Chatbot de contacto especializado con Gemini + LangChain
Vaya por delante que el anterior formulario funcionaba correctamente. Mi interés ha estado más centrada en explorar herramientas y desplegar este caso de uso con un ejemplo. La premisa principal estaba en reemplazar la funcionalidad básica del formulario pero con una interfaz de chat, apoyada por Google Gemini. El mundo de los agentes está en pleno ebullición y quería probar LangChain, un framework open source disponible en JavaScript y Python para crear agentes. La idea fundamental es que LangChain te ofrece la lógica para que interactúes con un modelo de IA (Google Gemini en mi caso) y que construyendo el frontal del usuario puedes tener un bucle controlado.
Las tecnologías empleadas para crear el chatbot son:
- Astro en modo server alojado en Netlify, ya que necesitamos endpoints para la API.
- AlpineJS para gestionar toda la lógica del frontend.
- LangChain para gestionar como interactúa el chatbot con la IA.
- Google Gemini API modelo Google Flash 2.0
- Endpoint de n8n para manejar los datos introducidos.
Es importante destacar que este chatbot sólo tiene asignada la tarea de recopilar nombre, email / teléfono y el mensaje a enviar. Justo lo que hace el formulario de contacto anterior. Creo que esto es clave para entender que la solución. El chatbot tiene un único propósito y se anula su capacidad de hacer cualquier otra cosa. Esto se consigue ofreciendo un “system prompt” en LangChain que ni más ni menos es, instrucciones en lenguaje natural de cómo debe reaccionar y ejecutarse a las cuestiones del usuario.
Cosas a tener en cuenta para construir este tipo de chatbot
Si hacer bien un formulario de contacto cuesta trabajo, hacer un chatbot tampoco se queda corto, pero voy a repasar lo principal a tener en cuenta para conseguir que este chatbot funcione razonablemente bien en la tarea encomendada.
- El prompt de LangChain debe ser lo más detallado posible y estructurado posible. Desde el tono que quieres que emplees a las limitaciones que marcas. Quizás sea la parte más enrevesada de la solución. Debes ser específico en el propósito, cuando debes cortar, como validar ciertos datos. Por ejemplo ¿qué es un nombre correcto?. El prompt que tengo ahora tiene muchas líneas, más de las que esperaba.
- LangChain es una herramienta en constante evolución y van actualizando muchas opciones. La documentación no va a la misma velocidad.
- Para mi caso he usado la librería @langchain/google con el modelo Gemini Flash 2.0 que (por ahora) tiene una capa muy económica.
- La clave de LangChain está en el schema (usan Zod) que defines y que representa los datos que esperas obtener en un formato estructurado.
- Necesitas endpoints que procesen la API. Con Astro funciona toda bastante bien. He usado uno para el chat y otro para la llamada final cuando hay que entregar los datos.
- Es importante proteger los endpoints y limitar el posible abuso del chat o interminables sesiones con un máximo de conversaciones y caracteres.
- Las obligaciones de solicitar conformidad con el procesamiento de datos son las mismas que para cualquier recopilación de datos.
Conclusiones de la experiencia
Es muy posible que para este uso de caso sea una solución complicada. A fin de cuentas el formulario de contacto cumplía su función y de hecho lo mantengo. Reconozco que parte de la motivación venía por la necesidad de ofrecer algo distinto a un simple formulario de contacto y mostrar con un ejemplo las posibilidades que van surgiendo. Caminamos inexorablemente hacia una web mucho más automatizada, donde los usuarios verán cumplidas sus tareas gracias a agentes y a interfaces donde los humanos “ya no son requeridos”. Una “web agéntica” donde las máquinas hablan entre sí y que necesitan ser instrucciones precisas para cumplir sus propósitos. Definitivamente los tiempos van cambiando.