git404hub

what is flint-chart fr?

microsoft/flint-chart — explained in plain English

Analysis updated 2026-05-18

2,014TypeScriptAudience · developerComplexity · 3/5LicenseSetup · easy

tl;dr

A Microsoft library and MCP server that turns simple chart specs into polished Vega-Lite, ECharts, or Chart.js visualizations for AI agents.

vibe map

mindmap
  root((repo))
    What it does
      Compact chart specs
      Compiles to chart libraries
      Agent friendly charting
    Tech stack
      TypeScript
      Vega-Lite ECharts Chart.js
      MCP server
    Use cases
      AI agent chart generation
      App charting integration
      Multi chart type gallery
    Audience
      Developers
      AI agent builders
    Licensing
      MIT license
      Open source

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Let an AI coding agent generate accurate, good looking charts inside a chat or coding session via the MCP server.

VIBE 2

Add charting to a JavaScript or TypeScript app while keeping the option to switch between Vega-Lite, ECharts, or Chart.js.

VIBE 3

Author compact, human editable chart specs instead of hand tuning verbose charting library configuration.

VIBE 4

Build a gallery or dashboard that supports many chart types from a single consistent input format.

what's the stack?

TypeScriptVega-LiteEChartsChart.jsMCP

how it stacks up fr

microsoft/flint-chartdavidmonterocrespo24/velxiolangchain-ai/openwiki
Stars2,0141,9901,950
LanguageTypeScriptTypeScriptTypeScript
Last pushed2026-07-03
MaintenanceActive
Setup difficultyeasyeasyeasy
Complexity3/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

Node 18+ is required for local development, the MCP server can be run directly with npx.

Released under the MIT license, allowing free use, modification, and commercial use as long as the license notice is kept.

in plain english

Flint is a project from Microsoft that gives AI agents a simple, structured way to describe charts so the agent does not have to fuss over low level details like axis spacing, labels, or layout. Instead of writing a full configuration for a charting library, you or an agent write a short, human editable chart spec that says what kind of chart it is and which data fields map to which visual elements, and Flint's compiler fills in the rest based on the data and the meaning of each field. The project has two main parts. The first is a JavaScript and TypeScript library that takes one of these compact chart specs and turns it into a chart definition for one of three well known charting libraries: Vega-Lite, ECharts, or Chart.js, so you can switch which library actually draws the chart without rewriting your input. The second part is an MCP server, meaning it plugs into the Model Context Protocol that lets AI chat and coding tools call outside services, so an agent working in a chat conversation can create a chart, check that it is valid, and show an interactive preview right there. Flint understands over 70 semantic field types, such as Rank, Price, Temperature, or Country, and uses that understanding to automatically choose sensible sizing, spacing, and chart marks rather than requiring every detail to be specified by hand. It currently supports more than 30 chart types across its three backends, including bar, line, scatter, heatmap, radar, and treemap charts. There is also a source only preview of a Python version of the library, though a published Python package is not yet available. The project is open source, written mainly in TypeScript, and released under the MIT license, which allows free use, modification, and commercial use as long as the license notice is kept. It can be installed as a normal npm package for developers building charting into their own apps, or run as an MCP server for agent based workflows.

prompts (copy fr)

prompt 1
Show me how to install flint-chart-mcp and connect it to my AI coding assistant.
prompt 2
Write a Flint chart spec for a scatter plot comparing weight and mpg colored by country of origin.
prompt 3
Explain the difference between using flint-chart as a library versus running it as an MCP server.
prompt 4
Help me add a new chart template to the flint-chart repository.
prompt 5
Convert this chart spec to render with ECharts instead of Vega-Lite.

Frequently asked questions

what is flint-chart fr?

A Microsoft library and MCP server that turns simple chart specs into polished Vega-Lite, ECharts, or Chart.js visualizations for AI agents.

What language is flint-chart written in?

Mainly TypeScript. The stack also includes TypeScript, Vega-Lite, ECharts.

What license does flint-chart use?

Released under the MIT license, allowing free use, modification, and commercial use as long as the license notice is kept.

How hard is flint-chart to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is flint-chart for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.