本記事では、Microsoft Research が公開した Flint を使い、Microsoft Fabric Data Agent の分析結果をグラフとして可視化するデモアプリを紹介します。

前半では、Flint の仕組みと、なぜ AI エージェントによる可視化に適しているのかを解説します。後半では、デモ用途で作成したローカル Web アプリをもとに、Fabric Data Agent と Flint を MCP で連携してデータ分析＆可視化を行う流れを紹介します。

この記事を書いた背景

Fabric Data Agent は、自然言語による質問に対して、テキストだけでなく、グラフを含むビジュアル応答を返すことが標準機能（プレビュー）で提供されています。

ただし、現時点のビジュアル応答には、次の制約があります。

これらのビジュアルは現在、Fabric のデータエージェントエクスペリエンスでのみサポートされており、SDK、Microsoft 365 Copilot、Teams、Foundry などの他のクライアントではサポートされていません。

参考：Fabric データエージェントから視覚的な応答を取得する（プレビュー）

つまり、Fabric ポータルの外から Data Agent を利用する場合、内蔵のビジュアル機能をそのまま表示することはできません。

また、内蔵のビジュアル機能には、利用できるグラフの種類やカスタマイズ性にも制約があります。

項目	現時点の制約
利用できる場所	Fabric のデータエージェントエクスペリエンス内
グラフの種類	折れ線、複数折れ線、縦棒、複数縦棒、積み上げ縦棒、円、散布図、面、積み上げ面
カスタマイズ	色、フォントサイズ、タイトル、ラベルは変更不可

そこで本記事では、データ分析と可視化の役割を分離するアプローチを紹介します。

Fabric Data Agent：自然言語からデータを取得・集計する
Flint：分析結果を、分析結果を目的に応じたグラフへ変換する

このように役割を分離することで、Fabric Data Agent は「正しいデータを取得・分析すること」に専念し、Flint が「最適な可視化」を担います。

その結果、Fabric ポータル外の Web アプリケーションや自社サービスからでもグラフを表示できるようになるだけでなく、標準のビジュアル応答では対応できない表現やデザインのグラフも柔軟に実現できます。

Flint とは

概要

Flint は、AI エージェントによるチャート生成を想定して設計された ビジュアライゼーション中間言語（Visualization Intermediate Language） です。

Microsoft Research と中国人民大学 IDEAS Lab の共同プロジェクトとして開発され、2026 年 6 月に microsoft/flint-chart （v0.0.1）としてオープンソースで公開されています。

Flint の特徴は、軸、スケール、余白、ラベル、凡例、配色といった細かな設定をすべて記述するのではなく、次のような高レベルの情報（Flint Spec）から、コンパイラが適切な設定を導出する点にあります。

データ
各フィールドの意味を表すセマンティック型
チャートの種類
フィールドと視覚チャネルの対応関係

Flint では、同じ入力仕様から、次の描画ライブラリ向けのネイティブ仕様を生成できます。

Vega-Lite
Apache ECharts
Chart.js

なぜ Flint が必要なのか

チャートを可視化ライブラリで作成したことがある方なら分かると思いますが、読みやすいチャートを作るには、見た目以上に多くの設計判断が必要です。

データの意味に合った配色は何か
データ件数に応じてグラフのサイズをどう調整するか
数値を 1,234、1.2K、12.3% のどの形式で表示するか
ラベルや凡例に、どの程度の余白を確保するか
日付や時刻をどの粒度で表示するか

Vega-Lite、Apache ECharts、Chart.js といった可視化ライブラリを直接利用すれば、これらを細かく制御できます。

しかし、きれいで読みやすいグラフを作るには、多数の低レベル設定、つまり詳細なパラメータ指定が必要です。

人間にとって記述量が多いだけでなく、AI エージェントに生成させる場合も、設定漏れや形式エラーが発生しやすくなります。

主要な可視化ライブラリ

