# Flint-chart: AI-Powered Visualization Language for Expressive Charts

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/microsoft-flint-chart
Generated for open source discovery and AI-assisted research.

Flint-chart is a powerful visualization language designed for AI agents, enabling them to reliably create expressive and visually appealing charts. It translates simple, human-editable chart specifications into native outputs for various backends like Vega-Lite, ECharts, Chart.js, Plotly, and Excel, supporting formal visual themes. This project simplifies complex data visualization tasks, making them accessible and consistent across different platforms.

GitHub: https://github.com/microsoft/flint-chart
OSRepos URL: https://osrepos.com/repo/microsoft-flint-chart

## Summary

Flint-chart is a powerful visualization language designed for AI agents, enabling them to reliably create expressive and visually appealing charts. It translates simple, human-editable chart specifications into native outputs for various backends like Vega-Lite, ECharts, Chart.js, Plotly, and Excel, supporting formal visual themes. This project simplifies complex data visualization tasks, making them accessible and consistent across different platforms.

## Topics

- ai-agents
- charting-library
- data-visualization
- mcp-server
- TypeScript
- visualization
- charts

## Repository Information

Last analyzed by OSRepos: Tue Sep 01 2026 08:02:17 GMT+0100 (Western European Summer Time)
Detail views: 2
GitHub clicks: 0

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## Introduction

Flint is a visualization intermediate language that empowers AI agents to transform simple, human-editable chart specifications into expressive, polished visualizations. Instead of requiring agents to hardcode verbose parameters for scales, axes, spacing, labels, and layout, Flint derives these decisions from a high-level semantic specification, the data, and an optional visual theme. A compact spec compiles to native Vega-Lite, ECharts, Chart.js, Plotly, or editable Excel charts.

This repository contains two main components:

*   `flint-chart`: A JavaScript/TypeScript library that compiles Flint input into various visualization backend outputs.
*   `flint-chart-mcp`: An MCP (Model Context Protocol) server that allows agents to create, validate, and render charts directly from a chat or coding environment.

## Why use and advantages

Flint-chart offers several key advantages for developers and AI agents working with data visualization:

*   **Semantic chart specs**: Flint captures the meaning of each field using over 70 semantic types, such as `Rank`, `Temperature`, `Price`, or `Country`, leading to more intelligent chart generation.
*   **Automatic layout**: The library intelligently adapts sizing, spacing, labels, marks, and legends based on data cardinality, chart design, and canvas constraints.
*   **Formal visual themes**: Define layout behavior, semantic presentation, and visual identity once, then apply them consistently across an entire chart library using presets, custom `ThemeSpec`, or inherited themes.
*   **Multiple backends**: Compile a single input specification to backend-native output across Vega-Lite, ECharts, Chart.js, Plotly, and native Excel charts, offering unparalleled flexibility.
*   **Agent-ready chart authoring**: The MCP server provides AI agents with Flint tools and chart guidance, enabling them to choose templates, validate them, and open interactive chart views in MCP-capable clients like GitHub Copilot in VS Code and Claude.

## Installation

To integrate Flint into your project or use it with an agent, follow these installation steps:

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

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


## Examples

Flint-chart provides a straightforward API for assembling charts. Here's how you can use it as a library:

ts
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


You can easily swap the backend without changing the input shape:

ts
import { assembleECharts, assembleChartjs, assemblePlotly, assembleExcel } from 'flint-chart';

const echartsOption = assembleECharts(input);
const chartjsConfig = assembleChartjs(input);
const plotlyFigure = assemblePlotly(input);
const excelArtifact = assembleExcel(input);


Applying visual themes is also simple. You can use one of Flint's ten built-in presets:

ts
const themedSpec = assembleVegaLite({
  ...input,
  theme_spec: 'economist',
});


Or inherit a preset and override specific branding decisions:

ts
const brandedSpec = assembleVegaLite({
  ...input,
  theme_spec: {
    extends: 'economist',
    id: 'our-brand',
    ink: {
      series: { single: '#6b3fa0' },
    },
  },
});


## Links

For more detailed information, examples, and documentation, please visit the official resources:

*   [Flint Project Site](https://microsoft.github.io/flint-chart/) 
*   [Visual Themes](https://microsoft.github.io/flint-chart/#/themes) 
*   [MCP Server Guide](https://microsoft.github.io/flint-chart/#/mcp) 
*   [GitHub Repository](https://github.com/microsoft/flint-chart)