flint-chart

Flint: A Visualization Language for the AI Era

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

🔊 Click the speaker icon for sound  

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