Flint — язык визуализации от Microsoft Research для AI-агентов

Традиционно создание качественных визуализаций данных требовало написания десятков строк конфигурации: шкалы, оси, отступы, подписи, легенды, цвета. Для человека это рутина, а для AI-агента — источник ошибок. Flint решает эту проблему радикально: вместо того, чтобы просить агента настраивать каждую деталь графика, вы даёте ему компактную семантическую спецификацию, а компилятор Flint сам выводит оптимальные параметры отрисовки.

Проект разработан Microsoft Research совместно с лабораторией IDEAS Lab китайского университета Жэньминь и выпущен под лицензией MIT.

Как это работает

Flint — это промежуточный язык визуализации (visualization intermediate language). Он принимает на вход объект ChartAssemblyInput, содержащий три ключевых компонента:

1. Данные (data) — массив записей или ссылка на JSON/CSV/TSV-файл
2. Семантические типы (semantic_types) — описание смысла каждого поля: Quantity, Temperature, Price, Country, Rank и ещё 70+ типов
3. Спецификация графика (chart_spec) — тип графика, привязка полей к осям и визуальным каналам, базовый размер

На основе этих данных компилятор Flint автоматически определяет всё остальное: масштабирование, расположение подписей, формат легенды, размеры маркеров, цветовую схему и адаптацию под размер холста. Результат — готовая спецификация для одного из трёх целевых бэкендов: Vega-Lite, ECharts или Chart.js.

Пример использования как библиотеки

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 },
  },
});
// → готовая к рендерингу Vega-Lite спецификация

Смена бэкенда не требует изменения входных данных:

import { assembleECharts, assembleChartjs } from 'flint-chart';

const echartsOption = assembleECharts(input);
const chartjsConfig = assembleChartjs(input);

MCP-сервер для AI-агентов

Ключевая особенность Flint — нативная интеграция с AI-агентами через Model Context Protocol (MCP). Пакет flint-chart-mcp предоставляет MCP-сервер, который агент может использовать прямо в диалоге:

• Выбрать шаблон графика из 30+ поддерживаемых типов
• Валидировать спецификацию перед рендерингом
• Открыть интерактивное представление графика в MCP-совместимых клиентах (Claude Desktop, VS Code и др.)
• Вернуть статический PNG или SVG
• Сгенерировать нативную спецификацию для целевого бэкенда

Установка MCP-сервера одной командой:

npx -y flint-chart-mcp

Для сценариев без MCP предусмотрен отдельный agent skill — файл инструкций, который можно подключить к агенту как навык.

Поддерживаемые типы графиков

Flint поддерживает более 30 типов визуализаций: столбчатые и линейные диаграммы, scatter plots, heatmaps, donut charts, radar charts, streamgraphs, boxplots, grouped bar charts, розы (rose charts), диаграммы Санкея (Sankey), treemaps и многие другие. Все типы доступны во всех трёх бэкендах.

Архитектура проекта

Репозиторий организован как монорепозиторий с несколькими пакетами:

flint-chart/
├── packages/
│   ├── flint-js/          # npm-пакет flint-chart (TypeScript)
│   │   └── src/
│   │       ├── core/      # семантика, лейаут, общие типы
│   │       ├── vegalite/  # бэкенд Vega-Lite
│   │       ├── echarts/   # бэкенд ECharts
│   │       ├── chartjs/   # бэкенд Chart.js
│   │       └── test-data/ # фикстуры и генераторы тестовых данных
│   ├── flint-py/          # Python-порт (превью, пакет ожидается)
│   └── flint-mcp/         # npm-пакет flint-chart-mcp (MCP-сервер)
├── site/                  # Vite + React: лендинг, галерея, редактор, документация
├── agent-skills/          # файлы навыков для агентов
├── shared/test-data/      # общие JSON-фикстуры для JS и Python
└── docs/                  # архитектурные и дизайнерские документы

Для разработки требуется Node.js 18+. Демо-сайт поднимается локально через npm run site и включает интерактивный редактор, где можно экспериментировать со спецификациями Flint в реальном времени. Демо-сайт использует алиас flint-chart → packages/flint-js/src, поэтому правки в библиотеке применяются мгновенно без пересборки dist/.

Почему это важно

Flint решает фундаментальную проблему взаимодействия AI-агентов с визуализациями. Агенты хорошо справляются с генерацией текста и кода, но создание графиков требует пространственного мышления и эстетического вкуса, которые плохо формализуются в текстовых промптах. Flint выступает слоем абстракции между намерением и реализацией: агент описывает, что показать и какими данными, а компилятор определяет, как именно это отрисовать.

70+ семантических типов делают спецификации осмысленными: поле с типом Temperature будет отображаться с правильной цветовой шкалой (синий-красный градиент), а Country — с соответствующей геопривязкой. Это знание встроено в компилятор, а не требует указания от агента.

Для разработчиков Flint означает конец эпохи ручной настройки графиков — вы пишете компактную спецификацию в одном стиле для любого бэкенда. Для AI-агентов Flint означает надёжный, предсказуемый способ создавать визуализации без необходимости разбираться в деталях каждой библиотеки.

Исходный код доступен на GitHub: microsoft/flint-chart.