flint-chart
starsforks
How to install flint-chart?
microsoft/flint-chart
$git clone https://github.com/microsoft/flint-chartPlease visit: **Flint Project Site** | **MCP Server Guide** | **中文主页**
README.md
| 1 | # Flint: A Visualization Language for the AI Era |
| 2 | |
| 3 | [](https://www.npmjs.com/package/flint-chart) |
| 4 | [](https://www.npmjs.com/package/flint-chart-mcp) |
| 5 | [](https://github.com/microsoft/flint-chart/actions/workflows/ci.yml) |
| 6 | [](LICENSE) |
| 7 | |
| 8 | **Please visit:** [**Flint Project Site**](https://microsoft.github.io/flint-chart/) | [**MCP Server Guide**](https://microsoft.github.io/flint-chart/#/mcp) | [**中文主页**](https://microsoft.github.io/flint-chart/#/zh) |
| 9 | |
| 10 | Flint is a visualization intermediate language that lets **AI agents create |
| 11 | expressive, polished visualizations from simple, human-editable chart specs**. |
| 12 | Instead of asking agents or developers to tune verbose chart configuration |
| 13 | details such as scales, axes, spacing, labels, and layout, the Flint compiler |
| 14 | derives optimized chart settings from the data, semantic types, chart type, and |
| 15 | encodings. The result is a compact chart specification that agents can produce |
| 16 | reliably, people can edit directly, and multiple backends can render as native |
| 17 | [Vega-Lite](https://vega.github.io/vega-lite/), |
| 18 | [ECharts](https://echarts.apache.org/), or |
| 19 | [Chart.js](https://www.chartjs.org/) specs. |
| 20 | |
| 21 | This repo contains two main components: |
| 22 | |
| 23 | - **`flint-chart`**: a JavaScript/TypeScript library that compiles the same |
| 24 | Flint input into Vega-Lite, ECharts, or Chart.js specs. |
| 25 | - **`flint-chart-mcp`**: an MCP server that lets agents create, validate, and |
| 26 | render charts directly from a chat or coding environment. |
| 27 | |
| 28 | <p align="center"> |
| 29 | <img src="docs/figs/chartwall.png" alt="A wall of charts produced by Flint: bar, line, scatter, heatmap, donut, radar, streamgraph, boxplot, grouped bar, rose, Sankey, and treemap, rendered across Vega-Lite, ECharts, and Chart.js." width="100%"> |
| 30 | </p> |
| 31 | |
| 32 | ## Features |
| 33 | |
| 34 | |
| 35 | - **Semantic chart specs.** Flint captures what each field means using 70+ |
| 36 | semantic types such as `Rank`, `Temperature`, `Price`, or `Country`. |
| 37 | - **Automatic layout.** Flint adapts sizing, spacing, labels, marks, and legends |
| 38 | to the data cardinality, chart design, and canvas constraints. |
| 39 | - **Multiple backends.** Compile one input to 30+ chart types across |
| 40 | [Vega-Lite](https://vega.github.io/vega-lite/), |
| 41 | [ECharts](https://echarts.apache.org/), and |
| 42 | [Chart.js](https://www.chartjs.org/), with more to come soon. |
| 43 | - **Agent-ready chart authoring.** The MCP server gives agents Flint tools and |
| 44 | chart guidance so they can choose a template, validate it, and open an |
| 45 | interactive chart view in MCP-capable clients. |
| 46 | |
| 47 | ## Updates |
| 48 | |
| 49 | - **July 19, 2026** — Flint 0.3.0 adds dynamic chart widgets that switch chart |
| 50 | types and edit chart properties in place. ([v0.3.0](https://github.com/microsoft/flint-chart/releases/tag/0.3.0)) |
| 51 | - **July 15, 2026** — Flint 0.2.2 added compact dodge modes and grouped violin |
| 52 | layouts. |
| 53 | - **July 13, 2026** — Flint 0.2.1 improved chart-property validation and backend |
| 54 | consistency. ([v0.2.1](https://github.com/microsoft/flint-chart/releases/tag/0.2.1)) |
| 55 | |
| 56 | See the [changelog](CHANGELOG.md) for complete release notes. |
| 57 | |
| 58 | |
| 59 | <p align="center"> |
| 60 | <img src="docs/figs/compile-demo.png" alt="Flint compiling a compact chart spec into a Vega-Lite spec and rendered heatmap visualization." width="100%"> |
| 61 | <br> |
| 62 | <sub>Flint turns compact chart specs into backend-native specs and rendered visualizations.</sub> |
| 63 | </p> |
| 64 | |
| 65 | ## Install |
| 66 | |
| 67 | ```bash |
| 68 | # Use Flint in your JavaScript/TypeScript codebase |
| 69 | npm install flint-chart |
| 70 | |
| 71 | # For agents and MCP clients |
| 72 | npx -y flint-chart-mcp |
| 73 | ``` |
| 74 | |
| 75 | <p><sub><span style="color: #6a737d;">Python package: to be released. The current Python port is a source-only preview in this repo.</span></sub></p> |
| 76 | |
| 77 | ## Use Flint As A Library |
| 78 | |
| 79 | Every backend accepts the same `ChartAssemblyInput` an |
People who liked this also viewed
6 picksType
- elevenlabs-mcpThe official ElevenLabs MCP serverMCP ServersJul 2026
- MonetEdit Videos and Design Images with Claude code or CodexMCP ServersJul 2026
- scribe.jsJavaScript OCR and text extraction for images and PDFs.MCP ServersJul 2026
- gliana-aiPay-per-call generative AI — 60+ models (image, video, music, speech). No signup, no API key; pay per call from your wallet over MPP/x402.MCP Serversrecently
- nanobanana-mcp-serverAI image generation MCP server powered by Google Gemini, with smart model selection and 4K outputMCP ServersMay 2026
- FramesailCreate long-form (faceless YouTube) videos end to end from any MCP client: script, locked character references, storyboard, voiceover, and final video editing — with characters and style held consistent across every shot. Making long-form MCP Serversrecently