ライブラリ	特徴	主な記述形式
Vega-Lite	データ、マーク、エンコーディングを宣言的に記述できる。統計的な集約や複合グラフに強い	JSON
Apache ECharts	高機能で、インタラクション、アニメーション、大規模データの描画に強い	JavaScript のオプションオブジェクト
Chart.js	比較的シンプルで、Web アプリへ組み込みやすい	JavaScript の設定オブジェクト

いずれも強力なライブラリですが、API や設定方法はそれぞれ異なります。

そのため、描画ライブラリを変更する場合は、基本的に仕様を書き直す必要があります。

「どう描くか」ではなく「何を描くか」を記述する

例として、年月別・地域別の新規ユーザー数をヒートマップで表示するケースを考えます。

Vega-Lite を直接記述する場合、次のように、軸、日時形式、色、凡例、レイアウトなどを細かく指定します。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": { "values": [] },
  "mark": { "type": "rect" },
  "width": { "step": 40 },
  "height": { "step": 30 },
  "encoding": {
    "x": {
      "field": "period",
      "type": "temporal",
      "timeUnit": "yearmonth",
      "axis": {
        "format": "%Y-%m",
        "labelAngle": -45,
        "title": "月"
      }
    },
    "y": {
      "field": "region",
      "type": "nominal",
      "title": "地域"
    },
    "color": {
      "field": "newUsers",
      "type": "quantitative",
      "scale": { "scheme": "blues" },
      "legend": {
        "title": "新規ユーザー数",
        "format": ",.0f"
      }
    }
  },
  "config": {
    "view": { "strokeWidth": 0 },
    "axis": { "domain": false }
  }
}

記述の多くを占めているのは、「何を可視化したいか」ではなく、「どのように描画するか」という設定です。

同じ意図を Flint Spec で表すと、次のようになります。

{
  data: { values: [] },
  semantic_types: {
    period: "YearMonth",
    region: "Category",
    newUsers: "Quantity"
  },
  chart_spec: {
    chartType: "Heatmap",
    encodings: {
      x: { field: "period" },
      y: { field: "region" },
      color: { field: "newUsers" }
    }
  }
}

Flint Spec で記述しているのは、主に次の2点です。

各フィールドが何を意味するか
各フィールドを、どの視覚チャネルに割り当てるか

日時のパース方法、軸の表示形式、カラースケール、凡例、余白などは、Flint コンパイラがデータとセマンティック型から導出します。

観点	描画ライブラリを直接記述	Flint Spec
主に記述する内容	どう描くか（HOW）	何を描くか（WHAT）
記述量	多い	少ない
低レベル設定	利用者または AI が指定	コンパイラが導出
バックエンド変更	ライブラリごとに書き直す	同じ入力から複数形式へコンパイル
AI による生成	複雑で壊れやすい	比較的生成しやすい

Flint の価値は、単に記述量を減らすことではありません。

AI と人間が扱いやすい高レベルな仕様と、描画ライブラリが必要とする詳細な仕様の間を、コンパイラが仲介することが本質です。

Flint の仕組み

入力には 2 つの構成

Flint の入力は、大きく次の2つで構成されます。

Data Specification：データと各フィールドの意味
Chart Specification：チャートの種類と視覚チャネルへの割り当て

Data Specification ― データに「意味」を与え

Flint では、各フィールドが何を表しているのかを、セマンティック型（semantic type） で宣言します。

Flint には、Rank、Temperature、Price、Country、YearMonth、Profit、Quantity など、70種類以上のセマンティック型が用意されています。

セマンティック型の例	コンパイラが判断できること
`YearMonth`	年月としてパースし、時系列に適した軸を生成する
`Profit`	正負の値に適した発散カラースケールを検討する
`Percentage`	パーセント形式で表示する
`Country`	地理データまたはカテゴリデータとして扱う
`Quantity`	連続量に適したスケールやフォーマットを選択する

列名と値だけに頼る場合、可視化ライブラリや AI は、そのデータが何を意味しているのかを推測する必要があります。

セマンティック型を明示することで、「数値としては正しいものの、データの意味には適していないグラフ」になる可能性を抑えられます。

Chart Specification ― 「見せ方」を定義する

