Flint: Microsoft's Visualization Language That Lets AI Agents Create Polished Charts

By Prahlad Menon Published 2026-07-10 3 min read

Microsoft Research just released Flint, an open-source visualization intermediate language designed specifically for AI agents to create charts reliably.

The core insight: instead of asking AI agents to tune verbose chart configuration (scales, axes, spacing, labels, layout), Flint derives optimized settings from the data, semantic types, and chart type automatically.

The Problem Flint Solves

When you ask an AI agent to generate a chart, it typically has to:

Understand your data structure
Pick appropriate scales and axes
Configure spacing and labels
Handle edge cases (long labels, many categories, etc.)
Output valid JSON for whatever charting library you use

That’s a lot of places for things to go wrong. Flint abstracts all of this behind a compact specification that agents can produce reliably, humans can edit directly, and multiple backends can render.

70+ Semantic Types

Instead of treating data fields as generic “strings” or “numbers,” Flint understands semantic meaning:

Temperature, Price, Quantity
Country, City, State
Date, Year, Month
Rank, Percentage, Currency
And 60+ more

This semantic layer means Flint can make intelligent layout decisions. A Country field gets different treatment than a Temperature field.

One Spec, Multiple Backends

Write your chart spec once, compile to:

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

const input = {
  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 },
  },
};

// Same input, three outputs
const vegaSpec = assembleVegaLite(input);
const echartsOption = assembleECharts(input);
const chartjsConfig = assembleChartjs(input);

MCP Server for Agents

This is where it gets interesting for AI agent builders. Flint ships with an MCP server that lets agents:

Choose from 30+ chart templates
Validate specs before rendering
Open interactive chart views in MCP-capable clients
Return PNG/SVG or native chart specs

npx -y flint-chart-mcp

The MCP tools give agents guidance on which chart type fits the data, reducing hallucinated configurations.

Automatic Layout Decisions

Flint handles the tedious stuff:

Adapts sizing and spacing to data cardinality
Handles long labels gracefully
Configures legends appropriately
Scales marks to canvas constraints

You don’t specify these details — Flint infers them from the semantic types and data shape.

What’s Included

flint-chart: The core TypeScript/JavaScript library
flint-chart-mcp: MCP server for agent integration
Live editor: Interactive playground for testing specs
Agent skill: Standalone skill for non-MCP workflows
Python port: Preview in the repo (package coming)

Who This Is For

Building AI apps that generate charts from natural language
Creating dashboards where users describe what they want to see
Agentic workflows that need reliable visualization output
Anyone tired of debugging Vega-Lite specs