Los tres tipos de chatbots de IA que construimos
Chatbot de soporte FAQ: Responde preguntas frecuentes sobre tu producto basándose en tu documentación. El más sencillo de construir, pero el menos diferenciador.
Chatbot contextual (RAG): Responde basándose en TUS datos, historial del cliente, documentos cargados, contenido específico de cuenta. El más valioso para B2B SaaS.
Asistente de flujo de trabajo: Guía a los usuarios a través de acciones complejas dentro de tu app. Por ejemplo: "Crea una factura para el cliente Acme por 5.000 €" desencadena operaciones reales en tu base de datos.
Para la mayoría de los SaaS, el chatbot contextual (RAG) ofrece el mejor equilibrio entre valor y complejidad de implementación. Es lo que cubriremos en detalle. Es especialmente potente para SaaS en sectores como legal-tech, HR o fintech en España y LATAM donde los usuarios manejan grandes volúmenes de documentos.
Arquitectura del stack: cómo funciona todo
El stack completo para un chatbot RAG sin código:
- WeWeb: interfaz de chat (historial de mensajes, input de usuario, indicador de escritura) - Supabase Edge Function: orquesta la llamada, busca contexto relevante, llama a OpenAI, devuelve respuesta - Supabase PostgreSQL + pgvector: almacena embeddings de tus documentos/datos - OpenAI text-embedding-3-small: convierte texto en vectores para búsqueda semántica - OpenAI GPT-4o: genera la respuesta usando el contexto recuperado
El flujo en producción: 1. Usuario escribe una pregunta en WeWeb 2. WeWeb envía la pregunta a la Edge Function 3. La Edge Function convierte la pregunta en embedding (text-embedding-3-small) 4. Búsqueda vectorial en Supabase devuelve los 3-5 documentos más relevantes 5. Los documentos se inyectan en el prompt del sistema de GPT-4o como contexto 6. GPT-4o genera una respuesta basada SOLO en ese contexto 7. La respuesta se devuelve a WeWeb y se muestra al usuario
Configurar la base de conocimiento en Supabase
Primero, habilita la extensión pgvector en tu proyecto Supabase: create extension vector;
Crea la tabla de documentos con columna de embedding. El campo embedding vector(1536) almacena los vectores de text-embedding-3-small. Crea un índice IVFFlat para búsqueda eficiente a escala.
Para ingerir contenido: escribe una Edge Function que tome texto, lo divida en fragmentos de ~500 tokens, llame a text-embedding-3-small para cada fragmento y almacene los vectores en Supabase.
Fuentes de contenido a ingerir: documentación del producto, FAQs, guías de onboarding, artículos del blog, PDFs de clientes, transcripciones de llamadas de soporte. Cada fuente hace el chatbot más útil. Para SaaS en LATAM, asegúrate de ingerir contenido en el idioma correcto, un chatbot entrenado en inglés dará respuestas mediocres en español.
Construir la interfaz de chat en WeWeb
La UI del chat en WeWeb requiere:
Array de mensajes: Variable de estado que contiene {role: "user"|"assistant", content: string, timestamp}. Inicializa con un mensaje de bienvenida del asistente.
Componente de lista de mensajes: Un ListView vinculado al array de mensajes, con componentes de burbuja diferentes para mensajes de usuario vs. asistente. Añade una clase CSS para diferenciar visualmente.
Campo de input: Un input de texto con envío al pulsar Enter (usa el evento onKeydown en WeWeb). Vacía el campo tras el envío.
Indicador de escritura: Muestra "Escribiendo..." mientras la Edge Function procesa. Usa una variable booleana isLoading vinculada a la visibilidad de un componente.
Historial de conversación: Envía los últimos N mensajes con cada solicitud para que GPT-4o mantenga el contexto de la conversación. Limita a 10 mensajes para controlar costes de tokens.
Prompt del sistema para un chatbot RAG de calidad
El prompt del sistema es lo que hace que tu chatbot sea bueno o mediocre. Plantilla que usamos:
"Eres [Nombre], el asistente de [Nombre de Empresa]. Ayudas a los usuarios a [objetivo principal].
Contexto recuperado de nuestra base de conocimiento: [DOCUMENTOS_CONTEXTO]
Reglas: - Responde SOLO basándote en el contexto proporcionado - Si la respuesta no está en el contexto, di 'No tengo información sobre eso en mi base de conocimiento. Te sugiero contactar a soporte en [email].' - Responde siempre en el mismo idioma que el usuario - Sé conciso y directo, máximo 3 párrafos - Nunca menciones a competidores - Si el usuario pregunta por precios, siempre remite a la página de precios"
Las dos reglas más importantes: responde solo con el contexto (evita alucinaciones) y define claramente cómo manejar preguntas fuera de alcance.
Llevar el chatbot a producción: lo que importa
Autenticación: Si el chatbot es para usuarios logueados, valida el JWT en la Edge Function. Nunca devuelvas datos sensibles a usuarios no autenticados.
Rate limiting: Limita a 20-50 mensajes por usuario por día. Los chatbots son costosos a escala, un usuario puede hacer 200 preguntas en una sesión si no hay límite.
Registro de conversaciones: Almacena todas las conversaciones en Supabase. Esto te da datos para mejorar el chatbot, detectar preguntas sin respuesta y entender qué buscan tus usuarios.
Fallback a humano: Cuando el chatbot no puede responder, ofrece una ruta de escalado clara: "¿Quieres que te conecte con nuestro equipo de soporte?" con un botón que abre un ticket en Intercom, Zendesk o tu sistema de soporte.
Actualización de la base de conocimiento: Crea un proceso para actualizar embeddings cuando actualices documentación. Una base de conocimiento obsoleta es peor que no tener chatbot.