{"name":"Flint-chart: AI-Powered Visualization Language for Expressive Charts","description":"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","url":"https://osrepos.com/repo/microsoft-flint-chart","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/microsoft-flint-chart","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/microsoft-flint-chart.md","json":"https://osrepos.com/repo/microsoft-flint-chart.json","topics":["ai-agents","charting-library","data-visualization","mcp-server","TypeScript","visualization","charts"],"keywords":["ai-agents","charting-library","data-visualization","mcp-server","TypeScript","visualization","charts"],"stars":null,"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.","content":"## Introduction\n\nFlint 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.\n\nThis repository contains two main components:\n\n*   `flint-chart`: A JavaScript/TypeScript library that compiles Flint input into various visualization backend outputs.\n*   `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.\n\n## Why use and advantages\n\nFlint-chart offers several key advantages for developers and AI agents working with data visualization:\n\n*   **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.\n*   **Automatic layout**: The library intelligently adapts sizing, spacing, labels, marks, and legends based on data cardinality, chart design, and canvas constraints.\n*   **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.\n*   **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.\n*   **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.\n\n## Installation\n\nTo integrate Flint into your project or use it with an agent, follow these installation steps:\n\nbash\n# Use Flint in your JavaScript/TypeScript codebase\nnpm install flint-chart\n\n# For agents and MCP clients\nnpx -y flint-chart-mcp\n\n\n## Examples\n\nFlint-chart provides a straightforward API for assembling charts. Here's how you can use it as a library:\n\nts\nimport { assembleVegaLite } from 'flint-chart';\n\nconst spec = assembleVegaLite({\n  data: { values: myData },\n  semantic_types: { weight: 'Quantity', mpg: 'Quantity', origin: 'Country' },\n  chart_spec: {\n    chartType: 'Scatter Plot',\n    encodings: { x: { field: 'weight' }, y: { field: 'mpg' }, color: { field: 'origin' } },\n    baseSize: { width: 400, height: 300 },\n  },\n});\n// ? a ready-to-render Vega-Lite spec\n\n\nYou can easily swap the backend without changing the input shape:\n\nts\nimport { assembleECharts, assembleChartjs, assemblePlotly, assembleExcel } from 'flint-chart';\n\nconst echartsOption = assembleECharts(input);\nconst chartjsConfig = assembleChartjs(input);\nconst plotlyFigure = assemblePlotly(input);\nconst excelArtifact = assembleExcel(input);\n\n\nApplying visual themes is also simple. You can use one of Flint's ten built-in presets:\n\nts\nconst themedSpec = assembleVegaLite({\n  ...input,\n  theme_spec: 'economist',\n});\n\n\nOr inherit a preset and override specific branding decisions:\n\nts\nconst brandedSpec = assembleVegaLite({\n  ...input,\n  theme_spec: {\n    extends: 'economist',\n    id: 'our-brand',\n    ink: {\n      series: { single: '#6b3fa0' },\n    },\n  },\n});\n\n\n## Links\n\nFor more detailed information, examples, and documentation, please visit the official resources:\n\n*   [Flint Project Site](https://microsoft.github.io/flint-chart/) \n*   [Visual Themes](https://microsoft.github.io/flint-chart/#/themes) \n*   [MCP Server Guide](https://microsoft.github.io/flint-chart/#/mcp) \n*   [GitHub Repository](https://github.com/microsoft/flint-chart)","metrics":{"detailViews":2,"githubClicks":0},"dates":{"published":null,"modified":"2026-09-01T07:02:17.000Z"}}