by microsoft
๐ช Flint is a visualization language that lets AI agents reliably create expressive, good-looking charts from simple, human-editable chart specs.
# Add to your Claude Code skills
git clone https://github.com/microsoft/flint-chartLast scanned: 7/1/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-07-01T08:13:30.927Z",
"npmAuditRan": true,
"pipAuditRan": true,
"promptInjectionRan": true
}flint-chart is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by microsoft. ๐ช Flint is a visualization language that lets AI agents reliably create expressive, good-looking charts from simple, human-editable chart specs. It has 117 GitHub stars.
Yes. flint-chart passed SkillsLLM's automated security scan โ a dependency vulnerability audit plus prompt-injection heuristics โ with no high-severity issues. You can read the full report in the Security Report section on this page.
Clone the repository with "git clone https://github.com/microsoft/flint-chart" and add it to your Claude Code skills directory (see the Installation section above).
flint-chart is primarily written in TypeScript. It is open-source under microsoft on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh flint-chart against similar tools.
No comments yet. Be the first to share your thoughts!
Please visit: Flint Project Site | MCP Server Guide
Flint is a visualization intermediate language that lets AI agents create expressive, polished visualizations from simple, human-editable chart specs. Instead of asking agents or developers to tune verbose chart configuration details such as scales, axes, spacing, labels, and layout, the Flint compiler derives optimized chart settings from the data, semantic types, chart type, and encodings. The result is a compact chart specification that agents can produce reliably, people can edit directly, and multiple backends can render as native Vega-Lite, ECharts, or Chart.js specs.
This repo contains two main components:
flint-chart: a JavaScript/TypeScript library that compiles the same
Flint input into Vega-Lite, ECharts, or Chart.js specs.flint-chart-mcp: an MCP server that lets agents create, validate, and
render charts directly from a chat or coding environment.Rank, Temperature, Price, or Country.# Use Flint in your JavaScript/TypeScript codebase
npm install flint-chart
# For agents and MCP clients
npx -y flint-chart-mcp
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 } from 'flint-chart';
const echartsOption = assembleECharts(input);
const chartjsConfig = assembleChartjs(input);
See the API reference, backend references, and live editor for more library examples.
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.
MCP calls let agents embed rows directly as data.values, or read local JSON,
CSV, or TSV files by data.url. For agent workflows without MCP,
use the standalone agent skill.
flint-chart/
โโโ packages/
โ โโโ flint-js/ npm package `flint-chart` (TypeScript)
โ โ โโโ src/
โ โ โโโ core/ semantics, layout, decisions, shared types
โ โ โโโ vegalite/ Vega-Lite backend
โ โ โโโ echarts/ ECharts backend
โ โ โโโ chartjs/ Chart.js backend
โ โ โโโ test-data/ fixtures + generators (drive tests and the gallery)
โ โโโ flint-py/ Python port preview (package to be released)
โ โโโ flint-mcp/ npm package `flint-chart-mcp` (MCP render server)
โโโ site/ Vite + React demo: landing, gallery, editor, docs
โโโ agent-skills/ fallback copy of the MCP-served agent skill
โโโ shared/test-data/ JSON fixtures shared across JS + Python
โโโ docs/ architecture and design documents
The project site is the main entry point for examples, the live editor, and concept docs. For source-level references, start with the API reference, the Flint MCP project page, or the Development guide.
Contributions are welcome! See .github/CONTRIBUTING.md and the Development guide.
git clone https://github.com/microsoft/flint-chart
cd flint-chart
npm install # root workspaces: packages/flint-js + flint-mcp + site
npm run typecheck # typecheck packages/flint-js + packages/flint-mcp
npm run test # Vitest (packages/flint-js + packages/flint-mcp)
npm run build # build packages/flint-js + packages/flint-mcp
npm run site # demo site (gallery + editor) at http://localhost:5274/
Node 18+ is required. The demo site aliases flint-chart to
packages/flint-js/src, so library edits hot-reload in the gallery and editor
without rebuilding dist/.
We especially welcome contributions that add new chart templates or new rendering backends.
This project has adopted the Microsoft Open Source Code of Conduct. See SECURITY.md to report vulnerabilities.
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