Blog InfluxIA

Cómo crear un dashboard con IA sin programar (N8N + Bolt + Google Sheets) en 20 minutos

Cómo crear un dashboard con IA sin programar (N8N + Bolt + Google Sheets) en 20 minutos

Cómo crear un dashboard con IA sin programar (N8N + Bolt + Google Sheets) en 20 minutos

Tiempo de lectura estimado

12–15 minutos

Puntos clave

  • Sin código: une Bolt.new, Google Sheets y N8N con pasos guiados.
  • Tiempo real: edita la Sheet y el dashboard se actualiza al refrescar.
  • Chat estilo WhatsApp: ordena por texto y un agente de IA ejecuta acciones.
  • Capa gratuita suficiente si cuidas prompts y respuestas.
  • Patrón robusto: leer antes de escribir, clave única por Email, y memoria simple por userId.

Tabla de contenidos

Introducción: promesa y contexto

Vas a construir un dashboard con IA sin programar en 10–20 minutos, gratis. Conectarás Bolt.new (Bolt), Google Sheets y N8N. Todo no-code.

¿Qué ganarás?

  • Métricas en tiempo real desde Google Sheets.
  • Edición de datos por chat estilo WhatsApp.
  • Automatizaciones con agentes de IA que hacen el trabajo por ti.

Sin instalar nada complicado. Sin escribir código. Solo pegar enlaces y seguir pasos claros. Al final, podrás iterar, escalar y hasta pasar a producción.

Sigue bajando: en 4 pasos tendrás lo básico funcionando.

Qué vas a construir (demo del resultado final)

Un panel visual en Bolt que:

  • Lee y muestra métricas de una hoja de Google Sheets: presupuesto total, número de leads, estados por etapa.
  • Se actualiza en tiempo real: cambias algo en Sheets y lo ves al recargar el dashboard.
  • Incluye un chat estilo WhatsApp: envías órdenes (texto) a un agente de IA en N8N mediante un webhook y recibes la respuesta formateada.

Un workflow en N8N con:

  • Un agente de IA con Google Gemini 2.5 Flash y simple memory (recuerda el contexto por usuario).
  • Tools de Google Sheets para leer y actualizar filas:
    • Get All Rows (con filtro por Email).
    • Append or Update Row (usa Email como clave).
  • Un webhook en N8N:
    • Test y Production (dos URLs).
    • Recibe POST desde Bolt y responde con JSON; según tu UI, la clave puede ser response o message.

Escenarios cubiertos:

  • “Actualiza el presupuesto de un lead por su email” (clave única).
  • “Crea nuevos leads vía chat” y ver los cambios al instante en el dashboard en tiempo real.

Pequeño mapa mental:

  • Bolt muestra y conversa.
  • N8N piensa y actúa.
  • Google Sheets guarda la verdad.

Requisitos previos y entorno

Cuentas necesarias:

  • Bolt.new: capa gratuita con 1M tokens/mes y 150k/día. Perfecto para empezar en no-code.
  • N8N: cloud o self-host en un VPS (control total si prefieres).
  • Google: para Google Sheets.

Recursos: una Google Sheet con columnas: Nombre, Email, Presupuesto, Estado.

Costes y tokens:

  • “Token” es la unidad de cómputo de texto que consumen los modelos. Trabajaremos dentro de la capa gratuita si mantienes prompts y respuestas razonables.
  • Mantén los prompts claros y cortos para optimizar tokens.

Seguridad desde el inicio:

  • No pongas datos sensibles en texto plano.
  • El webhook irá sin auth al principio (para facilidad); más adelante añadiremos autenticación y controles.

Nota sobre definiciones: Usaremos definiciones claras y operativas para cada término clave. Una definición debe ser precisa y sin ambigüedad; las buenas definiciones aclaran el significado y sus límites, y en contextos técnicos una definición operacional especifica cómo observar o medir algo (por ejemplo, “token”).

Consejo: crea un folder en tu Drive con la Sheet y un README simple con enlaces de Bolt y N8N. Te ahorra clics.

