Cómo hacer un dashboard con Claude y la API

Lo que vas a aprender

• Configurar el SDK de Anthropic en Python
• Diseñar un prompt que genere código de dashboard funcional
• Pasar tus propios datos para que Claude los visualice
• Guardar y servir el dashboard HTML generado
• Iterar sobre el diseño con follow-up prompts

Paso 1: Instalar el SDK y configurar la API key

Empezamos preparando el entorno. El SDK oficial de Anthropic para Python simplifica las llamadas a la API. Crea una carpeta para el proyecto y un entorno virtual para aislar dependencias. Luego instala el paquete anthropic. Necesitas tu API key desde console.anthropic.com (menú Settings > API Keys). Nunca la escribas directamente en el código: guárdala como variable de entorno. En Linux/macOS usa export; en Windows PowerShell usa $env. Para builders en España y LATAM, ten en cuenta que la facturación es en USD y conviene poner un límite de gasto mensual en la consola para evitar sorpresas.

python -m venv venv
source venv/bin/activate  # En Windows: venv\Scripts\activate
pip install anthropic
export ANTHROPIC_API_KEY='sk-ant-tu-clave-aqui'

Consejo: Añade venv/ y un archivo .env a tu .gitignore para no filtrar la clave en Git.

Error común: Si expones tu API key en un repo público, revócala de inmediato desde la consola: los bots la detectan en minutos.

Paso 2: Preparar los datos de entrada

Un dashboard sin datos no sirve. Crea un archivo datos.json con métricas de ejemplo que quieras visualizar. En este tutorial usamos ventas mensuales por región, algo típico en negocios de LATAM y España. Claude trabaja mejor cuando los datos vienen estructurados y con nombres de campo claros. Si tienes un CSV, puedes cargarlo con pandas y convertirlo a JSON. Mantén el dataset pequeño (unas decenas de filas) para el prototipo: así reduces tokens y coste, y el modelo genera visualizaciones más precisas. Más adelante conectarás datos reales.

{
  "titulo": "Ventas 2024 por region",
  "meses": ["Ene","Feb","Mar","Abr","May","Jun"],
  "regiones": {
    "Espana": [12000, 14500, 13200, 16800, 15100, 18900],
    "Mexico": [9800, 10200, 11500, 10900, 12300, 13800],
    "Argentina": [7200, 6800, 8100, 8900, 9400, 10100]
  },
  "kpis": {
    "ventas_totales": 234500,
    "crecimiento_pct": 18.4,
    "clientes_nuevos": 342
  }
}

Consejo: Usa nombres de campo descriptivos: Claude infiere el tipo de gráfico ideal a partir de la semántica.

Paso 3: Escribir el prompt generador del dashboard

Aquí está el núcleo del tutorial. Creamos un script que envía tus datos a Claude junto con instrucciones precisas para que devuelva un dashboard HTML autocontenido. La clave es un prompt específico: pide un único archivo HTML con Chart.js embebido vía CDN, diseño responsive, y que use exactamente los datos proporcionados. Le indicamos que responda SOLO con el código, sin explicaciones, para poder guardarlo directo. Usamos el modelo claude-opus-4-8 por su fuerza generando código complejo. El parámetro max_tokens debe ser alto (4096+) porque un dashboard completo ocupa bastante. system define el rol y las restricciones globales.

import anthropic
import json

client = anthropic.Anthropic()

with open("datos.json", "r", encoding="utf-8") as f:
    datos = json.load(f)

prompt = f"""Genera un dashboard web completo en un unico archivo HTML.
Requisitos:
- Usa Chart.js via CDN (https://cdn.jsdelivr.net/npm/chart.js)
- Diseno responsive, moderno, con tarjetas para los KPIs arriba
- Un grafico de lineas comparando las regiones por mes
- Un grafico de barras con el total por region
- Paleta de colores profesional, tipografia sans-serif
- Usa EXACTAMENTE estos datos: {json.dumps(datos, ensure_ascii=False)}
Responde SOLO con el codigo HTML, sin explicaciones ni markdown."""

mensaje = client.messages.create(
    model="claude-opus-4-8",
    max_tokens=4096,
    system="Eres un experto frontend. Devuelves codigo limpio y funcional.",
    messages=[{"role": "user", "content": prompt}]
)

html = mensaje.content[0].text

