Flint: A Visualization Language for the AI Era
Please visit: Flint Project Site | MCP Server Guide | 中文主页
Flint is a visualization intermediate language that lets AI agents create expressive, polished visualizations from simple, human-editable chart specs. Instead of asking agents or developers to tune verbose chart configuration details such as scales, axes, spacing, labels, and layout, the Flint compiler derives optimized chart settings from the data, semantic types, chart type, and encodings. The result is a compact chart specification that agents can produce reliably, people can edit directly, and multiple backends can render as native Vega-Lite, ECharts, Chart.js, or Plotly specs, and native Excel charts through Office.js.
This repo contains two main components:
flint-chart: a JavaScript/TypeScript library that compiles the same Flint input into Vega-Lite, ECharts, Chart.js, Plotly, or Excel-native output.flint-chart-mcp: an MCP server that lets agents create, validate, and render charts directly from a chat or coding environment.
Features
- Semantic chart specs. Flint captures what each field means using 70+
semantic types such as
Rank,Temperature,Price, orCountry. - Automatic layout. Flint adapts sizing, spacing, labels, marks, and legends to the data cardinality, chart design, and canvas constraints.
- Multiple backends. Compile one input to backend-native output across Vega-Lite, ECharts, Chart.js, Plotly, and native Excel charts.
- Agent-ready chart authoring. The MCP server gives agents Flint tools and chart guidance so they can choose a template, validate it, and open an interactive chart view in MCP-capable clients.
Updates
- July 24, 2026 — Flint 0.4.0 adds 38 Plotly chart types and 18 native, editable Excel chart templates. (v0.4.0)
- July 19, 2026 — Flint 0.3.0 adds dynamic chart widgets that switch chart types and edit chart properties in place. (v0.3.0)
- July 15, 2026 — Flint 0.2.2 added compact dodge modes and grouped violin layouts.
- July 13, 2026 — Flint 0.2.1 improved chart-property validation and backend consistency. (v0.2.1)
See the changelog for complete release notes.
Flint turns compact chart specs into backend-native specs and rendered visualizations.
Install
# Use Flint in your JavaScript/TypeScript codebase
npm install flint-chart
# For agents and MCP clients
npx -y flint-chart-mcpPython package: to be released. The current Python port is a source-only preview in this repo.
Use Flint As A Library
Every backend accepts the same ChartAssemblyInput and returns the target
library's native spec object.
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 },
},
});
// → a ready-to-render Vega-Lite specSwap the backend without changing the input shape:
import { assembleECharts, assembleChartjs, assemblePlotly, assembleExcel } from 'flint-chart';
const echartsOption = assembleECharts(input);
const chartjsConfig = assembleChartjs(input);
const plotlyFigure = assemblePlotly(input);
const excelArtifact = assembleExcel(input);See the API reference, backend references for Vega-Lite, ECharts, Chart.js, Plotly, and Excel, plus the live editor for more library examples.
Use Flint As An MCP Server
Install flint-chart-mcp as a Model Context Protocol
server when you want an agent to create charts in the same conversation where
the question starts. It can open an interactive chart view, return static
PNG/SVG output, or produce backend-native chart specs.
For setup, start with the Flint MCP project page. It includes client configuration, usage examples, and links to deeper references.
MCP calls let agents embed rows directly as data.values, or read local JSON,
CSV, or TSV files by data.url. For agent workflows without MCP,
use the standalone agent skill.
Repository overview
flint-chart/
├── packages/
│ ├── flint-js/ npm package `flint-chart` (TypeScript)
│ │ └── src/
│ │ ├── core/ semantics, layout, decisions, shared types
│ │ ├── vegalite/ Vega-Lite backend
│ │ ├── echarts/ ECharts backend
│ │ ├── chartjs/ Chart.js backend
│ │ └── test-data/ fixtures + generators (drive tests and the gallery)
│ ├── flint-py/ Python port preview (package to be released)
│ └── flint-mcp/ npm package `flint-chart-mcp` (MCP render server)
├── site/ Vite + React demo: landing, gallery, editor, docs
├── agent-skills/ fallback copy of the MCP-served agent skill
├── shared/test-data/ JSON fixtures shared across JS + Python
└── docs/ architecture and design documents
Documentation
The project site is the main entry point for examples, the live editor, and concept docs. For source-level references, start with the API reference, the Flint MCP project page, or the Development guide. See the changelog for notable changes in each release.
Contributing
Contributions are welcome! See .github/CONTRIBUTING.md and the Development guide.
git clone https://github.com/microsoft/flint-chart
cd flint-chart
npm install # root workspaces: packages/flint-js + flint-mcp + site
npm run typecheck # typecheck packages/flint-js + packages/flint-mcp
npm run test # Vitest (packages/flint-js + packages/flint-mcp)
npm run build # build packages/flint-js + packages/flint-mcp
npm run site # demo site (gallery + editor) at http://localhost:5274/Node 18+ is required. The demo site aliases flint-chart to
packages/flint-js/src, so library edits hot-reload in the gallery and editor
without rebuilding dist/.
We especially welcome contributions that add new chart templates or new rendering backends.
This project has adopted the Microsoft Open Source Code of Conduct. See SECURITY.md to report vulnerabilities.
Contributor
Flint is built by Microsoft Research in collaboration with the IDEAS Lab, Renmin University of China. We welcome you to join us — see Contributing to get involved.
A research paper describing Flint is coming soon.
Trademarks
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos is subject to those third parties' policies.
License
MIT © Microsoft Corporation