Chart Specification では、主に次の内容を定義します。

chartType：Bar、Line、Scatter Plot、Heatmap、Sankey など
encodings：フィールドを x、y、color、size、facet などへ割り当てる

Flint は、30種類以上のチャートに対応しています。

Flint コンパイラ

Data Specification と Chart Specification を受け取ると、Flint コンパイラは次のような設定を自動的に生成します。

導出される項目	内容
パースルール	日付、時刻、数値などの解釈
スケールと軸	ゼロ基準、目盛り、表示範囲
集約	合計、平均、件数など
フォーマット	数値、通貨、割合、日付の表示形式
カラースキーム	データの意味に適した配色
レイアウト	サイズ、余白、ラベル、凡例

これにより、利用者や AI エージェントが、壊れやすい低レベル設定を大量に生成する必要がなくなります。

マルチバックエンド

Flint Spec は、特定の描画ライブラリに依存しない中間表現です。

そのため、同じチャート意図を維持したまま、Vega-Lite、ECharts、Chart.js の仕様へ変換できます。

アプリケーションの要件に応じて描画ライブラリを選択できる点も、Flint の大きな特徴です。

AI エージェントと Flint の相性が良い理由

Vega-Lite や ECharts の仕様には、軸、配色、余白、凡例、数値形式など、多数の詳細設定が含まれます。これらを AI にすべて生成させると、設定漏れや形式エラーが発生しやすくなります。

一方、AI は列名や値から、「日付」「金額」「割合」「地域」「利益」といったデータの意味を判断できます。

そこで Flint では、次のように役割を分けます。

AI エージェント：データの意味と、どのように見せたいかを Flint Spec で表現する
Flint コンパイラ：軸、配色、余白、凡例などの詳細な設定を生成する
描画ライブラリ：生成された仕様をもとにチャートを表示する

AI にすべての描画設定を書かせるのではなく、AI には「何を見せるか」を考えさせ、「どう描くか」は Flint に任せます。

この役割分担により、描画ライブラリの仕様を AI が直接生成する方法と比べて、シンプルで安定したチャート生成を実現しやすくなります。

さらに Flint には、AI エージェントから利用できる MCP サーバー flint-chart-mcp が用意されています。AI エージェントはこの MCP サーバーを呼び出し、Flint Spec の検証、コンパイル、レンダリングを実行できます。

実践：Fabric Data Agent と Flint を試せるデモアプリ

概要

今回作成したアプリは、Fabric Data Agent を MCP 経由で接続しデータを分析、その結果を Flint MCP で可視化する一連の流れを、ブラウザ上で確認できるローカル Web チャットプレイグラウンドです。

実際の処理フロー

アプリ内部では、次の順序で処理されます。

Fabric Data Agent は、Fabric 上のデータを取得・集計し、その結果をオーケストレーターへ返します。

オーケストレーターは、返されたデータの意味をもとにセマンティック型とチャートの種類を判断し、Flint Spec を組み立てて Flint Chart MCP に渡します。

Flint Chart MCP は、Flint Spec を Vega-Lite、ECharts、Chart.js などの描画ライブラリ向け仕様へコンパイルします。アプリは、その結果をブラウザ上でインタラクティブなチャートとして表示します。

興味のある方は、以下のリポジトリからお試しください。

まとめ

本記事では、AI エージェント向けのビジュアライゼーション中間言語である Flint の考え方と、Fabric Data Agent と組み合わせたデモアプリを紹介しました。

Flint のポイントは、軸、配色、余白、フォーマットなどの低レベルな設定を AI に直接生成させるのではなく、データの意味とチャートの意図を短い Flint Spec で表現し、詳細な描画設定を Flint コンパイラに任せることです。

今回のデモアプリでは、Fabric Data Agent に「データを理解して分析する役割」、Flint に「分析結果を分かりやすく可視化する役割」を持たせています。

このように役割を分離することで、Fabric ポータル外の独自アプリでも、自然言語によるデータ分析と柔軟な可視化を組み合わせることができます。

参考文献