🤖 Microsoft製「Flint」、AIエージェントのグラフ生成を「セマンティック型」で立て直す

MicrosoftとIDEASラボが2026年7月8日に公開したFlintは、70種超のセマンティック型でフィールドの意味を伝え、崩れないVega-Lite/ECharts/Chart.jsのチャートをAIに描かせる中間言語だ。

読む深さ

AIエージェントに「このCSVをグラフにして」と頼んだら、軸ラベルが重なった棒グラフが返ってきた。心当たりのある人は多いと思う。 Vega-Lite の仕様をそのまま書かせると、軸のスケールも色の割り当ても毎回微妙に違う。かといって仕様を詳しく書き込むほど、今度はモデルがその複雑さに引きずられて壊れたJSONを返してくる。 シンプルに書かせると見た目が崩れ、詳しく書かせるとAIが壊す。このジレンマに、Microsoft Researchが答えを出した。

LLMは低レベルのパラメータ調整が苦手

2026年7月8日、MicrosoftとRenmin大学IDEASラボが「Flint」という可視化中間言語をOSS公開した。 着眼点はシンプルだ。LLMにVega-LiteやChart.jsの仕様を直接書かせると、スケール・軸・集計方法・配色といった低レベルの設定を全部モデルが判断することになる。 これがLLMにとって鬼門だった。数値の型は合っていても、意味を汲み取れずに変な軸のグラフを生成してしまう。

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "revenue", "type": "quantitative"},
    "y": {"field": "country", "type": "nominal"}
  }
}

この仕様、文法的には正しい。でも revenue が「価格」だと分かっていれば、桁区切りや通貨記号、対数軸にすべきかどうかまで自動で決められるはずだ。 Vega-Liteの型システムは quantitative / nominal しか教えてくれない。ここに一段挟むレイヤーが足りなかった。

セマンティック型でコンパイラに意味を渡す

Flintが導入したのが「セマンティック型」という考え方だ。PriceRankCountryTemperature など70種類超の型でフィールドの意味を明示し、あとはコンパイラに任せる。

import { assembleVegaLite } from 'flint-chart';

const spec = assembleVegaLite({
  data: { values: myData },
  semantic_types: { weight: 'Quantity', mpg: 'Quantity' },
  chart_spec: {
    chartType: 'Scatter Plot',
    encodings: { x: { field: 'weight' }, y: { field: 'mpg' } },
    baseSize: { width: 400, height: 300 },
  },
});

AIエージェントが書くのはこれだけ。スケール・軸・配色・レイアウトはコンパイラ側が自動導出する。 しかも同じ仕様からVega-Lite・ECharts・Chart.jsの3バックエンドに変換できるので、レンダラーを後から変えても書き直しはいらない。 作者らはモデルに直接Vega-Lite仕様を書かせる方式より高い評価スコアが出たとしているが、比較の条件やスコアの定義はリポジトリ上では公開されていない。数字を鵜呑みにするより、セマンティック型という抽象化がモデルにとって扱いやすいかどうかを、自分の手元のデータで確かめたほうが早い。

MCPサーバー flint-chart-mcp も同時に公開されていて、チャットやコーディング環境から直接チャートの作成・検証・レンダリングまでできる。試すだけなら次の2コマンドで済む。

npm install flint-chart
npx -y flint-chart-mcp

日本語圏ではまだFabric寄りの解説しかない

QiitaにはすでにFlintを扱った記事が2本ある。ただしどちらもMicrosoft FabricのData AgentやPower BIとの連携が主題で、「AIがなぜチャート生成に失敗するのか」という根っこの話から書いたものは見当たらなかった。 JavaScript/TypeScriptの現場で「AIにチャートを作らせたい」と考えている人にとっては、まだ拾いにくい情報の位置づけだと思う。

7月8日の公開から2週間あまりで v0.4.0 まで来ていて、Plotlyの38チャート種別と編集可能なExcelテンプレート18種が加わった。研究プロジェクトの初期リリースにしては動きが速い。 Vega-Liteの仕様を手で調整する時間があるなら、一度Flintのセマンティック型に仕事を任せてみてもいいんじゃないだろうか。

元ネタ: https://microsoft.github.io/flint-chart/#/