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

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.

Use at your own risk

OSRepos shares public repositories for knowledge and discovery only. Any installation, execution, configuration, or use of code from these repositories is the user's own responsibility. Always review the repository, source code, dependencies, licenses, and security implications before running or installing anything. OSRepos is not responsible for issues, damages, or losses resulting from third-party repositories.

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:

# 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:

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:

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:

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

Or inherit a preset and override specific branding decisions:

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