Paso 1: Preparar Google Sheets (base de datos no-code)

  1. Crea la hoja con columnas:
    • Nombre
    • Email (clave única)
    • Presupuesto
    • Estado (Cliente/Interesado)
  2. Rellena 5–10 filas de ejemplo:
    • Nombre: Ana Pérez, etc.
    • Email: usa emails reales o dummy únicos.
    • Presupuesto: números positivos.
    • Estado: Cliente o Interesado.
  3. Comparte la hoja:
    • Botón Compartir > “Cualquiera con el enlace” como lector.
    • Si luego quieres edición directa desde Bolt, ajusta permisos o usa N8N para escribir.

Buenas prácticas:

  • Usa Email como identificador único para updates.
  • Valida: formato de email y presupuesto > 0 (Datos > Validación).
  • Normaliza Estado: solo “Cliente” o “Interesado”.

Prueba rápida: suma el presupuesto total con SUM para un KPI base.

Paso 2: Generar el dashboard en Bolt.new con prompt

Abre Bolt.new y crea un nuevo proyecto.

Prompt de arranque (pégalo tal cual y ajusta):

“Crea un panel visual atractivo que muestre métricas desde esta Google Sheet [PEGA AQUÍ EL ENLACE]. Recarga los datos al iniciar la app. Columnas: Nombre, Email, Presupuesto, Estado. Muestra: presupuesto total, leads totales, leads por Estado, y una tabla con filtros.”

Contexto y tokens: sé claro, pero no escribas un testamento. Cada palabra cuesta tokens. Si la IA duda, añade 1–2 frases más; menos es más.

Publicar en Bolt y probar:

  • Clic en “publicar en Bolt”. Copia el link público.
  • Abre la app en una pestaña.
  • Cambia un presupuesto en la Sheet, vuelve a la app y refresca: deberías ver el nuevo total.

Pequeños fixes habituales:

  • Iconos/colores: “Cambia el icono del KPI X a un gráfico de barras y usa verde si sube.”
  • Tablas: “Ordena por Presupuesto desc.” y re-publica.

Tip: si vas a escalar, podrás exportar a GitHub más adelante para versionar.

Paso 3: Crear el agente de IA y herramientas en N8N

En N8N, crea un nuevo workflow con esta estructura:

  • Nodo Webhook (lo añadiremos en el Paso 4).
  • Nodo de entrada → Agente (Agent) → Modelo Google Gemini 2.5 Flash.
  • simple memory: añade memoria con una key estable (por ejemplo, userId).

Tools de Google Sheets:

  • Get All Rows: conecta tu cuenta; selecciona Sheet y pestaña; activa filtro por Email cuando aplique.
  • Append or Update Row: define columna clave = Email y activa “update si existe, append si no”.

System message (prompt del agente):

  • Identidad: “Eres un gestor de leads.”
  • Objetivo: “Lee datos antes de actualizar. Modifica solo campos necesarios.”
  • Reglas: fecha actual si hace falta; tipos de datos correctos; si falta Email, pide confirmación.

Ejemplos de instrucciones:

  • “Actualiza el presupuesto de carla@ejemplo.com a 5.000.”
  • “Crea un lead: Ana, ana@ejemplo.com, 800, Interesado.”

Pruebas desde N8N: ejecuta el agente manualmente y verifica el flujo: primero Get All Rows (Email) y luego Append or Update Row. Confirma el cambio en la Sheet.

Notas útiles: si el agente cambia campos no deseados, refuerza el system message y limita el set de campos permitidos.

Paso 4: Conectar Bolt con N8N vía webhook

Ahora unimos el chat de Bolt con el “cerebro” en N8N.

Webhook en N8N:

  • Añade un nodo Webhook (POST). Guarda para obtener test URL y production URL.
  • Conéctalo al Agente: mapea body.text o body.message al prompt, y el userId para memoria.

Responder a Bolt: añade Respond to Webhook con JSON; clave response o message según el componente de chat en Bolt.

Test vs Production: usa test URL durante desarrollo; en producción, cambia la URL en Bolt y activa el workflow.

