Please visit: Flint Project Site | Visual Themes | MCP Server Guide | δΈζδΈ»ι‘΅
Flint is a visualization intermediate language that lets AI agents turn simple, human-editable chart specs into expressive, polished visualizations. Rather than requiring agents or developers to tune verbose settings for scales, axes, spacing, labels, and layout, Flint derives those decisions from the data, semantic types, chart type, encodings, and an optional visual theme. Users can use a compact spec to create visually polished, brand-consistent charts rendered as native Vega-Lite, ECharts, Chart.js, Plotly specs, or as 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.
- 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.
- Formal visual themes. Define layout behavior, semantic presentation, and
visual identity once, then apply them across a chart library with a preset,
custom
ThemeSpec, or inherited theme. - 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.
- August 5, 2026 β Flint 0.5.0 introduces a formal theme specification that allows designers and users to define a visual system once and apply it consistently across an entire chart library. It includes ten presets: New York Times, Economist, Swiss, Nature, McKinsey, Datawrapper, Power BI, Power BI Light, Pop, and Cartoon. (v0.5.0)
- 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.
# 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.
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);theme_spec sits beside chart_spec: the chart spec defines what the chart
means, while the theme defines how that meaning is presented. A theme can guide
layout, labels, legends, axes, mark geometry, typography, and color as one
coherent visual system.
Use one of Flint's ten built-in presets:
const themedSpec = assembleVegaLite({
...input,
theme_spec: 'economist',
});Or inherit a preset and override only the decisions that belong to your brand:
const brandedSpec = assembleVegaLite({
...input,
theme_spec: {
extends: 'economist',
id: 'our-brand',
ink: {
series: { single: '#6b3fa0' },
},
},
});Nested objects merge; arrays and scalar values replace the inherited value. ThemeSpec currently affects Vega-Lite output. Compare all presets on the theme explorer. See Using themes for the complete custom and inherited-theme reference.
Economist β compact editorial graphics with a strong red accent.
Swiss β typographic structure, restrained color, and a clear visual grid.
Pop β bold color, emphatic marks, and playful graphic contrast.
See the API reference, backend references for Vega-Lite, ECharts, Chart.js, Plotly, and Excel, plus the live editor for more library examples.
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.
flint-chart/
βββ packages/
β βββ flint-js/ npm package `flint-chart` (TypeScript)
β β βββ src/
β β βββ core/ semantics, themes, layout, decisions, shared types
β β βββ chart-types/ shared chart definitions and template metadata
β β βββ vegalite/ Vega-Lite backend
β β βββ echarts/ ECharts backend
β β βββ chartjs/ Chart.js backend
β β βββ plotly/ Plotly backend
β β βββ excel/ native Excel backend
β β βββ gallery/ gallery assembly and generated references
β β βββ test-data/ fixtures and stress-test generators
β βββ flint-mcp/ MCP server, MCP App UI, assets, and tests
β βββ flint-py/ Python port preview (package to be released)
βββ site/ Vite + React project site, gallery, editor, and docs
βββ agent-skills/ chart- and theme-authoring skills for agents
βββ agents/ agent and MCP server configuration
βββ shared/test-data/ JSON fixtures shared across JS and Python
βββ scripts/ reference generation and theme audit tooling
βββ docs/ user, API, backend, and architecture documentation
βββ design-docs/ design proposals and implementation research
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 theme guide, the Flint MCP project page, or the Development guide. See the changelog for notable changes in each release.
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.
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.
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.
MIT Β© Microsoft Corporation
