Capítulo 5 de 6 · min 17:39 a 31:46
Cómo construir el dashboard con Claude Code: master, service account y desarrollo
Claude Code crea la tabla master en BigQuery, clona el repo público del dashboard (Next.js, Tailwind, Recharts) y agrega páginas nuevas prompteando. Incluye la creación de la service account.
Preparar Claude Code
Para este paso hay que tener instalado el MCP de BigQuery en Claude Code: acá está la guía para configurarlo. Con eso listo, se copia el nombre del dataset y se verifica el acceso:
Claude, ¿podés ver este dataset?
El repo público del dashboard incluye además un archivo de prompts que concentra todo el trabajo que hay que pedirle a Claude Code para llegar al resultado final.
En el video se trabaja con permisos en modo automático (el equivalente a claude --dangerously-skip-permissions): Claude corre sin frenar en cada paso y el trabajo agéntico avanza mucho más rápido. Dice “danger” por algo: hay que tener el entorno bien configurado antes de usarlo.
La service account para el deployment
Mientras trabajás local, el MCP alcanza. Pero cuando el dashboard esté deployado en Vercel, el MCP no está ahí para conectar la información de BigQuery: hace falta una service account.
En Google Cloud, sección Service Accounts del proyecto:
- Creá la service account (el nombre no importa; importa a qué le das acceso).
- Generá una key: ese archivo es la llave privada que se le pasa a Claude. Nunca la muestres en público.
- Dale a la service account acceso data editor al dataset creado con Detrics (donde está la data cruda y donde se va a crear el master).
- En la sección IAM del proyecto, Grant Access con el mail de la service account y el rol BigQuery Job User.
Con eso, le avisás a Claude que las keys están listas, y esa credencial es la que va a usar el deployment en Vercel para servir los datos.
El master y el dashboard en localhost
Claude crea la tabla master: una view de BigQuery que agarra la información de las distintas tablas crudas y la consolida en una sola, el mejor modus operandi para un dashboard (todo en una misma tabla, y esa tabla lo alimenta). Fecha por fecha, con la inversión, clicks y costo de las plataformas junto a checkout, purchase revenue y transactions de GA4.
Después clona el repo público de Detrics y levanta el dev server: el mismo dashboard que está corriendo en Vercel, ahora en tu localhost, listo para usar como template.
Agregar páginas prompteando
Acá es donde te podés poner a jugar. En el video, se agrega una página nueva con un prompt simple:
Claude, me interesa hacer una página de análisis de las landing pages de GA4. Implementala con una tabla mostrando todo de manera estándar.
Claude consulta BigQuery, analiza la información, escribe el código y construye la página: sesiones, porcentaje del total y bounce rate por landing page. De ahí podés llevarlo a cosas cada vez más complejas: filtros, conversiones por landing page, lo que se te ocurra. Prompteando construís el dashboard que quieras.
Cómo está construido el repo
El repositorio usa Next.js como web server (elegido por su integración fácil con Vercel para el deployment), Tailwind para el CSS, y React con Recharts para los componentes del dashboard. Cada página tiene su query a la base de datos en BigQuery, y los charts salen de Recharts. No hace falta saber cómo funciona todo esto para usarlo, pero está todo ahí para el que quiera meterse.
Preguntas frecuentes
¿Para qué necesito una service account de Google Cloud?
Para el deployment. El MCP de BigQuery sirve mientras trabajás local con Claude Code, pero la app deployada en Vercel necesita su propia credencial para consultar el dataset: una service account con acceso de data editor al dataset y el rol job user a nivel proyecto.
¿Qué es el archivo de prompts del repo?
El repo público del dashboard incluye un archivo que concentra todo el trabajo que hay que pedirle a Claude Code para llegar al dashboard final, para que no tengas que inventar los prompts desde cero.
¿Con qué stack está construido el dashboard?
Next.js como web server (por su integración directa con Vercel), Tailwind para el CSS, y React con Recharts para los componentes de visualización. Cada página tiene su query a BigQuery.
¿Puedo agregarle páginas nuevas al dashboard?
Sí, prompteando: en el video se agrega una página de análisis de landing pages con una sola instrucción, y de ahí se puede iterar con filtros, conversiones o lo que se te ocurra.
Todos los capítulos de esta serie
- 0:00 1. Muestra del dashboard final
- 4:24 2. Arquitectura y pasos para construirlo
- 6:51 3. Primer paso: conectar fuentes y destinos de datos con Detrics
- 8:52 4. Segundo paso: crear las tablas y transferencias a BigQuery
- 17:39 5. Tercer paso: consolidar las tablas y construir el dashboard con Claude Code
- 31:46 6. Paso final: hacer el deployment con Vercel
¿Querés construir esto con tus propios datos?