Flint

// Overview

Flint is a visualization intermediate language from Microsoft, built so that AI agents can produce good-looking charts without hardcoding the fiddly parts. Instead of asking a model to emit verbose parameters for scales, axes, spacing, labels and layout, Flint derives those decisions from a high-level semantic specification, the data itself, and an optional visual theme. The result is a spec compact enough for a model to get right and readable enough for a person to edit by hand.

The semantic layer is what makes this work: Flint captures what each field means using 70+ semantic types such as `Rank`, `Temperature`, `Price` or `Country`, then adapts sizing, spacing, marks, labels and legends to the data's cardinality and the canvas. Visual themes are formal specifications — presets include New York Times, Economist, Swiss and McKinsey styles — so a design system can be defined once and applied consistently across a whole chart library.

The repository ships two components. `flint-chart` is a JavaScript/TypeScript library that compiles the same `ChartAssemblyInput` into Vega-Lite, ECharts, Chart.js, Plotly or native, editable Excel charts. `flint-chart-mcp` is an MCP server that gives agents Flint tools and chart guidance so they can pick a template, validate it, and open an interactive chart view from a chat or coding environment. Microsoft also runs a hosted MCP endpoint for trying it without a local install, and the design is described in an accompanying arXiv paper.

// What it does

• Semantic chart specs built on 70+ semantic types, so the spec says what a field means rather than how to draw it
• Automatic layout that adapts sizing, spacing, labels, marks and legends to the data and the canvas
• Formal visual themes — presets, a custom ThemeSpec, or an inherited theme — applied consistently across a chart library
• One input, five backends: the same ChartAssemblyInput compiles to Vega-Lite, ECharts, Chart.js, Plotly and native Excel charts
• An MCP server (`flint-chart-mcp`) that gives agents chart tools, validation and an interactive chart view
• A hosted MCP endpoint for trying Flint from Copilot in VS Code or Claude without installing anything

// Getting started

Flint installs from npm as a library, runs as an MCP server via npx, or can be tried against Microsoft's hosted endpoint. The Python port is currently a source-only preview in the repo.

npm install flint-chart

# for agents and MCP clients
npx -y flint-chart-mcp

https://flint.data-formulator.ai/mcp

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 },
  },
});

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

const echartsOption = assembleECharts(input);
const chartjsConfig = assembleChartjs(input);
const plotlyFigure = assemblePlotly(input);
const excelArtifact = assembleExcel(input);

Commands and code are distilled from the project's own documentation — always check the official repo for the latest.

// When to use it

• Let a coding or research agent produce presentation-quality charts without hand-writing hundreds of lines of Vega-Lite
• Standardise chart style across a product by defining one ThemeSpec and reusing it for every chart an agent generates
• Generate an editable native Excel chart from the same spec you use for a web dashboard
• Add charting to an MCP-capable assistant so it can visualise data it has just fetched or computed

// How Flint compares

Flint alongside other open-source generative ui sdks tools AI/TLDR tracks, ranked by GitHub stars.