Cómo Implementar Botones Interactivos en Bots de Telegram con IA

Cómo Implementar Botones Interactivos en Bots de Telegram con IA

Los bots de Telegram han evolucionado significativamente en los últimos años. Lo que comenzó como simples respuestas automatizadas ahora puede transformarse en experiencias interactivas completas gracias a los botones inline. En este artículo, exploraremos cómo implementar un sistema de botones dinámicos que se generan automáticamente según el contexto de la conversación, utilizando inteligencia artificial.

La clave está en combinar la potencia de un LLM como Claude con la API de Telegram para crear interfaces conversacionales que guíen al usuario de forma natural e intuitiva.

El Problema con los Bots Tradicionales

La mayoría de los bots de Telegram se limitan a responder con texto plano. Esto crea dos problemas principales:

1. Fricción en la navegación: Los usuarios deben recordar comandos específicos o escribir opciones exactas
2. Experiencia pobre: Sin guías visuales, los usuarios se sienten perdidos en conversaciones largas

Los botones inline de Telegram solucionan esto al ofrecer opciones clickeables que aparecen directamente bajo el mensaje del bot. Pero el verdadero desafío técnico es: ¿cómo hacer que estos botones se generen dinámicamente según el contexto?

Arquitectura de la Solución

La implementación se basa en tres componentes principales:

1. Sistema de Proxy para Claude

El núcleo de la solución es una función de procesamiento que actúa como intermediario entre Claude y la API de Telegram. Este proxy:

• Intercepta las respuestas de Claude
• Busca marcadores especiales que indiquen botones
• Parsea la estructura de botones
• Envía los botones via Telegram Bot API

2. Formato Especial de Marcado

Para que Claude pueda "comunicar" qué botones mostrar, definimos un formato simple:

[TELEGRAM_BUTTONS]
Texto del Botón 1 | callback_data_1
Texto del Botón 2 | callback_data_2
[/TELEGRAM_BUTTONS]

Este formato es:

• Fácil de generar para el LLM
• Fácil de parsear con regex
• Legible para debugging

3. Configuración Multi-Cliente

El sistema soporta múltiples bots simultáneamente mediante un diccionario de tokens:

BOT_TOKENS = {
'cliente_a': 'TOKEN_BOT_A',
'cliente_b': 'TOKEN_BOT_B'
}

Esto permite que una sola instancia del proxy maneje varios clientes con diferentes bots de Telegram.

Implementación Técnica

Función de Procesamiento

La función `process_telegram_buttons()` es el corazón del sistema:

def process_telegram_buttons(text, chat_id, client_id):
# Buscar bloques de botones
pattern = r'\TELEGRAM_BUTTONS\\[/TELEGRAM_BUTTONS\]'
matches = re.findall(pattern, text, re.DOTALL)
if not matches:
return text
# Extraer texto limpio
clean_text = re.sub(pattern, '', text, flags=re.DOTALL)
# Parsear botones
buttons = []
for line in matches[0].strip().split('\n'):
if '|' in line:
label, data = line.split('|', 1)
buttons.append({
'text': label.strip(),
'callback_data': data.strip()
})
# Enviar via Telegram API
send_telegram_buttons(chat_id, buttons, client_id)
return clean_text

Configuración del Webhook

Para recibir los callbacks de los botones, es crucial configurar correctamente el webhook de Telegram:

curl -X POST https://api.telegram.org/bot/setWebhook \
-H "Content-Type: application/json" \
-d '{
"url": "https://tu-dominio.com/webhook/telegram",
"allowed_updates": ["message", "callback_query"]
}'

El parámetro `allowed_updates` debe incluir explícitamente `callback_query` para recibir los clicks en botones.

Casos de Uso Prácticos

Menú Principal

Cuando un usuario inicia el bot, Claude puede responder:

¡Bienvenido! ¿En qué puedo ayudarte hoy?
[TELEGRAM_BUTTONS]
📦 Ver Productos | ver_productos
💬 Contactar Soporte | contactar
❓ Preguntas Frecuentes | faq
[/TELEGRAM_BUTTONS]

Confirmaciones

Para decisiones binarias:

¿Confirmas tu pedido por $150?
[TELEGRAM_BUTTONS]
✅ Sí, confirmar | confirmar_pedido_123
❌ No, cancelar | cancelar_pedido_123
[/TELEGRAM_BUTTONS]

Navegación Multi-Paso

En procesos con varios pasos:

Paso 2 de 3: Selecciona el método de pago
[TELEGRAM_BUTTONS]
💳 Tarjeta | pago_tarjeta
🏦 Transferencia | pago_transferencia
⬅️ Volver | paso_anterior
[/TELEGRAM_BUTTONS]

Mejores Prácticas

Después de implementar este sistema, identificamos reglas clave:

Límites y Restricciones

• Máximo 8 botones por mensaje: Telegram tiene límites técnicos y más botones confunden al usuario
• 1-3 botones por fila: Mantener legibilidad en móviles
• callback_data sin espacios: Usar guiones bajos o camelCase

UX y Diseño

• Emojis obligatorios: Mejoran la escaneabilidad visual
• Verbos de acción: "Ver productos" en lugar de "Productos"
• Opciones de salida: Siempre incluir "Volver" o "Cancelar"

Contexto para el LLM

En el archivo de configuración de Claude (CLAUDE.md), documentamos:

• Cuándo generar botones
• Qué formato usar
• Ejemplos específicos por caso de uso

Esto asegura respuestas consistentes sin necesidad de fine-tuning.

Integración con n8n

Esta solución se integra perfectamente con workflows de n8n:

1. Webhook recibe mensaje de Telegram
2. HTTP Request envía mensaje a Claude proxy
3. Proxy procesa respuesta y botones
4. Telegram recibe texto + botones inline
5. Webhook captura callback_query cuando usuario clickea
6. Workflow continúa según el callback_data

Esta arquitectura permite orquestar flujos complejos sin código custom en cada bot.

Resultados y Aprendizajes

La implementación de botones dinámicos transformó completamente la experiencia del usuario:

• Usuarios escribían comandos incorrectos
• 40% de conversaciones terminaban sin completar acción
• Soporte manual para guiar usuarios

• Navegación intuitiva con clicks
• Usuarios completan flujos sin fricción
• Reducción drástica de consultas de soporte

Conclusión

Implementar botones interactivos en bots de Telegram no tiene que ser complejo. Con un proxy inteligente entre tu LLM y la API de Telegram, puedes crear experiencias conversacionales que combinan lo mejor de ambos mundos: la inteligencia contextual de la IA y la facilidad de uso de interfaces gráficas.

Los tres takeaways clave son:

1. Usa un formato de marcado simple que el LLM pueda generar fácilmente
2. Documenta los casos de uso en el contexto del LLM para respuestas consistentes
3. Configura correctamente el webhook para recibir callback_query

Esta arquitectura es escalable, mantenible y puede adaptarse fácilmente a múltiples clientes o casos de uso. El futuro de los bots conversacionales está en combinar IA generativa con interfaces interactivas, y ahora tienes las herramientas para construirlo.