{"id":51219325,"url":"https://github.com/microsoft/flint-chart","last_synced_at":"2026-06-28T06:01:13.384Z","repository":{"id":367851110,"uuid":"1237164513","full_name":"microsoft/flint-chart","owner":"microsoft","description":"🪄 Flint is a visualization language that lets AI agents reliably create expressive, good-looking charts from simple, human-editable chart specs.","archived":false,"fork":false,"pushed_at":"2026-06-28T00:50:41.000Z","size":17651,"stargazers_count":3,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-28T02:15:40.170Z","etag":null,"topics":["ai-agents","charting-library","data-visualization","mcp-server"],"latest_commit_sha":null,"homepage":"https://microsoft.github.io/flint-chart/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-13T00:00:28.000Z","updated_at":"2026-06-28T00:44:35.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/microsoft/flint-chart","commit_stats":null,"previous_names":["microsoft/flint-chart"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/microsoft/flint-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fflint-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fflint-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fflint-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fflint-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microsoft","download_url":"https://codeload.github.com/microsoft/flint-chart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fflint-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34878963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-28T02:00:05.809Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-agents","charting-library","data-visualization","mcp-server"],"created_at":"2026-06-28T06:00:51.476Z","updated_at":"2026-06-28T06:01:13.378Z","avatar_url":"https://github.com/microsoft.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flint: A Visualization Language for the AI Era\n\n[![npm: flint-chart](https://img.shields.io/npm/v/flint-chart.svg?label=npm%3A%20flint-chart)](https://www.npmjs.com/package/flint-chart)\n[![npm: flint-chart-mcp](https://img.shields.io/npm/v/flint-chart-mcp.svg?label=npm%3A%20flint-chart-mcp)](https://www.npmjs.com/package/flint-chart-mcp)\n[![CI](https://github.com/microsoft/flint-chart/actions/workflows/ci.yml/badge.svg)](https://github.com/microsoft/flint-chart/actions/workflows/ci.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n\n**Please visit:** [**Flint Project Site**](https://microsoft.github.io/flint-chart/) | [**MCP Server Guide**](https://microsoft.github.io/flint-chart/#/mcp)\n\nFlint is a visualization intermediate language that lets **AI agents create\nexpressive, polished visualizations from simple, human-editable chart specs**.\nInstead of asking agents or developers to tune verbose chart configuration\ndetails such as scales, axes, spacing, labels, and layout, the Flint compiler\nderives optimized chart settings from the data, semantic types, chart type, and\nencodings. The result is a compact chart specification that agents can produce\nreliably, people can edit directly, and multiple backends can render as native\n[Vega-Lite](https://vega.github.io/vega-lite/),\n[ECharts](https://echarts.apache.org/), or\n[Chart.js](https://www.chartjs.org/) specs.\n\nThis repo contains two main components:\n\n- **`flint-chart`**: a JavaScript/TypeScript library that compiles the same\n  Flint input into Vega-Lite, ECharts, or Chart.js specs.\n- **`flint-chart-mcp`**: an MCP server that lets agents create, validate, and\n  render charts directly from a chat or coding environment.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg 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%\"\u003e\n\u003c/p\u003e\n\n## Features\n\n\n- **Semantic chart specs.** Flint captures what each field means using 70+\n  semantic types such as `Rank`, `Temperature`, `Price`, or `Country`.\n- **Automatic layout.** Flint adapts sizing, spacing, labels, marks, and legends\n  to the data cardinality, chart design, and canvas constraints.\n- **Multiple backends.** Compile one input to 30+ chart types across\n  [Vega-Lite](https://vega.github.io/vega-lite/),\n  [ECharts](https://echarts.apache.org/), and\n  [Chart.js](https://www.chartjs.org/), with more to come soon.\n- **Agent-ready chart authoring.** The MCP server gives agents Flint tools and\n  chart guidance so they can choose a template, validate it, and open an\n  interactive chart view in MCP-capable clients.\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/figs/compile-demo.png\" alt=\"Flint compiling a compact chart spec into a Vega-Lite spec and rendered heatmap visualization.\" width=\"100%\"\u003e\n  \u003cbr\u003e\n  \u003csub\u003eFlint turns compact chart specs into backend-native specs and rendered visualizations.\u003c/sub\u003e\n\u003c/p\u003e\n\n## Install\n\n```bash\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\u003cp\u003e\u003csub\u003e\u003cspan style=\"color: #6a737d;\"\u003ePython package: to be released. The current Python port is a source-only preview in this repo.\u003c/span\u003e\u003c/sub\u003e\u003c/p\u003e\n\n## Use Flint As A Library\n\nEvery backend accepts the same `ChartAssemblyInput` and returns the target\nlibrary's native spec object.\n\n```ts\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\nSwap the backend without changing the input shape:\n\n```ts\nimport { assembleECharts, assembleChartjs } from 'flint-chart';\n\nconst echartsOption = assembleECharts(input);\nconst chartjsConfig = assembleChartjs(input);\n```\n\nSee the [API reference](docs/api-reference.md), [backend references](docs/reference-vegalite.md),\nand [live editor](https://microsoft.github.io/flint-chart/#/editor) for more\nlibrary examples.\n\n## Use Flint As An MCP Server\n\nInstall `flint-chart-mcp` as a [Model Context Protocol](https://modelcontextprotocol.io/)\nserver when you want an agent to create charts in the same conversation where\nthe question starts. It can open an interactive chart view, return static\nPNG/SVG output, or produce backend-native chart specs.\n\nFor setup, start with the\n[Flint MCP project page](https://microsoft.github.io/flint-chart/#/mcp). It\nincludes client configuration, usage examples, and links to deeper references.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/figs/flint-mcp-experience.png\" alt=\"Agent chat showing Flint Chart as an MCP App with a grouped bar chart preview and chart options.\" width=\"100%\"\u003e\n\u003c/p\u003e\n\nMCP calls let agents embed rows directly as `data.values`, or read configured\nlocal JSON, CSV, or TSV files by `data.url`. For agent workflows without MCP,\nuse the standalone [agent skill](agent-skills/flint-chart-author/SKILL.md).\n\n## Repository overview\n\n```\nflint-chart/\n├── packages/\n│   ├── flint-js/          npm package `flint-chart` (TypeScript)\n│   │   └── src/\n│   │       ├── core/      semantics, layout, decisions, shared types\n│   │       ├── vegalite/  Vega-Lite backend\n│   │       ├── echarts/   ECharts backend\n│   │       ├── chartjs/   Chart.js backend\n│   │       └── test-data/ fixtures + generators (drive tests and the gallery)\n│   ├── flint-py/          Python port preview (package to be released)\n│   └── flint-mcp/         npm package `flint-chart-mcp` (MCP render server)\n├── site/                  Vite + React demo: landing, gallery, editor, docs\n├── agent-skills/          fallback copy of the MCP-served agent skill\n├── shared/test-data/      JSON fixtures shared across JS + Python\n└── docs/                  architecture and design documents\n```\n\n### Documentation\n\nThe [project site](https://microsoft.github.io/flint-chart/) is the main entry\npoint for examples, the live editor, and concept docs. For source-level\nreferences, start with the [API reference](docs/api-reference.md), the\n[Flint MCP project page](https://microsoft.github.io/flint-chart/#/mcp), or the\n[Development guide](docs/DEVELOPMENT.md).\n\n---\n\n## Contributing\n\nContributions are welcome! See [.github/CONTRIBUTING.md](.github/CONTRIBUTING.md)\nand the [Development guide](docs/DEVELOPMENT.md).\n\n```bash\ngit clone https://github.com/microsoft/flint-chart\ncd flint-chart\nnpm install            # root workspaces: packages/flint-js + flint-mcp + site\n\nnpm run typecheck      # typecheck packages/flint-js + packages/flint-mcp\nnpm run test           # Vitest (packages/flint-js + packages/flint-mcp)\nnpm run build          # build packages/flint-js + packages/flint-mcp\nnpm run site           # demo site (gallery + editor) at http://localhost:5274/\n```\n\nNode 18+ is required. The demo site aliases `flint-chart` to\n`packages/flint-js/src`, so library edits hot-reload in the gallery and editor\nwithout rebuilding `dist/`.\n\nWe especially welcome contributions that add new\n[chart templates](docs/adding-a-chart-template.md) or new\n[rendering backends](docs/adding-a-backend.md).\n\nThis project has adopted the\n[Microsoft Open Source Code of Conduct](.github/CODE_OF_CONDUCT.md). See\n[SECURITY.md](.github/SECURITY.md) to report vulnerabilities.\n\n## Trademarks\n\nThis project may contain trademarks or logos for projects, products, or services.\nAuthorized use of Microsoft trademarks or logos is subject to and must follow\n[Microsoft's Trademark \u0026 Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).\nUse of Microsoft trademarks or logos in modified versions of this project must not\ncause confusion or imply Microsoft sponsorship. Any use of third-party trademarks\nor logos is subject to those third parties' policies.\n\n## License\n\n[MIT](LICENSE) © Microsoft Corporation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Fflint-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrosoft%2Fflint-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Fflint-chart/lists"}