microsoft/flint-chart

🪄 Flint is a visualization language that lets AI agents reliably create expressive, good-looking charts from simple, human-editable chart specs.

Flint — 用于 AI 驱动图表创建的可视化语言

它是什么

  • 一个开源的 TypeScript/JavaScript 库 (flint-chart) 以及一个 MCP (Microsoft Copilot Protocol) 服务器 (flint-chart-mcp)。
  • 提供了一种单一的声明式规范格式，用于描述数据、语义类型、图表类型、主题和交互。
  • 该规范被编译为五个渲染后端的原生规范：Vega-Lite, ECharts, Chart.js, Plotly 和原生 Excel。
  • 包含 52 种图表类型、14 种视觉主题（例如 Economist, NY Times）和 23 种交互预设（缩放、悬停、下钻等）。

为什么它对 AI 代理很重要

  • AI 助手（Copilot, Claude, Cursor 等）可以通过 MCP 服务器调用 Flint，将自然语言请求转换为直接出现在聊天中的交互式图表。
  • 编译器使用语义类型（例如 YearMonth, Quantity）来推断比例、格式和颜色选择，因此代理无需手动编写底层的图表选项。
  • 同一规范适用于所有支持的后端，使代理能够生成 PNG/SVG、可嵌入网页的图表，甚至是用于报告的可编辑 Excel 图表。

如何使用

  1. MCP 服务器 – 运行 npx -y flint-chart-mcp (本地 stdio) 或将您的代理指向托管的服务器 URL。代理随后可以使用纯文本提示请求图表。
  2. 库 – 安装 npm i flint-chart。导入 React 组件或原生 API，传入 ChartAssemblyInput 对象，Flint 即可渲染图表。
    import { FlintChart } from "flint-chart/react";
const spec = { /* data, semantic_types, chart_spec, theme_spec, interaction_spec */ };
<FlintChart spec={spec} />
  3. 自定义 – 通过 Theme Lab 创建或扩展主题，或使用交互 API 编写自定义交互规范。

关键组件

  • packages/flint-js – 核心编译器、后端适配器、主题和交互引擎。
  • packages/flint-mcp – MCP 服务器实现及用于测试的最小化 UI。
  • packages/flint-py – Python 预览版移植（尚未发布）。
  • site/ – Vite-React 站点，托管图库、实时编辑器、主题浏览器和文档。

文档与资源

  • 项目站点: https://microsoft.github.io/flint-chart/ – 图库、实时编辑器、主题浏览器。
  • API 参考、后端特定文档、主题规范、交互规范（均在 docs/ 中）。
  • 代理技能 Markdown 文件 (agent-skills/)，描述如何提示 LLM 创作图表或交互。
  • arXiv 上的学术论文 (2607.20775) 解释了设计原理。

社区与贡献

  • 用于用户支持的 Discord 和微信群。
  • 开放贡献模型：添加新的图表模板、后端或主题。使用 npm run test, npm run build, npm run site 进行构建。
  • MIT 许可，由微软维护。

谁会受益

  • 构建 AI 助手增强型仪表板或数据探索工具的开发人员。
  • 希望其代理无需手动编码每个图表即可生成精美可视化的提示词工程师。
  • 需要单一规范来输出用于网页、PowerPoint（通过 Excel）或交互式笔记本图表的数据科学团队。

相关