Cómo hacer un dashboard con Claude y la API

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'

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
  }
}

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

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")

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

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)