Esta es la guía paso a paso de cómo se construyó el widget de chat con IA para Fate Icon: un botón flotante que abre un panel de conversación conectado a un modelo de lenguaje, entrenado con la información real del negocio.
El chat se agrega sobre un sitio que ya existe y ya está desplegado. En este caso, el sitio vivía en un proyecto de Cloudflare Pages con este comando de despliegue, ejecutado desde la carpeta del proyecto:
terminalwrangler pages deploy . --project-name=tu-proyecto-webSi tu sitio no está en Cloudflare Pages todavía, ese es el primer requisito — es el servicio que te da tanto el hosting como la IA integrada sin pagar aparte.
Para que el sitio pueda usar Cloudflare Workers AI (el motor de IA), hay que activarlo en el archivo de configuración wrangler.toml del proyecto:
name = "tu-proyecto-web"
pages_build_output_dir = "."
compatibility_date = "2024-09-23"
[ai]
binding = "AI"No hace falta tocar nada manualmente en el dashboard de Cloudflare — al desplegar con wrangler, el binding de IA se activa solo, siempre que esté declarado en el wrangler.toml.
Es un botón circular flotante, fijo en la esquina inferior derecha, que al hacer clic abre un panel con historial de mensajes arriba y una caja de texto abajo. La instrucción que se le dio a Claude Code para construirlo fue:
"Agrega un botón de chat flotante en la esquina inferior derecha, redondo, con ícono de burbuja de chat, en los colores de marca. Al hacer clic, abre un panel de chat: historial de mensajes arriba, input de texto abajo con botón de enviar. Debe verse coherente con el resto del diseño del sitio (misma tipografía y paleta de colores)."
Reemplaza "colores de marca" y "tipografía" por los tuyos — entre más específico seas (los códigos de color exactos, la fuente exacta), más fiel sale el resultado a la primera.
El botón por sí solo no piensa nada — necesita una función en el servidor que reciba el mensaje del visitante y se lo pase al modelo de IA. Esta función vive en una ruta especial de Cloudflare Pages:
/functions/api/chat.jsexport async function onRequestPost(context) {
const { request, env } = context;
const { message, history } = await request.json();
const response = await env.AI.run(
'@cf/meta/llama-3.3-70b-instruct-fp8-fast',
{
messages: [
{ role: 'system', content: SYSTEM_PROMPT },
...history,
{ role: 'user', content: message }
]
}
);
return new Response(JSON.stringify(response));
}"env.AI" es el binding que activaste en el paso 2 — sin eso declarado en wrangler.toml, esta función no tendría acceso a la IA.
Esta es la parte más importante: es el texto que le da a la IA todo lo que necesita saber para responder bien — quién es, qué vende, cuánto cuesta cada cosa — y las reglas de cómo debe comportarse. Ejemplo real usado:
system prompt (resumido)Eres el asistente virtual de [Nombre del negocio].
Su eslogan es "[tu eslogan]". Responde en español,
de forma breve, cálida y profesional.
Servicios/planes disponibles:
- Plan A: $XXX (qué incluye exactamente)
- Plan B: $XXX (qué incluye exactamente)
- Plan C: cotización personalizada
Reglas:
- Sé preciso con los precios, nunca inventes inclusiones
- Si preguntan algo fuera de tema, redirige
amablemente de vuelta a los serviciosLa primera versión del chat decía que el plan más económico incluía algo que en realidad no incluía. La solución fue ser explícito en el prompt sobre qué incluye CADA plan, línea por línea, en vez de dejar que la IA "adivine" o generalice.
Una mejora clave sobre la primera versión: en vez de que la IA recite precios de inmediato, se le pidió que primero preguntara a qué se dedica el negocio del visitante, y usara esa respuesta para recomendar el plan más adecuado — sin volver a preguntar lo mismo si ya se lo dijeron antes en la misma conversación.
"Si el visitante no ha mencionado su rubro de negocio, pregúntalo de forma natural y breve antes de recomendar un plan. Una vez que lo sepa, recomienda el plan más adecuado con un ejemplo relevante a ese rubro. Si ya lo mencionó antes en la misma conversación, no lo vuelvas a preguntar — recuérdalo dentro de esa sesión."
Esto funciona porque el historial completo de la conversación se envía en cada mensaje nuevo (mira el parámetro "history" en el código del paso 4) — así la IA "recuerda" lo que ya se dijo dentro de esa misma sesión de chat.
Último ajuste: cuando la conversación llega al punto de que el visitante ya está listo para avanzar, la IA da el link directo de pago o contacto correspondiente, en vez de mandarlo a buscarlo por su cuenta en el sitio — un pequeño gesto de cortesía con el tiempo del cliente.
Antes de dar por terminado cualquier cambio, se prueba la conversación completa de principio a fin: saludo, pregunta sobre precios, una pregunta fuera de tema (para confirmar que redirige bien), y el flujo de recomendación de plan. Luego se publica con el mismo comando del paso 1:
terminalwrangler pages deploy . --project-name=tu-proyecto-web