El bloque Gen UI (Generative UI) es una de las herramientas más potentes de SendBot. Te permite renderizar componentes de interfaz personalizados e interactivos directamente en la conversación, yendo mucho más allá de las burbujas de texto estándar. Este bloque se puede utilizar de dos formas: Manual (configurado por usted en el Studio) o Generativo (generado dinámicamente por una IA).

​
¿Qué es Gen UI?

A diferencia de una burbuja de texto o imagen, Gen UI es un “contenedor” para componentes React. Esto significa que puede mostrar cualquier cosa, desde un calendario de reservas hasta un gráfico financiero complejo, siempre que el componente esté registrado en su paquete de webchat.

​
Cómo configurar manualmente

En el Studio, al agregar un bloque Gen UI, encontrará dos campos principales:
  1. Nombre del Componente: El identificador único del componente React que se va a renderizar (por ejemplo, booking-calendar, sales-chart, product-card).
  2. Datos (JSON): Un objeto JSON que contiene la información que el componente necesita para funcionar. Puede usar variables de SendBot aquí usando la sintaxis {{mi_variable}}.

​
Ejemplo de Configuración

  • Nombre: product-card
  • Datos:

​
Escenarios de Uso Manual

El uso manual es ideal para situaciones donde necesita previsibilidad y rendimiento.

​
1. Widgets de Reserva

Si ya tiene un componente de calendario, puede forzar que se muestre después de que el usuario elija un servicio.
  • Escenario: “Perfecto, ahora elija la mejor hora en el calendario a continuación.”
  • Ventaja: Determinista y rápido, sin depender de la IA para decidir el formato.

​
2. Dashboards y Gráficos

Si su bot consulta una API externa, puede pasar el resultado a un componente de gráfico.
  • Escenario: Mostrar el estado de cuenta de los puntos de fidelidad del usuario.
  • Ventaja: Visualización de datos rica que sería imposible solo con texto.

​
3. Experiencias Gamificadas

Muestre ruedas de descuento, tarjetas de rascar digitales o selectores de avatar.
  • Ventaja: Aumenta el compromiso del usuario con una interfaz que “vive” dentro del chat.

​
Escenarios de Uso con IA (Agent AI)

Cuando se usa junto con el bloque Agent AI, Gen UI se vuelve verdaderamente “generativo”. La IA puede decidir, basándose en el contexto de la conversación, qué componente mostrar y qué datos completar en él.
  • Ejemplo: El usuario dice “Estoy buscando una mesa de comedor de madera”. La IA entiende la intención y, en lugar de solo listar enlaces, emite un componente product-carousel con los muebles filtrados.

​
Mejores Prácticas

  • Validación de JSON: Asegúrese de que el JSON ingresado sea válido. El editor del Studio le advertirá si hay errores de sintaxis.
  • Fallbacks: Recuerde que el componente debe estar disponible en su paquete de Webchat para que se renderice correctamente para el usuario final.
  • Variables: Use variables para que los componentes sean dinámicos basándose en las respuestas anteriores del usuario.