flint-chart

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 to hardcode verbose parameters for scales, axes, spacing, labels, and layout, Flint derives those decisions from a high-level semantic specification, the data, and an optional visual theme (e.g., New York Times, Economist, Swiss, and McKinsey). A compact spec compiles to native Vega-Lite, ECharts, Chart.js, Plotly specs, or editable Excel charts.

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.

Try it in your agent

Try Flint with your agent using our hosted MCP server. Clients that support remote HTTP MCP servers include GitHub Copilot in VS Code (MCP: Add Server → HTTP) and Claude (Customize → Connectors → Add custom connector). Point either client at:

https://flint.data-formulator.ai/mcp

Then ask your agent to find some public data and visualize it, 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.

For a local MCP server (recommended for large datasets), check the MCP Server Guide for details.

Features

• Semantic chart specs. Flint captures what each field means using 70+ semantic types such as Rank, Temperature, Price, or Country.
• 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.

Updates

• August 12, 2026 — Flint 0.5.1 extends visual themes to the Plotly backend and adds Vega-Lite Calendar Heatmap. (changelog)
• 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. (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.

Install

# Use Flint in your JavaScript/TypeScript codebase
npm install flint-chart

# For agents and MCP clients
npx -y flint-chart-mcp

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 spec

Swap 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);

Apply Visual Themes

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.

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.