Debug útil: si no hay respuesta, verifica la clave exacta; si la memoria se desordena, fija userId; si Get All Rows es lento, filtra por Email.

Prueba end-to-end: desde Bolt envía “hola”, luego “Cambia el presupuesto de laura@ejemplo.com a 10.000.” y valida en la Sheet y en el dashboard.

Paso 5: Añadir el chat estilo WhatsApp en Bolt

Vuelve a tu proyecto en Bolt.new.

Prompt para crear el chat:

“Añade en la esquina inferior derecha un chat estilo WhatsApp. Cuando el usuario envíe un mensaje, haz un POST al webhook [PEGA AQUÍ LA test URL o production URL]. Envía JSON con: { text, userId }. Muestra la respuesta de la IA como burbuja. Si el JSON vuelve con la clave response úsala; si no, usa message.”

Puntos clave:

  • Posición fija bottom-right y timestamps en mensajes.
  • userId persistente en localStorage.
  • Manejo de errores: “No pude conectar con N8N. Intenta de nuevo.”

Publicar y probar: publica, escribe “hola”, verifica en N8N que llega { text, userId }, y ejecuta comandos de actualización/creación de leads. Refresca y valida KPIs.

Mejora rápida: tras cada respuesta exitosa, dispara un refresco de datos del dashboard.

Paso 6: Puesta en producción y robustez

Cambiar a producción: copia la production URL del webhook, reemplázala en Bolt (Code > Search si la IA no la cambia) y activa el workflow en N8N.

Seguridad mínima:

  • Auth por header: espera X-Auth-Token y valida.
  • Validación de entradas: text no vacío, emails válidos, presupuesto numérico > 0, estado ∈ {Cliente, Interesado}.
  • Rate limiting: nodo Rate Limit o proxy (Cloudflare).
  • Registro/auditoría: guarda userId, acción, timestamp, cambios (antes/después) en Logs (Sheet o Supabase).

Manejo de errores claro: responde 200/400/401/500 según caso; en error, JSON con status y message útil.

Definiciones operativas, cortas y útiles: “Token” = la unidad de cómputo de texto que consume el modelo; la medimos por la política de Bolt/IA. Elegimos esta definición clara y operativa para evitar confusiones, alineada con buenas definiciones y con la noción de definición en contextos técnicos; mantenla concisa y precisa.

Métricas, UI y UX: mejoras recomendadas

Auto-refresh: refresca datos tras cada POST exitoso o con intervalo (30–60 s) y muestra un spinner.

Gráficos y KPIs: presupuesto total/por estado, leads por etapa, tabla con filtros por Estado y búsqueda por Email.

Acceso y roles: vista pública (solo lectura) vs privada (edición vía chat); protege el chat con secreto o login básico por header.

Internacionalización: moneda local, fechas regionales y textos del chat traducibles.

Extensiones de automatización con N8N (roadmap)

Multiagentes:

  • Agente 1: gestión de leads (actual).
  • Agente 2: envíos de emails (Gmail Node) con plantillas.
  • Agente 3: agenda reuniones (Google Calendar).
  • Agente 4: enriquecimiento de leads (API de datos públicos).

Integraciones clave:

  • Supabase para persistencia robusta y segura (RLS).
  • Stripe para cobrar por acceso premium (webhooks → activar permisos).
  • Exportar a GitHub desde Bolt para versionar y desplegar.

Hosting: N8N Cloud (rápido) o self-host en VPS (control, coste bajo); añade backups diarios y credenciales cifradas.

Costes y rendimiento

Bolt y tokens: capa gratuita de 1M/mes y 150k/día. Optimiza prompts con frases cortas y reusa contexto con simple memory.

N8N: Cloud vs self-host:

  • Cloud: sin mantenimiento, con SLA (coste mensual).
  • VPS: coste fijo bajo y control (requiere monitoreo y parches).

Modelo de IA: Google Gemini 2.5 Flash (rápido y económico). Alternativas livianas si priorizas latencia/coste.

