BuilderBot + Baileys Custom Provider Example

Ejemplo completo de integración de BuilderBot con un proveedor personalizado basado en Baileys para crear un chatbot de WhatsApp con flows avanzados, botones interactivos, multimedia y funcionalidades exclusivas de baileys-mod.

🚀 Características

• 🤖 Flows Interactivos: Sistema completo de conversaciones con BuilderBot
• 🔘 Botones Interactivos: Botones de confirmación, procesamiento y cancelación
• 📝 Listas Interactivas: Menús organizados con múltiples opciones y secciones
• 🖼️ Envío de Multimedia: Soporte para imágenes, videos y documentos
• ⚡ Quick Reply Buttons: Botones de respuesta rápida exclusivos de baileys-mod
• 📋 Copy Code Buttons: Botones para copiar código directamente
• 📞 Call Buttons: Botones de llamada directa desde WhatsApp
• 🌐 URL Buttons: Botones de enlace web integrados
• 🤖 Mensajes con IA: Iconos personalizados para mensajes de inteligencia artificial
• 📰 Newsletter Management: Creación y gestión de newsletters de WhatsApp
• 🔗 Pairing Codes: Códigos de emparejamiento personalizados
• 🔄 Reconexión Automática: Manejo inteligente de desconexiones
• 📊 Gestión de Estado: Monitoreo en tiempo real del estado del bot

📦 Instalación

# Instalar BuilderBot y el proveedor personalizado
npm install @builderbot/bot builderbot-provider-baileys-mod

# Instalar dependencias adicionales
npm install baileys qrcode-terminal

# Para desarrollo con TypeScript
npm install -D typescript ts-node @types/node

🏁 Configuración Inicial

Estructura del Proyecto

proyecto/
├── node_modules/
│   └── builderbot-provider-baileys-mod/  # Librería instalada desde npm
├── builderbot-example.ts        # Ejemplo completo de implementación
├── package.json                 # Dependencias del proyecto
├── tsconfig.json               # Configuración de TypeScript
└── auth_builderbot-session/    # Sesión de WhatsApp (generada automáticamente)

Configuración Básica del Bot

import { createBot, createFlow, addKeyword, EVENTS, MemoryDB } from '@builderbot/bot';
import { BuilderBotProvider } from 'builderbot-provider-baileys-mod';
import { BotConfig } from 'builderbot-provider-baileys-mod';

// Configuración del proveedor
const providerConfig: BotConfig = {
  sessionId: 'builderbot-custom-session',
  printQRInTerminal: false,
  onQR: (qr) => {
    // QR disponible en interfaz web
  },
  onConnected: () => {
    console.log('🤖 El bot está listo para recibir mensajes');
  },
  onDisconnected: (reason) => {
    console.log(`❌ Desconexión: ${reason}`);
  }
};

// Crear el proveedor personalizado
const customProvider = new BuilderBotProvider(providerConfig);

📚 Flows Implementados

Flow de Bienvenida

Punto de entrada principal del bot con múltiples opciones.

Activadores: hola, hi, hello, /start

const welcomeFlow = addKeyword(['hola', 'hi', 'hello', '/start'])
  .addAnswer('🤖 ¡Hola! Bienvenido al bot con BuilderBot y Baileys-mod personalizado')
  .addAnswer('📋 Escribe *menu* - Menú principal')
  .addAnswer('🔘 Escribe *botones* - Ejemplo de botones interactivos')
  .addAnswer('📝 Escribe *lista* - Ejemplo de lista interactiva');

Flow de Botones Interactivos

Demuestra el uso de botones de confirmación, procesamiento y cancelación.

Activadores: botones, buttons

const buttonsFlow = addKeyword(['botones', 'buttons'])
  .addAnswer('🔘 **EJEMPLO DE BOTONES INTERACTIVOS**')
  .addAction(async (ctx, { provider }) => {
    const buttons = [
      { body: '✅ Confirmar', id: 'btn_1' },
      { body: '🔄 Procesar', id: 'btn_2' },
      { body: '❌ Cancelar', id: 'btn_cancel' }
    ];
    
    await (provider as BuilderBotProvider).sendButtons(
      ctx.from,
      '💡 Los botones son más fáciles de usar que escribir comandos',
      buttons
    );
  });

