Jak Microsoft rozwiązuje problem krzywych wykresów generowanych przez AI za pomocą Flint

Jeśli kiedykolwiek prosiłeś Claude, ChatGPT lub model lokalny o wygenerowanie wykresu przy użyciu ECharts lub Chart.js, prawdopodobnie spotkałeś się z chaosem osi i nieczytelnymi etykietami. Modele przez długie godziny mylą klucze w konfiguracjach JSON, psują układ i wymagają rozbudowanych promptów systemowych tylko po to, by narysować prosty wykres słupkowy.

Zespół Microsoft Research we współpracy z badaczami z laboratorium IDEAS na Uniwersytecie Renmin w Chinach udostępnił repozytorium flint-chart jako otwarte oprogramowanie. To kompaktowy język pośredni i kompilator, zaprojektowany specjalnie do pracy z LLM-ami i agentami AI.

Dlaczego kolejny format wizualizacji

Problem z popularnymi bibliotekami takimi jak D3, ECharts czy Plotly polega na ich ogromnej złożoności. Skonfigurowanie pojedynczego wykresu w ECharts wymaga przekazania masywnego obiektu z dziesiątkami zagnieżdżonych pól: skale, interwały osi, marginesy, formatowanie legendy i reguły adaptacyjne. Dla LLM-a to zadanie zbyt skomplikowane, gdzie łatwo dochodzi do halucynacji lub błędów składniowych.

Flint działa inaczej. Pełni rolę reprezentacji pośredniej (IR). Sieć neuronowa generuje zwięzłą specyfikację określającą tylko najważniejsze elementy: typ wykresu, dane wejściowe i mapowanie pól.

Kompilator Flint pobiera ten kompaktowy schemat, automatycznie oblicza optymalne rozmiary elementów, formatuje osie, usuwa nakładające się teksty i tłumaczy wynik na natywny kod docelowej biblioteki graficznej.

Pod maską

W przeciwieństwie do standardowych bibliotek, gdzie pola dzielą się na zwykłe ciągi znaków i liczby, Flint wykorzystuje typowanie semantyczne. System zawiera ponad 70 wbudowanych typów semantycznych, w tym Rank, Temperature, Price, Country i Quantity.

Gdy kompilator wie, że pole zawiera dane typu Price, automatycznie stosuje reguły formatowania walutowego i dobiera odpowiednią skalę. Jeśli dane określają kraje lub oceny, Flint określa najlepsze rozmieszczenie etykiet osi, aby zapobiec nakładaniu się.

Obecnie biblioteka jest utrzymywana w ekosystemie JS/TS i może tłumaczyć tę samą specyfikację na pięć różnych celów:

• Vega-Lite
• ECharts
• Chart.js
• Plotly
• Natywne wykresy Excel przez Office.js

Oto przykład kompilacji specyfikacji do 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 },
  },
});

Jeśli zdecydujesz się przełączyć silnik renderowania na ECharts lub Plotly, nie będziesz musiał zmieniać samego kodu specyfikacji. Po prostu wywołaj assembleECharts(input) lub assemblePlotly(input).

Integracja agenta AI przez MCP

Deweloperzy priorytetowo potraktowali gotowość do autonomicznych workflowów agentów. Repozytorium zawiera serwer flint-chart-mcp implementujący Model Context Protocol.

W środowisku programistycznym z obsługą MCP (takim jak Cursor czy Claude Desktop) agent otrzymuje gotowy zestaw narzędzi do generowania wykresów. Model nie tylko zrzuca JSON do czatu — waliduje schemat, sprawdza typy i natychmiast renderuje interaktywny widżet w interfejsie edytora.

Uruchomienie serwera w środowisku roboczym zajmuje tylko jedno polecenie:

npx -y flint-chart-mcp

Struktura repozytorium

Projekt jest zorganizowany jako monorepo:

• packages/flint-js — główny kod biblioteki w TypeScript.
• packages/flint-mcp — implementacja serwera MCP dla agentów.
• packages/flint-py — prototyp portu Python (obecnie dostępny tylko jako kod źródłowy, pakiet nie został jeszcze opublikowany w PyPI).
• site — interaktywna strona demo z edytorem i galerią.

Jeśli chcesz poznać projekt lokalnie i wprowadzać zmiany, wdrożenie zajmuje zaledwie kilka minut:

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

Klient demo uruchomi się pod adresem http://localhost:5274/. Kod biblioteki jest bezpośrednio połączony ze stroną, więc zmiany w logice kompilatora są pobierane na bieżąco bez ręcznego przebudowywania pakietów.

Dla kogo jest Flint

Narzędzie to rozwiązuje wąski, ale bolesny problem. Jeśli budujesz asystentów AI, pulpity z generowaniem na bieżąco lub dajesz sieciom neuronowym dostęp do analizy danych, Flint eliminuje konieczność pisania licznych walidatorów i obejść wokół wizualizacji.

Projekt jest świeży, ale za nim stoi Microsoft Research, a aktualizacje pojawiają się regularnie. W wersji 0.4.0 dodano obsługę dziesiątek szablonów Plotly i edytowalnych wykresów Excel, więc biblioteka zdecydowanie warto dodać do zakładek.