Project site Β· δΈζδΈ»ι‘΅ Β· MCP server
Flint is a visualization language that lets AI agents reliably create expressive, good-looking and interactive charts from simple, human-editable chart specs. It is available as an MCP server for everyday use with your agent, and as an npm library for building interactive applications.
Flint supports 52 chart types across 5 rendering backends β Vega-Lite, ECharts, Chart.js, Plotly, and native Excel charts β through one unified interface, with 14 themes and 23 interaction presets. To create bespoke visualizations, design custom themes in the Theme Lab and build advanced interactions with the Flint API.
flint-interactive-EN-white-web.mp4
π Click the speaker icon for sound
Β
- October 19, 2026 β Flint 1.0 introduces Flint Interactive: interaction presets, semantic events, and an interaction API that connects charts to your app. (changelog)
- August 12, 2026 β Flint 0.5.1 extends visual themes to the Plotly backend and adds Vega-Lite Calendar Heatmap.
- August 5, 2026 β Flint 0.5.0 introduces formal visual themes with preset themes, custom ThemeSpec authoring, and preset inheritance. (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)
See the changelog for every release.
Chart right in the conversation with any MCP client, such as GitHub Copilot in VS Code, Claude, Claude Code, Codex, or Cursor.
β‘ Quick start: paste this setup request into your agent and let it configure Flint for the current project. For manual setup, see the MCP server guide.
Help me set up Flint as an MCP server named "flint"!
1. Add it to my client config, using whichever option my client supports:
- a local (stdio) server: npx -y flint-chart-mcp
- the hosted server over HTTP: https://flint.data-formulator.ai/mcp
2. Verify the setup by listing the available Flint chart types.
3. Show me a fun first chart: how many moons each planet has, in a Flint theme you like.
Then ask your agent for a chart, for example:
Go to Yahoo Finance, find today's percentage change for the Magnificent Seven
tech stocks, and compare their performance with Flint in Economist style.
Let me hover to read each stock's change.
The agent can open an interactive chart right in the conversation, return a static PNG or SVG, or produce a backend-native spec.
Are you a developer building agent apps? Use
flint-chart, Flint's npm library,
to bring charts into your apps, dashboards, and data stories:
npm install flint-chartThe library compiles Flint specs into backend-native chart specs and provides React and vanilla JavaScript APIs for embedding interactive charts.
A Flint spec describes the data, semantic types, and field mappings, with
optional theme and interaction settings. In React, pass it to <FlintChart>
to embed an interactive chart:
import type { ChartAssemblyInput } from 'flint-chart';
import { FlintChart } from 'flint-chart/react';
const spec: ChartAssemblyInput = {
data: { values: [
{ Month: '2026-01', Users: 1200 },
{ Month: '2026-02', Users: 1800 },
] },
semantic_types: { Month: 'YearMonth', Users: 'Quantity' },
chart_spec: {
chartType: 'Line Chart',
encodings: { x: 'Month', y: 'Users' },
},
theme_spec: 'economist',
interaction_spec: { interactions: [{ type: 'inspect-index' }] },
};
<FlintChart spec={spec} />You can copy the following instruction to your coding agent to build a chart with Flint, then adapt it to your data and app:
Read Flint's chart authoring and interaction skills:
https://github.com/microsoft/flint-chart/blob/main/agent-skills/flint-chart-author/SKILL.md
https://github.com/microsoft/flint-chart/blob/main/agent-skills/flint-interaction-author/SKILL.md
Use these skills to add a chart to this app.
Install flint-chart and the renderer dependencies needed for this project.
Plot monthly users by region from our data in Economist style.
Let readers hover to compare regions at each month, and add a region selector
that updates the chart.
Integrate it with the app's existing layout and verify it works.
The agent can also generate backend-native specs or editable Excel charts for reports and documents. See the API reference, interaction API, and live editor for the underlying APIs and examples.
A Flint spec consists of the data, semantic types, the chart spec, and optional theme and interaction specs. Instead of relying on complex user-side logic to glue them together, the compiler resolves each part against the others and composes a complete backend-native spec.
Fields are described with semantic types such as Rank, YearMonth, Delta,
or Temperature, along with their domains and units. The compiler uses them to
infer parsing, scales, axes, formatting, and colors β a short Flint spec becomes
a complete backend spec.
Charts are defined with high-level chart types and encodings. The compiler adapts sizing, spacing, labels, and legends to the data, for example as it gets denser, and the same spec renders across Vega-Lite, ECharts, Chart.js, and Plotly, or as native Excel charts. See the API reference and the gallery.
Geometry, typography, and color are reusable formal specs that apply across a whole chart library, independent of the data and chart type. Pick one of 14 preset themes, such as the New York Times, the Economist, Swiss, or McKinsey, or inherit one and override only what belongs to your brand:
theme_spec: { extends: 'economist', id: 'our-brand', ink: { series: { single: '#6b3fa0' } } }Compare every preset in the theme explorer, design your own in the Theme Lab, and see the theme guide for the full reference.
Flint provides 23 interaction presets and a programming API for building interactive charts into applications. The compiler resolves user interaction events into semantic information, so your app only answers with high-level chart updates:
import { FlintChart } from 'flint-chart/react';
<FlintChart
spec={{ ...input, interaction_spec: { interactions: [{ type: 'brush-x' }] } }}
onChange={({ phase, state }) => {
if (phase === 'commit') table.filter(state.selected);
}}
/>
Try the presets in the interaction gallery, see bespoke ones in advanced interactions, and read the interaction spec and programming API.
- Project site β gallery, live editor, themes, and interactions
- API reference and backend references for Vega-Lite, ECharts, Chart.js, Plotly, and Excel
- Theme guide, interaction spec, and interaction programming API
- MCP server guide and agent skills
- Paper on arXiv
A Python port is in preview as source in packages/flint-py; its package is not yet released.
Contributions are welcome β especially new chart templates and rendering backends. See CONTRIBUTING and the development guide.
git clone https://github.com/microsoft/flint-chart
cd flint-chart
npm install # workspaces: packages/flint-js, packages/flint-mcp, site
npm run typecheck # typecheck flint-chart and flint-chart-mcp
npm run test # Vitest for both packages
npm run build # build both packages
npm run site # project site, gallery, and editor at http://localhost:5274/Node 18+ is required. The site aliases flint-chart to packages/flint-js/src,
so library edits hot-reload without rebuilding.
Repository layout
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
β β βββ interactive/ interaction presets and runtime
β β βββ react/ the `<FlintChart>` React component
β β βββ vegalite/ Vega-Lite backend
β β βββ echarts/ ECharts backend
β β βββ chartjs/ Chart.js backend
β β βββ plotly/ Plotly backend
β β βββ excel/ native Excel backend
β β βββ test-data/ fixtures and stress-test generators
β βββ flint-mcp/ MCP server `flint-chart-mcp`, MCP App UI, and tests
β βββ flint-py/ Python port preview
βββ site/ Vite + React project site, gallery, editor, and docs
βββ agent-skills/ chart, theme, and interaction authoring skills for agents
βββ docs/ user, API, backend, and architecture documentation
βββ design-docs/ design proposals and implementation research
This project has adopted the Microsoft Open Source Code of Conduct. See SECURITY.md to report vulnerabilities.
|
Join the Flint Discord Ask questions, share your charts, and follow releases with Flint users everywhere. Join Discord |
Join the Flint WeChat group Scan the QR code to join the Flint user WeChat group. 
|
We'd love to have you join us! Pick up an issue, add a chart template or a theme, or share what you build in the community. See Contributing to get started, and everyone on the contributors graph.
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