Flow de Listas Interactivas

Demuestra el uso de listas organizadas con múltiples secciones.

Activadores: lista, list

const listFlow = addKeyword(['lista', 'list'])
  .addAnswer('📝 **EJEMPLO DE LISTA INTERACTIVA**')
  .addAction(async (ctx, { provider }) => {
    const sections = [
      {
        title: '🎯 Opciones Principales',
        rows: [
          {
            id: 'option_1',
            title: '🚀 Opción Premium',
            description: 'Acceso completo a todas las funcionalidades'
          },
          {
            id: 'option_2',
            title: '⭐ Opción Estándar',
            description: 'Funcionalidades básicas y esenciales'
          }
        ]
      }
    ];
    
    await (provider as BuilderBotProvider).sendList(
      ctx.from,
      'Elige una de las siguientes opciones disponibles:',
      '📋 Ver opciones',
      sections
    );
  });

Flow de Multimedia

Envío de imágenes, videos y documentos.

Activadores: imagen, video, documento

const imageFlow = addKeyword(['imagen', 'image', 'foto'])
  .addAnswer('🖼️ **EJEMPLO DE IMAGEN**')
  .addAction(async (ctx, { provider }) => {
    await (provider as BuilderBotProvider).sendMedia(
      ctx.from,
      'https://picsum.photos/800/600',
      '📸 Imagen generada aleatoriamente'
    );
  });

🚀 Funcionalidades Avanzadas de Baileys-Mod

Mensajes con IA

Mensajes con iconos personalizados de inteligencia artificial.

Activadores: ai, ia

const aiMessageFlow = addKeyword(['ai', 'ia'])
  .addAnswer('🤖 **MENSAJES CON IA PERSONALIZADA**')
  .addAction(async (ctx, { provider }) => {
    const bot = provider.getInstance();
    
    await bot.sendMessageWithAI(ctx.from, {
      text: '¡Este mensaje tiene un icono de IA personalizado! 🤖'
    }, {
      aiConfig: {
        aiIcon: true,
        aiIconUrl: 'ai@newsletter'
      }
    });
  });

Botones de Respuesta Rápida

Botones más eficientes que las listas tradicionales.

Activadores: quick, rapida

const quickReplyFlow = addKeyword(['quick', 'rapida'])
  .addAction(async (ctx, { provider }) => {
    const bot = provider.getInstance();
    
    await bot.sendQuickReply(ctx.from, '¿Cuál es tu color favorito?', [
      { id: 'color_rojo', text: '🔴 Rojo' },
      { id: 'color_azul', text: '🔵 Azul' },
      { id: 'color_verde', text: '🟢 Verde' },
      { id: 'color_amarillo', text: '🟡 Amarillo' }
    ]);
  });

Botón para Copiar Código

Perfecto para compartir comandos y snippets.

Activadores: copy, copiar, codigo

const copyCodeFlow = addKeyword(['copy', 'copiar', 'codigo'])
  .addAction(async (ctx, { provider }) => {
    const bot = provider.getInstance();
    
    await bot.sendCopyCodeButton(
      ctx.from,
      'Aquí tienes el comando para instalar baileys-mod:',
      'npm install baileys-mod',
      '📋 Copiar Comando'
    );
  });

Botón de Llamada Directa

Los usuarios pueden llamar directamente desde WhatsApp.

Activadores: call, llamar, telefono

const callButtonFlow = addKeyword(['call', 'llamar', 'telefono'])
  .addAction(async (ctx, { provider }) => {
    const bot = provider.getInstance();
    
    await bot.sendCallButton(
      ctx.from,
      'Para soporte inmediato, puedes llamarnos directamente:',
      '+1234567890',
      '📞 Llamar Soporte'
    );
  });

Botón de Enlace Web

Los enlaces se abren directamente en el navegador del usuario.

Activadores: url, enlace, web

