Si manejás Meta Ads, conocés el ritual: entrar al Business Manager, exportar el reporte semanal, copiarlo a Excel, pegarle filtros, calcular ROAS por anuncio, armar el screenshot para mandarle al cliente. Cuarenta y cinco minutos del día se te van en eso, todas las semanas.
O podés tener un dashboard propio, conectado en vivo a tu cuenta de Meta Ads, que se actualiza solo, te muestra ROAS y CPA en tiempo real, filtra por campaña y por anuncio, y exporta reportes en un click.
Y lo armás vos. Sin saber programar. Con Claude Code.
En este post te paso el paso a paso de cómo construir un dashboard de Meta Ads desde cero usando Claude Code. Vas a ver qué necesitás antes de empezar, cómo conectarte al API de Meta, cómo escribir un CLAUDE.md útil, y cómo poner el proyecto online en Vercel. Si todavía no sabés qué es Claude Code, leé primero nuestra guía de Claude AI donde explicamos las 4 superficies (Chat, Cowork, Code y Design).
¿Querés saltar la curva de aprendizaje?
Este dashboard es uno de los 8 proyectos que armamos paso a paso en el Curso de Claude de Luzzi Digital. Vas a salir con el dashboard funcionando + 7 sistemas más (sitio web, scraper, cotizador, fábrica de contenido, sistema contable). Pago único, certificado, soporte humano.
Qué vas a tener al final
Al terminar este tutorial vas a tener una web (con dominio propio o subdominio gratis) que muestra:
- Métricas top: gasto del día, ROAS, CPA, impresiones, clicks, conversiones — todo en tiempo real desde tu cuenta de Meta Ads.
- Gráficos: evolución del gasto y de las conversiones en los últimos 30 días.
- Tabla de campañas: ordenable por gasto, ROAS o CPA. Con semáforo de color en las que están performando mal.
- Tabla de anuncios: el detalle por anuncio dentro de cada campaña, con thumbnail del creativo.
- Filtros: por rango de fechas, por campaña, por objetivo.
- Exportar: un botón para descargar el reporte en PDF o Excel.
Pinta como algo que pagás a una agencia o que requiere un dev full-stack. Con Claude Code lo armás vos en una tarde.
Lo que necesitás antes de empezar
Lista corta para tener todo a mano:
- Cuenta de Claude (plan Pro o Max): USD 17/mes con plan anual o USD 20/mes mensual. Claude Code viene incluido desde el plan Pro.
- Cuenta de Meta Ads activa: con permisos de admin para generar un access token.
- Una computadora con terminal: Mac, Windows o Linux. Si nunca abriste una terminal, no te asustes — Claude Code te guía paso a paso.
- Cuenta gratuita en GitHub: para versionar el proyecto.
- Cuenta gratuita en Vercel: para poner el dashboard online (te lo conectás con GitHub en 30 segundos).
- Editor de código (opcional pero útil): VS Code o Antigravity. Claude Code corre en terminal pero ver los archivos en un editor ayuda a entender qué va pasando.
Cero requisito de saber programar. Lo que sí necesitás: paciencia para leer lo que Claude Code te va mostrando y aprobar cada paso. No es magia que se autopilotea — vos sos el director del proyecto.
Paso 1 — Crear el proyecto en Claude Code
Instalá Claude Code desde la terminal:
npm install -g @anthropic-ai/claude-code
Una vez instalado, creá una carpeta nueva donde va a vivir el proyecto, entrá ahí en la terminal y arrancá Claude Code:
mkdir dashboard-meta-ads
cd dashboard-meta-ads
claude
Te va a pedir loguearte con tu cuenta de Claude (la misma del plan Pro o Max). Una vez logueado, ya estás en la sesión de Claude Code.
Probá un primer prompt para ver que todo arranque:
“Hola. Vamos a construir juntos un dashboard de Meta Ads. ¿Me podés contar primero qué vas a necesitar de mi parte y qué stack me recomendás usar?”
Claude Code te va a sugerir algo como: Next.js 14 con App Router, TypeScript, Tailwind CSS para estilos, Recharts para gráficos, y Vercel para deploy. Aceptá esa propuesta — es el stack más cómodo para este tipo de proyectos y Claude Code conoce a fondo cada pieza.
Paso 2 — Conectar al API de Meta Ads
Acá viene la parte clave: Claude Code necesita poder leer datos de tu cuenta de Meta Ads. Hay 2 caminos:
Camino A — Vía MCP (más profesional)
MCP (Model Context Protocol) es el estándar que usa Claude para conectarse a herramientas externas. Hay servidores MCP públicos que ya hacen el puente con la Marketing API de Meta. Le pedís a Claude Code que lo instale:
“Instalame el servidor MCP de Meta Ads. Tengo este access token (lo pego). Configuralo en el proyecto.”
Claude Code se encarga de toda la configuración. Vos solo le pasás el token de acceso (lo generás en developers.facebook.com → tu app → Marketing API → Generate Token).
Camino B — Vía SDK directo (más simple si recién arrancás)
Si MCP te parece complicado, podés pedirle a Claude Code que use el SDK oficial de Meta Marketing API directamente. Le pasás el access token y el ID de la cuenta publicitaria, y arma las llamadas él solito.
“Conectá el proyecto a la Marketing API de Meta usando el SDK oficial de Node. Mi access token es X, mi ad account id es act_XXXXXXX.”
Seguridad: nunca pongas el access token directo en el código. Claude Code te va a sugerir crear un archivo .env donde lo guardás, y lo agrega al .gitignore para que no se suba a GitHub. Confiá en esa sugerencia.
Paso 3 — Escribir un CLAUDE.md útil
El CLAUDE.md es un archivo de texto que vive en la raíz de tu proyecto y le dice a Claude Code todo lo que tiene que saber del contexto: qué estás construyendo, qué stack usás, cómo te gusta que estructure el código, qué cosas evitar.
Es la diferencia entre un Claude Code que te entrega código genérico y uno que te entrega código a tu medida. Pedíselo al mismo Claude Code:
“Armame un CLAUDE.md para este proyecto. Incluí: stack, estructura de carpetas, convenciones de naming, qué librerías usar para qué (Recharts para gráficos, shadcn/ui para componentes, lucide-react para íconos), y cómo manejamos errores.”
Claude Code te genera el CLAUDE.md inicial. Revisalo, ajustá lo que no se condiga con tu visión, y guardalo. De ahí en adelante, todos los prompts en este proyecto van a respetar esas reglas.
Esta es la diferencia más grande entre programar con Claude Code de pasada y armar productos serios: un buen CLAUDE.md te ahorra 70% de las iteraciones.
Tip: si querés que el CLAUDE.md respete tu tono de comunicación, primero bajate la plantilla gratis de Skill para tu voz.
Paso 4 — Pedirle el frontend
Con la conexión al API armada y el CLAUDE.md listo, ya podés pedirle a Claude Code que arme la pantalla principal. Un primer prompt sólido:
“Armame la pantalla principal del dashboard. Quiero ver arriba 4 tarjetas con: gasto del día, ROAS, CPA, conversiones (cada una con un sparkline chico de los últimos 7 días). Abajo, dos gráficos: uno de evolución del gasto y otro de evolución de conversiones, los últimos 30 días. Más abajo, una tabla de campañas con columnas: nombre, gasto, ROAS, CPA, estado. Ordenable por cada columna. Usá los colores de mi marca: primario #00026A.”
Claude Code te va a mostrar un plan primero (qué archivos va a crear o modificar, qué componentes nuevos). Aprobalo. Te va a generar todos los componentes, las llamadas al API, los gráficos.
Importante: en este paso vas a ver muchos archivos siendo creados. No te preocupes si no entendés todo. Lo que sí tenés que hacer es probar el resultado:
npm run dev
Abrís el navegador en localhost:3000 y ves tu dashboard funcionando con datos reales de tu cuenta de Meta Ads.
Paso 5 — Iterar (gráficos, filtros, exportar)
El primer build casi nunca queda perfecto. Y está bien. La gracia de Claude Code es iterar rápido. Algunos prompts típicos en esta fase:
- Filtros: “Agregame un selector de rango de fechas arriba a la derecha. Y otro selector para filtrar por objetivo de campaña (conversiones, tráfico, alcance, etc.).”
- Semáforo de performance: “En la tabla de campañas, pintame de rojo las que tienen ROAS menor a 1, amarillo entre 1 y 2, verde mayor a 2.”
- Detalle de anuncio: “Cuando hago click en una campaña, abrime un modal con el detalle de los anuncios adentro: thumbnail del creativo, gasto, ROAS, CTR.”
- Exportar: “Agregame un botón Exportar arriba a la derecha que descargue el reporte actual en PDF, con el logo de mi marca arriba.”
- Refresh: “Hacé que los datos se refresquen solos cada 5 minutos. Mostrá un indicador chiquito que diga cuándo fue el último refresh.”
Cada uno de estos prompts te va a tomar entre 2 y 8 minutos. Probás el resultado en localhost, si está bien lo dejás, si no, le pedís un ajuste.
¿Te trabaste en alguno de estos pasos?
En el Curso de Claude tenés este dashboard construido paso a paso en video, con el CLAUDE.md ya armado y el repositorio completo para clonar. Te ahorra entre 8 y 15 horas de prueba y error.
Paso 6 — Deploy en Vercel
Tener el dashboard corriendo en localhost está bueno mientras desarrollás. Pero vos querés que se pueda acceder desde cualquier compu, sin tener que dejar tu terminal abierta. Eso es deploy.
Pedile a Claude Code que te conecte con Vercel:
“Subí el proyecto a un repo en GitHub y deployalo en Vercel. Configurame las variables de entorno (access token de Meta y ad account id) en Vercel para que no queden en el código.”
Claude Code se encarga de:
- Inicializar el repo de Git.
- Crear el repositorio en GitHub (te puede pedir login).
- Subir el código.
- Conectarlo con Vercel.
- Configurar las variables de entorno.
- Hacer el primer deploy.
En 5 minutos tenés una URL pública (algo tipo dashboard-meta-ads-tu-cuenta.vercel.app) que podés compartir, agregar al bookmark, o conectar con un dominio propio (.com.ar, .com, lo que tengas).
Errores comunes y cómo destrabarlos
1. El access token de Meta no funciona
Los tokens de Marketing API tienen distintos scopes. Si tu token no incluye los permisos ads_read y ads_management, no vas a poder leer datos. Volvé a developers.facebook.com y generá uno con los scopes correctos. Si te trabás, pediéndole a Claude Code “el access token me da error 401, qué scopes necesito” te explica exactamente qué pedir.
2. Vercel tira error en el deploy
El error más común es que faltan variables de entorno. Claude Code te las pide en el .env local, pero en Vercel hay que cargarlas a mano (o que Claude Code lo haga vía API). Si te falla el deploy, pegale el error a Claude Code y te dice qué falta.
3. Los datos no se actualizan en tiempo real
Por default Next.js cachea las llamadas al API. Si querés data fresca, hay que configurar revalidate o usar fetch sin caché. Pedile a Claude Code “los datos están cacheados, configurame revalidate cada 5 minutos en todas las llamadas a Meta”.
4. La cuenta tiene muchas campañas y el dashboard se cuelga
Si manejás 50+ campañas activas, el primer build puede ir lento porque pide TODO de una. Pedile a Claude Code “implementá paginación en la tabla de campañas, 20 por página”. Listo.
Cómo seguir — sumar un agente que detecte anuncios mal performando
Una vez que tenés el dashboard funcionando, podés sumarle inteligencia automática. La feature más útil: un agente que cada mañana revise tus campañas, detecte cuáles están performando mal (ROAS bajo, CPA alto), y te genere un reporte con recomendaciones.
Le pedís a Claude Code:
“Sumale al dashboard un agente que corra todos los días a las 8 AM. Que revise las campañas activas, detecte las que tienen ROAS menor a 1 o CPA 30% por encima del promedio, y me mande un mail con un resumen + recomendaciones de optimización generadas con Claude.”
Claude Code te arma el cron job, la lógica de análisis y el envío del mail. Si tenés conocimiento sobre Meta Ads y querés sumarle más capas (lookalike audiences, sugerencias de copy, A/B tests automáticos), el cielo es el límite.
Para cerrar
Lo que era trabajo de una agencia (un dashboard a medida con conexión en tiempo real a tu cuenta de Meta Ads, reportes automáticos, alertas inteligentes) ahora lo construye una persona sin saber programar, en una tarde, con Claude Code.
Y lo más interesante: no es solo para Meta Ads. La misma metodología sirve para Google Ads, LinkedIn Ads, TikTok Ads, GA4, HubSpot, o cualquier API que tenga datos que querés ver de otra forma.
El paso más difícil es el primero: instalar Claude Code, abrir la terminal, y pedirle el primer prompt. Una vez que viste el ciclo de plan → aprobar → ejecutar funcionando, ya no se vuelve atrás.
Construí este dashboard + 7 sistemas más en 3 horas
En el Curso de Claude de Luzzi Digital armamos paso a paso este dashboard de Meta Ads + un sitio web profesional + un scraper de competencia + un cotizador web + una fábrica de contenido multicanal + un sistema contable + un asistente de reuniones + un dashboard de redes sociales. Con el CLAUDE.md ya escrito, plantillas para clonar, soporte humano y certificado. Pago único, acceso de por vida.
¿Necesito saber programar para armar este dashboard con Claude Code?
No. Claude Code escribe el código por vos. Lo que sí necesitás es saber describir lo que querés en español, leer lo que va pasando, y aprobar cada paso. Si nunca abriste una terminal, vas a tener que aprender los comandos básicos (cd, mkdir, npm) — Claude Code te los va explicando si se lo pedís.
¿En qué plan de Claude está incluido Claude Code?
En el plan Pro (USD 17/mes con plan anual o USD 20/mes mensual) y en Max (desde USD 100/mes). En el plan Free no está disponible.
¿Cuánto tiempo me lleva construir el dashboard desde cero?
Si seguís este tutorial sin ayuda y nunca usaste Claude Code, calculá entre 6 y 12 horas en total, repartidas en varios días (incluye trabarse, googlear, volver a intentar). Si lo armás con un curso que te tiene los pasos resueltos y el código de partida, lo tenés en 2-3 horas.
¿Cómo conecto Claude Code a la API de Meta Ads?
Hay dos caminos. El más profesional es vía MCP (un servidor que hace de puente entre Claude y la Marketing API de Meta). El más simple es pedirle a Claude Code que use el SDK oficial de Node directamente, pasándole tu access token y ad account ID. Ambos funcionan, el segundo es más fácil para empezar.
¿Se puede hacer lo mismo con Google Ads, LinkedIn Ads o TikTok Ads?
Sí. La metodología es idéntica: instalás el MCP o el SDK del API correspondiente, configurás credenciales, y pedís a Claude Code que arme el dashboard. Lo único que cambia son los nombres de las métricas y la forma de autenticación.
¿Es seguro darle mi access token de Meta a Claude Code?
Sí, si seguís buenas prácticas. Nunca pongas el token directo en el código. Guardalo en un archivo .env local, agregalo al .gitignore para que no se suba a GitHub, y cargalo como variable de entorno en Vercel. Claude Code te sugiere ese flujo por default.
¿Y si Meta cambia algo en su API y mi dashboard deja de funcionar?
Te enterás cuando algún endpoint deje de responder. Volvés a abrir Claude Code en el proyecto, le pegás el error y le pedís que actualice el código a la versión nueva del API. Como tenés el CLAUDE.md con el contexto del proyecto, Claude Code arregla esos cambios en minutos.
