flint-chart

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.

https://github.com/user-attachments/assets/c1cda0fa-3ea7-41af-b3fd-a127bc83d641

Updates

• 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.

Get started

In your agent app (MCP server)

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.

Build with your coding agent

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-chart

The 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.

How it works

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.

1. Describe data with semantic types

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.

2. Build charts once, render on any backend

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.

3. Unify the look with a theme spec

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.

4. Add interactions with an interaction spec

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