const urlButtonFlow = addKeyword(['url', 'enlace', 'web'])
  .addAction(async (ctx, { provider }) => {
    const bot = provider.getInstance();
    
    await bot.sendUrlButton(
      ctx.from,
      'Visita la documentación oficial de Baileys:',
      'https://github.com/WhiskeySockets/Baileys',
      '🌐 Abrir Documentación'
    );
  });

🔄 Manejo de Eventos

Respuestas de Botones Interactivos

Manejo automático de respuestas cuando el usuario presiona botones.

const buttonResponseFlow = addKeyword(EVENTS.ACTION)
  .addAction(async (ctx, { flowDynamic }) => {
    const buttonId = ctx.body;
    
    switch (buttonId) {
      case 'btn_1':
        await flowDynamic([
          '✅ **CONFIRMACIÓN EXITOSA**',
          'Has seleccionado la opción "Confirmar"'
        ]);
        break;
      case 'btn_2':
        await flowDynamic([
          '🔄 **PROCESANDO SOLICITUD**',
          'Tu solicitud está siendo procesada...'
        ]);
        break;
      case 'btn_cancel':
        await flowDynamic([
          '❌ **OPERACIÓN CANCELADA**',
          'Escribe *hola* para volver al menú principal'
        ]);
        break;
    }
  });

Respuestas de Listas Interactivas

Manejo de selecciones de listas con múltiples opciones.

const listResponseFlow = addKeyword(EVENTS.ACTION)
  .addAction(async (ctx, { flowDynamic }) => {
    const optionId = ctx.body;
    
    switch (optionId) {
      case 'option_1':
        await flowDynamic([
          '🚀 **OPCIÓN PREMIUM SELECCIONADA**',
          'Características incluidas:',
          '• Acceso completo a todas las funciones',
          '• Soporte prioritario 24/7'
        ]);
        break;
      case 'option_2':
        await flowDynamic([
          '⭐ **OPCIÓN ESTÁNDAR SELECCIONADA**',
          'Características incluidas:',
          '• Funcionalidades básicas',
          '• Soporte por email'
        ]);
        break;
    }
  });

Flow de Fallback

Manejo de comandos no reconocidos.

const fallbackFlow = addKeyword(EVENTS.WELCOME)
  .addAction(async (ctx, { flowDynamic }) => {
    const userMessage = ctx.body;
    
    await flowDynamic([
      '🤔 **COMANDO NO RECONOCIDO**',
      `No entiendo el mensaje: "${userMessage}"`,
      '📋 **OPCIONES DISPONIBLES:**',
      '• 🏠 Escribe *hola* - Menú principal',
      '• ❓ Escribe *ayuda* - Lista de comandos'
    ]);
  });

🛠️ Configuración Completa del Bot

Inicialización del Bot con Todos los Flows

const main = async () => {
  // Crear todos los flows
  const flows = createFlow([
    welcomeFlow,
    menuFlow,
    buttonsFlow,
    listFlow,
    imageFlow,
    videoFlow,
    documentFlow,
    helpFlow,
    buttonResponseFlow,
    listResponseFlow,
    infoFlow,
    restartFlow,
    contactFlow,
    fallbackFlow,
    // Flows avanzados de baileys-mod
    baileysAdvancedFlow,
    aiMessageFlow,
    quickReplyFlow,
    copyCodeFlow,
    callButtonFlow,
    urlButtonFlow,
    newsletterFlow,
    pairingCodeFlow
  ]);

  // Crear el bot con BuilderBot
  const { handleCtx, httpServer } = await createBot({
    flow: flows,
    provider: customProvider,
    database: new MemoryDB()
  });

  // Inicializar el proveedor
  customProvider.initProvider();
  customProvider.on('message', handleCtx);

  console.log('🚀 Bot iniciado exitosamente');
  console.log('📱 Escanea el código QR para conectar WhatsApp');
  console.log('🌐 Interfaz web disponible en: http://localhost:3008');
};

main().catch(console.error);

🚀 Cómo Ejecutar el Ejemplo

1. Clonar o Descargar el Proyecto