Consejo: Incluir los datos como JSON dentro del prompt garantiza que Claude no invente cifras.

Error común: Si pides 'explícame el código', Claude añadirá texto que romperá el HTML. Sé explícito: SOLO código.

Paso 4: Limpiar y guardar el HTML generado

A veces Claude envuelve el código en bloques markdown (```html ... ```) pese a pedirle que no lo haga. Añadimos una limpieza defensiva para eliminar esos delimitadores antes de guardar. Luego escribimos el resultado en dashboard.html con codificación UTF-8, imprescindible para que los acentos de español (España, región, méxico) se muestren bien. Este paso convierte la respuesta del modelo en un archivo real que puedes abrir en el navegador. Mantén la limpieza sencilla pero robusta: cubre los casos más comunes de formateo.

# Limpieza defensiva por si viene envuelto en markdown
html = html.strip()
if html.startswith("```"):
    lineas = html.split("\n")
    html = "\n".join(lineas[1:-1]) if lineas[-1].strip() == "```" else "\n".join(lineas[1:])

with open("dashboard.html", "w", encoding="utf-8") as f:
    f.write(html)

print("Dashboard guardado en dashboard.html")
print(f"Tokens usados: {mensaje.usage.input_tokens} in / {mensaje.usage.output_tokens} out")

Consejo: El objeto mensaje.usage te da los tokens consumidos: úsalo para estimar coste por generación.

Error común: Sin encoding='utf-8' los caracteres como ñ o á aparecerán corruptos en Windows.

Paso 5: Servir y visualizar el dashboard

Abre el dashboard en tu navegador. Puedes hacer doble clic en el archivo, pero es mejor servirlo con un servidor local para que Chart.js cargue sin problemas de CORS o rutas. Python trae un servidor HTTP integrado que no requiere instalar nada. Ejecútalo en la carpeta del proyecto y visita la URL. Verás las tarjetas de KPIs arriba y los gráficos interactivos debajo, poblados con tus datos reales. Si algo no se ve bien, no edites el HTML a mano todavía: en el siguiente paso lo iteramos con Claude.

python -m http.server 8000
# Abre en el navegador: http://localhost:8000/dashboard.html

Consejo: Ctrl+Shift+R fuerza recarga sin caché tras regenerar el dashboard.

Error común: Si el puerto 8000 está ocupado, usa otro: python -m http.server 8080.

Paso 6: Iterar el diseño con follow-up prompts

La ventaja de generar con IA es iterar rápido. En lugar de editar CSS a mano, describe los cambios y deja que Claude regenere. Para mantener contexto, envía el HTML actual junto con la petición de cambio. Aquí pedimos modo oscuro y un gráfico adicional de dona. Reutilizamos el cliente. Este patrón de 'código actual + instrucción de cambio' es más fiable que empezar de cero, porque preserva lo que ya funciona. Guarda cada versión con un nombre distinto si quieres comparar resultados antes de decidir.

cambio = """Aqui esta mi dashboard actual:

{html}

Modificalo para: 1) anadir modo oscuro por defecto,
2) incluir un grafico de dona con el porcentaje de ventas por region.
Responde SOLO con el HTML completo actualizado.""".format(html=html)

mensaje2 = client.messages.create(
    model="claude-opus-4-8",
    max_tokens=4096,
    messages=[{"role": "user", "content": cambio}]
)

nuevo_html = mensaje2.content[0].text.strip()
if nuevo_html.startswith("```"):
    nuevo_html = "\n".join(nuevo_html.split("\n")[1:-1])

with open("dashboard_v2.html", "w", encoding="utf-8") as f:
    f.write(nuevo_html)

Consejo: Para dashboards grandes que superen max_tokens, pide cambios por secciones en vez del archivo completo.

Error común: Enviar HTML largo en cada iteración consume muchos tokens de entrada: vigila el coste si iteras mucho.

Resultado

Has construido un pipeline completo que convierte datos JSON en un dashboard web interactivo usando la API de Claude. Tienes un script Python reutilizable que genera HTML con gráficos de Chart.js, lo limpia, lo guarda con codificación correcta y lo sirve localmente. Además dominas el patrón de iteración con follow-up prompts para refinar el diseño sin tocar código a mano. Puedes adaptar este flujo a cualquier dataset propio cambiando datos.json.