Rendimiento operativo: filtra por Email en Get All Rows, usa Append or Update con clave Email y cachea KPIs si la hoja crece.

Problemas comunes y soluciones (FAQ operativo)

  • “Bolt no actualiza el webhook.” → Reemplaza la URL en Code > Search, publica y prueba.
  • “No veo respuestas en el chat.” → Verifica si la clave es response o message y el Content-Type JSON.
  • “El agente cambia campos que no pedí.” → Refuerza el system message y valida campos en N8N.
  • “No se filtra por email y va lento.” → Activa filtro por Email y define clave Email en Append/Update.
  • “La memoria confunde usuarios.” → Usa userId estable y envíalo en cada POST.
  • “Errores de CORS.” → Habilita CORS en el Webhook o usa proxy con cabeceras.
  • “Cambios no se ven en el dashboard.” → Auto-refresh tras respuesta o intervalo, y revisa permisos de la Sheet.
  • “Quiero logs.” → Nodo Append a una pestaña Logs (Sheet) o a Supabase.

Checklist final

  • Google Sheets creada, validada y compartida.
  • Dashboard en Bolt publicado y conectado.
  • Chat estilo WhatsApp en Bolt enviando a webhook en N8N.
  • Agente en N8N con Gemini 2.5 Flash, simple memory y tools (Get All Rows + Append/Update por Email).
  • Webhook probado (test URL) y migrado a production URL con workflow activo.
  • Respuesta JSON correcta (response vs message).
  • Seguridad básica: header secreto, validación de entradas y rate limiting.
  • KPIs se actualizan tras operaciones.
  • README con enlaces de Bolt, N8N y la Sheet.

Conclusión y llamada a la acción

Ya tienes un dashboard en tiempo real, conectado a Google Sheets, con chat estilo WhatsApp y agentes de IA en N8N. Todo no-code. Puedes actualizar leads por email, crear nuevos y ver KPIs al instante.

Comparte tu enlace, invita a tu equipo y pide feedback. Luego itera: más métricas, mejores prompts y nuevas automatizaciones. Guarda esta guía como plantilla para tus próximos proyectos: publica en Bolt, mide, aprende y sigue construyendo.

Preguntas frecuentes

¿Puedo usar Airtable en lugar de Google Sheets?

Sí. Cambia los tools en N8N a Airtable y mantén el patrón: leer antes de escribir y clave única (email).

¿Cómo cambio de modelo de IA sin romper nada?

En N8N, sustituye el nodo del modelo por otro compatible manteniendo el mismo input/output del Agente. Prueba primero con la test URL.

¿Se puede hacer login de usuarios?

Opciones simples: header secreto por usuario, lista de usuarios autorizados en la Sheet y validación en N8N, o Auth y roles con Supabase.

¿Puedo programar campañas automáticas?

Sí. Añade un Cron Node en N8N y lanza emails, recordatorios y resúmenes de métricas.

¿Qué pasa si la hoja crece a miles de filas?

Pasa a Supabase o una base SQL con índices. Mantén Bolt como UI y en N8N cambia a consultas SQL.

¿Cómo cobro por acceso al dashboard?

Integra Stripe: Checkout → Webhook de Stripe en N8N → habilitar acceso (añadir userId a lista de permitidos). Muestra features premium en Bolt según plan.

¿Puedo desplegar todo on-premise?

Sí. N8N self-host en VPS con backups y HTTPS. Exporta Bolt a GitHub y sirve en tu hosting.

¿Cómo defino “token”, “webhook” o “rate limit” sin dudas?

Usa una definición clara, precisa y operativa. Apóyate en referencias como Merriam‑Webster, Dictionary.com y la visión técnica de Wikipedia.

¿La capa gratuita de Bolt me alcanza?

Para un dashboard con IA sin programar y pruebas: sí. 1 millón de tokens/mes y 150.000/día son suficientes si mantienes prompts cortos y respuestas concisas.

¿Puedo exportar el proyecto?

Sí. Exporta a GitHub desde Bolt para versionar, crear PRs y desplegar en Vercel/Netlify.

Cover Image