Hoe Microsoft Scheve door AI Gegenereerde Grafieken Oplost met Flint

Als je ooit aan Claude, ChatGPT of een lokaal model hebt gevraagd om een grafiek te genereren met ECharts of Chart.js, ben je waarschijnlijk terechtgekomen in een warboel van assen en onleesbare labels. Modellen besteden uren aan het door elkaar halen van keys in JSON-configs, het breken van lay-outs, en vereisen logge systeemprompts om een eenvoudige staafdiagram te tekenen.

Het Microsoft Research-team, in samenwerking met onderzoekers van het IDEAS-lab aan de Renmin University of China, heeft de flint-chart repository als open source vrijgegeven. Dit is een compacte intermediaire taal en compiler die specifiek is ontworpen voor het werken met LLMs en AI-agents.

Waarom Nog Een Visualisatie-Formaat

Het probleem met populaire bibliotheken zoals D3, ECharts of Plotly is hun pure complexiteit. Het configureren van een enkele grafiek in ECharts vereist het doorgeven van een enorm object met tientallen geneste velden: schalen, as-intervallen, opvulling, legenda-opmaak en adaptieve regels. Voor een LLM is dit een overdreven complexe taak waarbij hallucinaties of syntaxisfouten gemakkelijk optreden.

Flint werkt anders. Het neemt de rol aan van een intermediaire representatie (IR). Het neurale netwerk genereert een beknopte specificatie die alleen de essenties specificeert: grafiektype, invoergegevens en veldtoewijzing.

De Flint-compiler neemt dit compacte schema, berekent automatisch optimale elementgroottes, formatteert assen, verwijdert tekstoverlappen en vertaalt het resultaat naar native code voor de doelgrafiekbibliotheek.

Onder de Motorkap

In tegenstelling tot standaardbibliotheken waar velden worden verdeeld in gewone strings en getallen, gebruikt Flint semantische typering. Het systeem heeft meer dan 70 ingebouwde semantische typen, waaronder Rank, Temperature, Price, Country en Quantity.

Wanneer de compiler weet dat een veld Price-gegevens bevat, past het automatisch valuta-opmaakregels toe en selecteert de juiste schaal. Als de gegevens landen of beoordelingen specificeren, bepaalt Flint de beste aslabelplaatsing om overlapping te voorkomen.

Momenteel wordt de bibliotheek onderhouden in het JS/TS-ecosysteem en kan dezelfde specificatie naar vijf verschillende doelen vertalen:

• Vega-Lite
• ECharts
• Chart. js
• Plotly
• Native Excel-grafieken via Office.js

Hier is een voorbeeld van het compileren van een specificatie naar Vega-Lite:

import { assembleVegaLite } from 'flint-chart';

const spec = assembleVegaLite({
  data: { values: myData },
  semantic_types: { weight: 'Quantity', mpg: 'Quantity', origin: 'Country' },
  chart_spec: {
    chartType: 'Scatter Plot',
    encodings: { x: { field: 'weight' }, y: { field: 'mpg' }, color: { field: 'origin' } },
    baseSize: { width: 400, height: 300 },
  },
});

Als je besluit om de rendering-engine over te schakelen naar ECharts of Plotly, hoef je de specificatiecode zelf niet te wijzigen. Roep gewoon assembleECharts(input) of assemblePlotly(input) aan.

AI-Agentintegratie via MCP

De ontwikkelaars gaven prioriteit aan gereedheid voor autonome agent-werkstromen. De repository bevat een flint-chart-mcp-server die het Model Context Protocol implementeert.

In een MCP-ingeschakelde ontwikkelomgeving (zoals Cursor of Claude Desktop) krijgt de agent een kant-en-klare toolkit voor grafiekgeneratie. Het model dumpt niet zomaar JSON in de chat—het valideert het schema, controleert typen en rendert onmiddellijk een interactieve widget in de editorinterface.

De server starten in je werkomgeving kost slechts één commando:

npx -y flint-chart-mcp

Repository-structuur

Het project is gestructureerd als een monorepo:

• packages/flint-js — de hoofd-bibliotheekcode in TypeScript.
• packages/flint-mcp — de MCP-serverimplementatie voor agents.
• packages/flint-py — een Python-port prototype (momenteel alleen beschikbaar als broncode, het pakket is nog niet naar PyPI gepubliceerd).
• site — een interactieve demosite met een editor en galerie.

Als je het project lokaal wilt verkennen en wijzigingen wilt aanbrengen, duurt de implementatie slechts een paar minuten:

git clone https://github.com/microsoft/flint-chart
cd flint-chart
npm install
npm run site

De demo-client start op http://localhost:5274/. De bibliotheekcode is direct gekoppeld aan de site, dus wijzigingen in de compiler-logica worden direct meegenomen zonder handmatig pakketten te hoeven herbouwen.

Voor Wie Is Flint

Het gereedschap pakt een smal maar pijnlijk probleem aan. Als je AI-assistenten bouwt, dashboards met on-the-fly generatie, of neurale netwerken toegang geeft tot data-analyse, elimineert Flint de noodzaak om talloze validators en workarounds rond visualisaties te schrijven.

Het project is nog vers, maar het heeft Microsoft Research achter zich en updates komen regelmatig. Versie 0.4.0 voegde ondersteuning toe voor tientallen Plotly-sjablonen en bewerkbare Excel-grafieken, dus de bibliotheek is zeker het bookmarken waard.