microsoft/flint-chart

Flint — A visualization language for AI‑enabled chart creation

What it is

• An open‑source TypeScript/JavaScript library (flint-chart) plus an MCP (Microsoft Copilot Protocol) server (flint-chart-mcp).
• Provides a single declarative spec format that describes data, semantic types, chart type, theme and interaction.
• The spec is compiled into native specifications for five rendering back‑ends: Vega‑Lite, ECharts, Chart.js, Plotly, and native Excel.
• Packs 52 chart types, 14 visual themes (e.g., Economist, NY Times) and 23 interaction presets (brush, hover, drill‑down, etc.).

Why it matters for AI agents

• AI assistants (Copilot, Claude, Cursor, etc.) can call Flint via the MCP server to turn a natural‑language request into an interactive chart that appears directly in the chat.
• The compiler uses semantic types (e.g., YearMonth, Quantity) to infer scales, formatting and colour choices, so the agent does not need to hand‑craft low‑level chart options.
• The same spec works across all supported back‑ends, letting agents produce PNG/SVG, web‑embeddable charts, or even editable Excel charts for reports.

How you use it

1. MCP server – Run npx -y flint-chart-mcp (local stdio) or point your agent to the hosted server URL. The agent can then request charts with plain text prompts.
2. Library – Install npm i flint-chart. Import the React component or the vanilla API, pass a ChartAssemblyInput object, and Flint renders the chart.

   import { FlintChart } from "flint-chart/react";
   const spec = { /* data, semantic_types, chart_spec, theme_spec, interaction_spec */ };
   <FlintChart spec={spec} />
   

3. Customization – Create or extend a theme via the Theme Lab, or write custom interaction specs using the interaction API.

Key components

• packages/flint-js – core compiler, back‑end adapters, theme and interaction engines.
• packages/flint-mcp – MCP server implementation and a minimal UI for testing.
• packages/flint-py – a preview Python port (not yet published).
• site/ – Vite‑React site that hosts the gallery, live editor, theme explorer and documentation.

Documentation & resources

• Project site: https://microsoft.github.io/flint-chart/ – gallery, live editor, theme explorer.
• API reference, backend‑specific docs, theme spec, interaction spec (all in docs/).
• Agent‑skill markdown files (agent-skills/) that describe how to prompt an LLM to author charts or interactions.
• Academic paper on arXiv (2607.20775) explains the design rationale.

Community & contribution

• Discord and WeChat groups for user support.
• Open contribution model: add new chart templates, back‑ends, or themes. Build with npm run test, npm run build, npm run site.
• MIT‑licensed, Microsoft‑maintained.

Who might benefit

• Developers building AI‑assistant‑enhanced dashboards or data‑exploration tools.
• Prompt engineers who want their agents to generate polished visualizations without hand‑coding each chart.
• Data‑science teams that need a single spec to output charts for web, PowerPoint (via Excel), or interactive notebooks.