# Si tienes el proyecto en Git
git clone <repository-url>
cd custom-baileys

# O simplemente navega al directorio del proyecto
cd "c:\Users\Aurik3\Desktop\custom baileys"

2. Instalar Dependencias

npm install

3. Ejecutar el Ejemplo

# Ejecutar el ejemplo completo
npx ts-node builderbot-example.ts

# O compilar y ejecutar
npm run build
node dist/builderbot-example.js

4. Conectar WhatsApp

1. Escanear QR: Abre WhatsApp en tu teléfono y escanea el código QR que aparece en la terminal
2. Interfaz Web: Visita http://localhost:3008 para ver la interfaz web con el QR
3. Conexión: Una vez conectado, el bot estará listo para recibir mensajes

5. Probar Funcionalidades

Envía estos comandos al bot para probar las diferentes funcionalidades:

Comandos Básicos:

• hola - Menú de bienvenida
• menu - Menú principal
• botones - Ejemplo de botones interactivos
• lista - Ejemplo de lista interactiva
• imagen - Recibir una imagen
• video - Recibir un video
• documento - Recibir un documento

Funcionalidades Avanzadas (baileys-mod):

• baileys - Ver todas las funcionalidades avanzadas
• quick - Botones de respuesta rápida
• copy - Botón para copiar código
• call - Botón de llamada directa
• url - Botón de enlace web
• ai - Mensajes con IA personalizada
• newsletter - Gestión de newsletters
• pairing - Código de emparejamiento

Comandos de Utilidad:

• ayuda - Información de ayuda
• estado - Estado del bot
• contacto - Información de contacto
• reiniciar - Reiniciar conversación

🌐 Interfaz Web

El bot incluye una interfaz web integrada accesible en http://localhost:3008 que muestra:

• Código QR para emparejamiento de dispositivos
• Estado de conexión en tiempo real
• Información del bot y configuración
• Logs de actividad y mensajes
• Panel de control para gestión básica

📋 Comandos Disponibles

Comandos de Navegación

• hola, hi, hello, /start - Menú de bienvenida
• menu, menú - Menú principal estructurado
• ayuda, help, soporte - Información de ayuda
• estado, status, info - Estado actual del bot
• contacto, contact - Información de contacto
• reiniciar, restart, reset - Reiniciar conversación

Comandos de Interacción

• botones, buttons - Demostración de botones interactivos
• lista, list - Demostración de listas interactivas
• imagen, image, foto - Envío de imagen de ejemplo
• video - Envío de video de ejemplo
• documento, document, pdf - Envío de documento de ejemplo

Comandos Avanzados (Baileys-Mod)

• baileys, avanzado, demo, funcionalidades - Menú de funcionalidades avanzadas
• ai, ia - Mensajes con iconos de IA personalizados
• quick, rapida - Botones de respuesta rápida
• copy, copiar, codigo - Botón para copiar código
• call, llamar, telefono - Botón de llamada directa
• url, enlace, web - Botón de enlace web
• newsletter, boletin - Gestión de newsletters
• pairing, emparejamiento - Código de emparejamiento personalizado

🔧 Development

Building the Project

# Install dependencies
npm install

# Build the project
npm run build

# Clean build artifacts
npm run clean

# Run example
npm run example

Project Structure

builderbot-provider-baileys-mod/
├── dist/                        # Compiled JavaScript output
│   ├── BuilderBotProvider.js    # Main provider class
│   ├── WhatsAppBot.js           # Core WhatsApp bot implementation
│   ├── types.js                 # TypeScript type definitions
│   ├── utils.js                 # Utility functions
│   └── index.js                 # Main entry point
├── src/                         # Source TypeScript files
├── package.json                 # Package configuration
├── README.md                   # Documentation
└── *.d.ts                      # TypeScript declarations

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built on top of baileys-mod for WhatsApp Web API
• Integrated with BuilderBot ecosystem
• Inspired by the WhatsApp Business API

📞 Support

If you have any questions or need help, please:

• Open an issue on GitHub
• Check the documentation
• Join our community discussions

Made with ❤️ by the BuilderBot Community