5 min

Cómo crear gráficos y visualización de datos con Data Commons MCP

Crea gráficos y visualización de datos con el MCP de Data Commons y mcp-server-chart de Antvis en Claude Desktop: datos verificables y gráficos desde el chat.

Crear gráficos y visualización de datos con el MCP de Data Commons consiste en instalar el servidor MCP datacommons-mcp (con una clave de API de Datacommons.org) y el servidor de visualización mcp-server-chart de Antvis en Claude Desktop, de modo que puedas pedir a Claude que obtenga datos verificables y genere gráficos directamente en el chat. Esta mañana me vi con el encargo de analizar un conjunto de datos para un cliente. Aunque el análisis será a base de exportaciones de datos de SEMrush y scripts de Python para dar formato a los datos que necesito, estaba procrastinando un poco ante la idea de tener que dibujar gráficos en Excel una vez limpiara mis datos.


Sin querer sacar del cajón mis antaño veneradas habilidades de Excel todavía, empecé a buscar una librería de visualización para usar como servidor MCP (porque claro que lo iba a hacer) y encontré esto, un servidor MCP para Antvis, un paquete con el que la gente de visualización de datos quizá esté familiarizada.

En fin, parecía suficientemente interesante, pero entonces (claro) ¿cómo escribir sobre ello? Me gusta compartir, pero no puedo compartir datos de clientes...

Recordé el Data Commons MCP, que descubrí hace unos meses pero que hasta ahora no había necesitado. Con ganas de aprender ambas librerías, y siguiendo procrastinando la tarea de hoy, pensé en escribir mi experiencia.

Portal de la API de Data Commons (enlace)

Lo primero de todo, vamos a configurarlo.

Cómo configurar el MCP de Data Commons

Primero vamos a necesitar una clave de API de Datacommons.org.

Sigue los pasos para crear la cuenta y dale a tu app un nombre y una descripción, algo así:

Crear una nueva app en el portal de Data Commons

Al guardar, obtendrás una clave de API y una Secret Key (que no necesitarás: hoy solo hace falta la clave de API).

A continuación (y gracias una vez más a Desktop Commander) instala la API de Datacommons basada en Python.

Lo bonito de Desktop Commander es que puede interpretar tus comandos y ejecutar operaciones de disco, así que un prompt como este debería instalar el repositorio.

clone and install: https://github.com/datacommonsorg/agent-toolkit/tree/main/packages/datacommons-mcp + any required dependencies to c:/mcp/datacommons*

Yo tengo Python instalado, pero si no es tu caso, Claude probablemente lo señalará y te pedirá que lo instales.

Si no estás seguro, ve a Powershell, CMD o lo que sea y escribe:

python --version

python --version

La última versión estable ahora es la 3.14, que puedes descargar e instalar aquí: https://www.python.org/downloads/

Pasos de instalación

Como se le pidió, Claude usó Desktop Commander para clonar el repositorio agent-toolkit en una ubicación temporal, luego extrajo solo el paquete datacommons-mcp a mi directorio de servidores MCP en C:/mcp/datacommons y limpió los archivos temporales.

Los comandos que ejecutó fueron:

git clone https://github.com/datacommonsorg/agent-toolkit.git C:/mcp/datacommons-temp

Claude copiará («clonará» en términos de Git) el paquete MCP de packages/datacommons-mcp a tu ubicación preferida.

El paquete en sí no necesita instalación manual. En su lugar, lo configuras para que se ejecute a través de uvx (uvx, por lo que entiendo, crea un entorno temporal en tu PC para ejecutar estas librerías). Esto gestiona las dependencias de Python automáticamente cuando Claude Desktop arranca, así que no tienes que preocuparte por ello.

Configuración de Claude Desktop

Abre tu archivo claude_desktop_config.json (en Windows está en C:\Users[YourName]\AppData\Roaming\Claude\claude_desktop_config.json) y añade esta entrada a tu lista (cada vez más larga) de mcpServers:

"datacommons": {
  "command": "uvx",
  "args": [
    "datacommons-mcp",
    "serve",
    "stdio"
  ],
  "env": {
    "DC_API_KEY": "your-api-key-here"
  }
}

