Microsoft Flint: cómo crear gráficos profesionales con IA sin pelearte con el código

🧩 El problema que Flint viene a resolver

Si alguna vez has pedido a ChatGPT o a Claude que te haga un gráfico, sabes de lo que hablo: o te devuelve algo básico que parece sacado de Excel 2003, o se inventa una sintaxis que no compila. El problema no es que la IA sea tonta — es que los lenguajes de visualización actuales son demasiado low-level.

Vega-Lite, Apache ECharts y Chart.js son potentísimos, pero requieren que especifiques cada detalle: escalas, ejes, espaciado, etiquetas, colores. Cuando un agente de IA intenta generar todo ese JSON a mano, la probabilidad de error se dispara. Como explica el equipo de Microsoft Research, «los agentes son especialmente propensos a errores cuando tienen que gestionar detalles complejos de bajo nivel, y el código resultante es difícil de inspeccionar, reparar o reutilizar».

Flint ataca justo ese punto. En lugar de pedirle al agente que escriba 200 líneas de JSON para un heatmap, le pides que defina qué significan los datos y qué tipo de gráfico quieres. El compilador de Flint se encarga del resto.

🧩 Caso 1: Un heatmap en 15 líneas

El ejemplo que usa Microsoft en su guía oficial de inicio es demoledor. Un heatmap tradicional en Vega-Lite necesita decenas de parámetros manuales: cómo parsear fechas, si la escala empieza en cero, qué esquema de color usar para valores positivos y negativos...

Con Flint defines un DataSpec (qué significa cada columna: fecha, precio, país) y un ChartSpec (tipo de gráfico + qué columna va a cada eje). El compilador infiere todo lo demás: escalas, formato de etiquetas, paleta de colores, tamaño de celdas. Mismo resultado, 15 líneas en lugar de 200.

He probado el ejemplo con mis propios datos de visitas mensuales a La Frontera IA y funciona. La primera vez que ves un gráfico pulido salir de una spec que parece un JSON de configuración, entiendes por qué el proyecto tiene más de 725 estrellas en GitHub en solo un día.

🧩 Caso 2: Un agente que elige el backend adecuado solo

Aquí viene lo que de verdad me parece potente. Una misma spec de Flint compila a Vega-Lite, ECharts y Chart.js sin reescribir nada. Esto significa que tu agente puede decidir en tiempo de ejecución qué librería usar según el tipo de gráfico o el entorno donde se va a renderizar.

Según DeepWiki, Flint actúa como un «puente semántico» entre los LLMs y las librerías de visualización. El agente ya no escribe JSON de bajo nivel — expresa la intención del gráfico, y Flint la traduce a la sintaxis nativa del backend elegido. En la práctica esto reduce los errores de sintaxis un montón, porque el LLM no tiene que recordar si ECharts usa xAxis o x_axis.

El proyecto incluye un servidor MCP (listado en MCP Market) que permite conectar Flint directamente a apps como Claude Desktop, Cursor o VS Code. Instalas el MCP, le pasas datos, y el agente te devuelve gráficos renderizados en el chat. Sin tocar una línea de HTML.

🧩 Caso 3: Data Formulator, el proyecto que ya usa Flint en producción

Flint no es un experimento de laboratorio. Ya está en producción dentro de Data Formulator, otra herramienta open source de Microsoft Research. Data Formulator es un asistente de visualización que combina IA con manipulación de datos — básicamente, le dices «muéstrame la evolución de ventas por región en los últimos 12 meses» y te genera el gráfico usando Flint como lenguaje intermedio.

AIssential lo resume bien: «Para ingenieros de IA que construyen herramientas de análisis de datos con LLMs, Flint ofrece una solución robusta para visualización automatizada. Tus agentes pueden generar gráficos de alta calidad y editables por humanos desde especificaciones compactas».

Personalmente creo que esta integración con Data Formulator es la prueba de fuego. Si Microsoft está usando Flint internamente para su propia herramienta de visualización, el proyecto tiene recorrido. No es el típico repo que acumula estrellas en GitHub y desaparece a los dos meses.

🧩 Caso 4: Conectar Flint a tu agente en 3 pasos

Esta es la parte práctica. He seguido la guía de inicio y esto es lo que necesitas:

1. Instalar el paquete: npm install flint-chart. Funciona con TypeScript y JavaScript. Nada de dependencias exóticas ni configuraciones de 20 pasos.

2. Conectar el MCP: Si usas Claude Desktop o VS Code, añades el servidor MCP a tu configuración. La documentación del MCP incluye ejemplos para los clientes más populares. El servidor expone herramientas para crear, validar y renderizar gráficos directamente en la conversación.

3. Definir datos y tipo de gráfico: Le pasas un DataSpec con tus datos y tipos semánticos, más un ChartSpec con el tipo de gráfico y el mapeo de campos. Flint soporta 46 tipos de gráficos: desde barras y líneas hasta treemaps, diagramas de Sankey, mapas de calor y violin plots.

Me costó 3 intentos que el MCP funcionara bien en Claude Desktop — el truco está en que los datos deben pasarse como data.values (array inline) o como data.url (ruta a un CSV/JSON local). Si usas data.url con rutas relativas, asegúrate de que el MCP tiene acceso al directorio. Es un detalle tonto pero me comió 20 minutos.

🧩 Caso 5: Por qué esto cambia las reglas del juego para dashboards con IA

El debate en Hacker News — 286 puntos y 110 comentarios en menos de 24 horas — refleja algo interesante. Varios comentaristas señalan que «For AI agents» es marketing, pero el valor real está en tener un lenguaje intermedio que sea fácil de generar y fácil de editar por humanos.

Y tienen razón a medias. Sí, Flint es un lenguaje para expresar gráficos de forma compacta. Pero el hecho de que esté diseñado desde cero para que los LLMs lo generen bien es lo que lo diferencia. Los tipos semánticos (date, price, percentage, country) son conceptos que un LLM puede inferir fácilmente del contexto. No necesita adivinar si una columna es una fecha o un string — el compilador lo resuelve.

Windows News lo describió como «un puente entre agentes de IA y la creación de gráficos mediante un nuevo lenguaje intermedio». Let's Data Science añade que «el cambio importante es que Flint desplaza la responsabilidad del agente de escribir JSON de bajo nivel a expresar intención de alto nivel».

Para empresas que construyen dashboards con IA generativa — piensa en herramientas como Microsoft Fabric, Power BI con Copilot o Google Looker — Flint resuelve el problema del «último kilómetro»: pasar de «el agente entiende los datos» a «el agente produce un gráfico que no da vergüenza enseñar».