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

``bash


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

$3

`
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)
`

$3

`typescript
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

$3

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

Activadores: hola, hi, hello, /start

`typescript
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');
`

$3

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

Activadores: botones, buttons

`typescript
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
);
});
`

$3

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

Activadores: lista, list

`typescript
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
);
});
`

$3

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

Activadores: imagen, video, documento

`typescript
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

$3

Mensajes con iconos personalizados de inteligencia artificial.

Activadores: ai, ia

`typescript
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'
}
});
});
`

$3

Botones más eficientes que las listas tradicionales.

Activadores: quick, rapida

`typescript
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' }
]);
});
`

$3

Perfecto para compartir comandos y snippets.

Activadores: copy, copiar, codigo

`typescript
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'
);
});
`

$3

Los usuarios pueden llamar directamente desde WhatsApp.

Activadores: call, llamar, telefono

`typescript
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'
);
});
`

$3

Los enlaces se abren directamente en el navegador del usuario.

Activadores: url, enlace, web

`typescript
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

$3

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

`typescript
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;
}
});
`

$3

Manejo de selecciones de listas con múltiples opciones.

`typescript
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;
}
});
`

$3

Manejo de comandos no reconocidos.

`typescript
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

$3

`typescript
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

$3

`bash


Si tienes el proyecto en Git

git clone
cd custom-baileys

O simplemente navega al directorio del proyecto

cd "c:\Users\Aurik3\Desktop\custom baileys"
`

$3

`bash
npm install
`

$3

`bash


Ejecutar el ejemplo completo

npx ts-node builderbot-example.ts

O compilar y ejecutar

npm run build
node dist/builderbot-example.js
`

$3

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

$3

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

$3


- 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

$3

- 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

$3

- 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

$3

`bash


Install dependencies

npm install

Build the project

npm run build

Clean build artifacts

npm run clean

Run example

npm run example
`

$3

`
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