Introducción
En este módulo aprenderás a crear un chatbot simple pero efectivo y a integrarlo en cualquier sitio web de manera sencilla. Es el primer paso perfecto antes de crear agentes más complejos.
¿Qué vamos a construir?
Crearemos un chatbot con una estructura muy básica pero funcional:
- Nodo de inicio: Punto de entrada del flujo
- Modelo LLM: El cerebro del chatbot (usaremos ChatGPT, pero puedes usar Ollama u otros)
Pasos del Proyecto
1. Construcción del Flujo en Flowise
Creando el flujo básico:
- Abre Flowise en tu navegador (normalmente
localhost) - Ve a «Agent Flows» y crea un nuevo flujo
- Conecta el nodo de inicio con un nodo LLM
Configuración del LLM:
- Haz doble clic en el nodo LLM
- Nombra tu chatbot (ejemplo: «chatbot»)
- Selecciona OpenAI como modelo
- Elige GPT-4.0 para mejores respuestas
- Ajusta la temperatura a 0.9 (para respuestas más creativas)
Creando el prompt del sistema: Ejemplo de prompt personalizado:
Eres un chatbot imaginativo y útil para [Nombre de tu sitio].
Tu sitio se dedica a [descripción de tu negocio/tema].
Siempre responde de manera amigable y proporciona información útil sobre el sitio.
2. Integración en tu Sitio Web
Método simple – Script embed:
- En Flowise, busca el botón de integración
- Copia el script generado
- Abre tu archivo HTML con cualquier editor de texto
- Pega el script dentro de la etiqueta
<head> - Guarda y actualiza tu página web
¡Y listo! Tu chatbot aparecerá automáticamente en la esquina de tu sitio.
3. Configuración Avanzada
Opciones importantes de configuración:
Límite de mensajes:
- Evita el abuso del chatbot
- Ejemplo: 5 mensajes por cada 60 segundos
- Incluye mensaje personalizado cuando se alcance el límite
Dominios permitidos:
- Restringe qué sitios web pueden usar tu chatbot
- Ideal para evitar uso no autorizado
Mensajes de inicio:
- Agrega preguntas sugeridas que aparezcan automáticamente
- Ejemplos: «¿De qué trata este sitio?», «¿Qué servicios ofrecen?»
Preguntas de seguimiento:
- El chatbot sugiere preguntas relacionadas después de cada respuesta
- Requiere configurar el proveedor de LLM en las opciones
4. Personalización Avanzada (Opcional)
Para cambios más profundos de diseño y funcionalidad, puedes usar código:
Lo que puedes personalizar:
- Colores del chatbot
- Título personalizado
- Mensaje de bienvenida único
- Posición en la página
- Eliminar marca «Powered by Flowise»
- Logo o imagen personalizada
Herramienta recomendada: Utiliza el repositorio «Flowise Chat Embed» en GitHub para modificaciones avanzadas.
Consejos Prácticos
- Prompt efectivo: Sé específico sobre el propósito y tono de tu chatbot
- Temperatura adecuada: 0.9 para creatividad, 0.1 para respuestas más precisas
- Límites de uso: Siempre configura límites para proteger tus recursos
- Pruebas: Testea diferentes preguntas antes de publicar
Casos de Uso Ideales
- Sitios web corporativos
- Blogs personales
- Tiendas online
- Portafolios profesionales
- Sitios educativos
Próximos Pasos
Una vez domines este chatbot básico, estarás preparado para:
- Crear agentes más complejos
- Integrar bases de datos
- Añadir funcionalidades avanzadas
- Conectar con APIs externas
Resumen
Has aprendido a crear e integrar un chatbot funcional en menos de 10 minutos. Esta base te permitirá expandir hacia soluciones más sofisticadas conforme avances en el curso.
Resultado final: Un chatbot completamente funcional integrado en tu sitio web, listo para responder preguntas de tus visitantes de manera inteligente y personalizada.