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)。
データ、セマンティック型、チャートタイプ、テーマ、インタラクションを記述する単一の宣言型仕様フォーマットを提供します。
この仕様は、5つのレンダリングバックエンド（Vega-Lite, ECharts, Chart.js, Plotly, およびネイティブ Excel）のネイティブ仕様にコンパイルされます。
52種類のチャートタイプ、14種類のビジュアルテーマ（例：Economist, NY Times）、23種類のインタラクションプリセット（ブラシ、ホバー、ドリルダウンなど）を同梱しています。

AIエージェントにとっての重要性

AIアシスタント（Copilot, Claude, Cursorなど）は、MCPサーバーを介してFlintを呼び出し、自然言語のリクエストをチャット内に直接表示されるインタラクティブなチャートに変換できます。
コンパイラはセマンティック型（例：YearMonth, Quantity）を使用してスケール、フォーマット、色の選択を推論するため、エージェントが低レベルのチャートオプションを手動で作成する必要はありません。
同じ仕様がすべてのサポート対象バックエンドで機能するため、エージェントは PNG/SVG、Web埋め込み用チャート、さらにはレポート用の編集可能な Excel チャートを作成できます。

使用方法

MCPサーバー – npx -y flint-chart-mcp (ローカル stdio) を実行するか、ホストされているサーバー URL をエージェントに指定します。エージェントはプレーンテキストのプロンプトでチャートをリクエストできます。
ライブラリ – 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} />
```
カスタマイズ – Theme Lab を通じてテーマを作成・拡張するか、インタラクション API を使用してカスタムインタラクション仕様を記述します。

主要コンポーネント

ドキュメントとリソース

プロジェクトサイト: https://microsoft.github.io/flint-chart/ – ギャラリー、ライブエディタ、テーマエクスプローラー。
API リファレンス、バックエンド固有のドキュメント、テーマ仕様、インタラクション仕様（すべて docs/ 内）。
LLM にチャートやインタラクションを作成させるためのプロンプト方法を記述したエージェントスキル Markdown ファイル (agent-skills/)。
arXiv の学術論文 (2607.20775) で設計根拠を解説。

コミュニティと貢献

ユーザーサポート用の Discord および WeChat グループ。
オープンな貢献モデル：新しいチャートテンプレート、バックエンド、テーマの追加。npm run test, npm run build, npm run site でビルド。
MIT ライセンス、Microsoft によるメンテナンス。

対象ユーザー