Un par de detalles técnicos: uvx datacommons-mcp serve stdio le indica que ejecute el servidor en transporte stdio (que es lo que Claude Desktop necesita para poder ejecutar un servidor MCP), y la variable de entorno DC_API_KEY es, por supuesto, tu clave de API de Data Commons.

Cuando termines, reinicia Claude Desktop y pide a Claude que compruebe que el MCP de datacommons funciona. Deberías obtener algo así:

Así que vamos a probarlo antes de pasar a la instalación de visualización / gráficos.

Las estadísticas de 2025 todavía no están disponibles (es justo)

La respuesta:

Espera, ¿pero alucinó?

Vi a alguien quejándose de que observaba una discrepancia entre la interfaz de una fuente de datos SaaS y el servidor MCP de la API. Mi comentario fue, a grandes rasgos, de que debía de haber algo mal en el MCP (si es que estaba conectado), o en el prompt, o en ambos. Aun así, merece la pena comprobarlo.

Esto estaba en la respuesta de la API de Datacommons:

"time_series":[["2024",39431263.0]]}],"source_metadata":{"source_id":"2176550201","import_name":"USCensusPEP_Annual_Population",

¡Creo que es bastante emocionante! Pero comprueba siempre tu investigación.

A continuación, tendremos que instalar mcp-server-chart (¡una librería bastante enorme para visualización de datos!).

Es muy fácil: funciona directamente nada más sacarlo de la caja. Solo tienes que volver a tu claude_config y añadir:

"mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }

¡Luego, reinicia Claude! Tras reiniciarlo, pruébalo con un prompt como:

(estoy siendo deliberadamente vago para probar la comprensión de Claude del contexto del servidor MCP)

Mira el resultado:

Muy bien, reconoció el contexto y seleccionó el MCP de Antvis de inmediato. Podría haber sido más aventurado con mi petición, pero para una prueba de fuego, todo funcionó bien a la primera. ¡Esto es lo que nos gusta!

Una advertencia: estos gráficos se sirven a través de un hostname externo en el que puedo confiar, pero por el que no puedo responder. Estoy enviando deliberadamente cero datos sensibles, confidenciales o privados por la red. Estoy seguro de que está bien, pero quería avisarte. Si usas algo con un enfoque más orientado a la privacidad, deberías analizar esto con un LLM local o (toma ya) manualmente.

Vamos a probar algo un poco más exigente:

Esta salida es súper interesante; para la gente de contenido / investigación tienes tu investigación prototipo para enviar a un diseñador visual de verdad.

No lo olvides, Gemini MCP es tu amigo aquí: puedes usar Gemini (con grounding) para consultas basadas en estadísticas (comprueba siempre tu investigación) y empaquetar rápido unos cuantos conceptos prototipo interesantes para visualización de datos, ideas para infografías y demás. En minutos, en lugar de días.

¿No te importan las imágenes estáticas de gráficos? Usa Chart.js o los modos de artifact de Claude para algo quizá un poco menos consistente visualmente si consigues que funcione bien (el mío falló bastante espectacularmente en el primer intento).

El primer intento de Claude con un artifact de React: no tan bueno

¿Para qué es útil esto?

Me gusta mucho la productividad que habilita la IA. No me gusta la «creatividad» sustituida por la IA.

Con ese espíritu, esta visión general básica te muestra (espero) lo que va siendo posible con la recopilación de datos verificables con fines de investigación.

Usando mis consultas de consumo energético como ejemplo:

Imagine this scenario, a brief like: "The Real Cost of Remote Work by State" (I'm sure that's been done thousands of items already but it is a good example!

1. Data Commons: Fetch electricity costs by state (2024)
2. Data Commons: Get average household income by state
3. Calculate: Energy cost as % of income
4. Chart: Treemap showing "states where remote work hurts wallets most"
5. Article: Embed chart, cite Data Commons + EIA sources

Puedes realmente profundizar en la librería de Data Commons para ideas como detección de tendencias para contenido evergreen, orientación geográfica del contenido, investigación periodística (p. ej.: «¿se correlaciona el PIB con la felicidad de la población?»), tal vez incluso tendencias del sector, informes de investigación de mercado, periodismo de datos y más.

¡Disfrútalo!

Artículos relacionados