【Copilot Studio】KPIをチャット内でグラフ表示してみた：Adaptive Cardとコードインタープリターの2ルート
はじめに
こんにちは、けーまです。
KPIレポートを作るとき、数値の表だけでなく棒グラフや折れ線グラフで見せたい、という要望はよくあります。
Copilot Studio でチャット内にグラフを出す手段は主に2つあります。
そこで本記事では、チャット内にKPIグラフを表示する2つのルートを取り上げ、2026年6月時点で実機検証しました。
ひとつは Adaptive Cards のチャート要素を使う方法、もうひとつはコードインタープリターで Python/matplotlib により画像を生成する方法です。
チャットの中でグラフを見せたい方の参考にしていただければと思います。
本記事は、Copilot Studio でエージェントを作るシリーズの第7回です。
シリーズ全体では「収集 → 集計 → グラフ → 示唆 → 資料化」を一気通貫で行うエージェントを目指しており、本記事はその「グラフ」を扱います。
対象読者：Copilot Studio で、チャット内にKPIグラフを表示したい方
シリーズ記事一覧
| 回 | テーマ | 記事 |
|---|---|---|
| 第1回 | 最初のエージェント | 初めてのエージェントを作ってみた |
| 第2回 | ナレッジ | ナレッジでファイルに基づく回答を試してみた |
| 第3回 | トピック・ツール・フロー | トピック・ツール・エージェントフローで「動き」を作り込む |
| 第4回 | テンプレート・自律トリガー・マルチエージェント | テンプレート・自律トリガー・マルチエージェントで構成を広げてみた |
| 第5回 | 収集（データの渡し方） | 集計用のKPIデータをエージェントに持たせる方法を比べてみた |
| 第6回 | 集計 | KPIの集計をLLMに任せず決定論的にやってみた |
| 第7回 | グラフ | （本記事） |
1. 今回やること
チャット内にグラフを表示する2つのルートを試します。
- ルートA：Adaptive Cards のチャート要素（
Chart.VerticalBar）で棒グラフを表示する - ルートB：コードインタープリター（Python/matplotlib）で棒グラフ画像を生成する
- 2つのルートの使い分けと、表示先（チャネル）の制約を整理する
検証には、これまでの回と同じ架空の SaaS 企業3社（CloudNova / StreamForge / Datapeak）の ARR（架空の値）を使います。
2. グラフ表示の2つのルート
Copilot Studio でチャット内にグラフを出す主な選択肢は2つあります。
| 観点 | ルートA：Adaptive Card のチャート要素 | ルートB：コードインタープリター |
|---|---|---|
| 仕組み | カードの Chart.* 要素をホストが描画 |
Python/matplotlib で画像を生成 |
| コスト | プレミアム機能を使わない | プレミアム（Copilot Credits を消費） |
| 自由度 | カードが用意したチャート種類 | Python で自由（軸・色・注釈など） |
| 出力 | カード（チャット内の描画） | PNG画像（チャット表示・ダウンロード） |
| 設定の手間 | JSON のカードペイロードを書き、トピックのメッセージノードに組み込む | 自然言語で依頼するだけ。CI が Python を自動生成して実行する |
| 表示先の制約 | ホストのカード対応バージョンに依存 | Teams・Microsoft 365 Copilot チャネルでは非表示 |
ルートAはプレミアム機能を使わずに試せる点が利点ですが、JSON のカードペイロードを手書きしてトピックに組み込む手間があります。
ルートBはプレミアム課金が必要な一方、「〇〇をグラフにして」と依頼するだけで CI が Python を生成・実行してくれるため、実際の操作は直感的です。
まず、プレミアム機能を使わないルートAから見ていきます。
3. ルートA：Adaptive Card のチャート要素で表示する
3.1 棒グラフのカードを用意する
3社の ARR を縦棒グラフで表示する Adaptive Card の JSON を用意します。
Chart.VerticalBar の data には、{ "x": ラベル, "y": 数値 } の配列を渡します。
チャート要素に対応していないホストでも情報が残るよう、fallback に FactSet（表形式）を入れています。
ここでは、カードの動きを示すサンプルとして 2025年度 第2四半期の ARR を直接書いています。
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.6",
"body": [
{
"type": "TextBlock",
"text": "SaaS 3社 ARR比較（2025 Q2・百万円）",
"weight": "Bolder",
"size": "Medium",
"wrap": true
},
{
"type": "Chart.VerticalBar",
"title": "ARR（百万円）",
"xAxisTitle": "企業",
"yAxisTitle": "ARR（百万円）",
"colorSet": "categorical",
"data": [
{ "x": "CloudNova", "y": 1800 },
{ "x": "StreamForge", "y": 1150 },
{ "x": "Datapeak", "y": 2600 }
],
"fallback": {
"type": "FactSet",
"facts": [
{ "title": "CloudNova", "value": "ARR 1,800百万円" },
{ "title": "StreamForge", "value": "ARR 1,150百万円" },
{ "title": "Datapeak", "value": "ARR 2,600百万円" }
]
}
}
]
}
Adaptive Cards のチャート要素には、縦棒・横棒・折れ線・円・ドーナツなどがあります。
Teams supports the following types of charts:
- Donut chart
- Gauge chart
- Grouped vertical bar chart
- Horizontal bar chart
- Line chart
- Pie chart
- Stacked horizontal bar chart
- Vertical bar chart
引用元: Charts in Adaptive Cards | Microsoft Learn
3.2 トピックのメッセージノードにカードを載せる
情報を表示するだけのカード（ユーザーの入力を受け取らないもの）は、メッセージノードに載せます。
- エージェントの 「トピック」 から 「トピックの追加」→「最初から」 で空のトピックを作る
- トリガーの説明に、いつこのトピックを使うか（例：3社の ARR を棒グラフで見せたいとき）を書く
- 「ノードの追加」→「メッセージを送信する」 でメッセージノードを足す
- メッセージノードのツールバーの 「追加」→「アダプティブ カード」 を選ぶ
- 「アダプティブ カードを編集する」 でデザイナーを開き、カード ペイロード エディターに先ほどの JSON を貼り付ける
デザイナーのプレビューに棒グラフが表示されれば、カードとしては成立しています。
Adaptive Card デザイナー。プレビュー（左上）に棒グラフが描画され、カード構造に Chart.VerticalBar が並ぶ
JSON を保存してデザイナーを閉じ、トピックを保存します。
3.3 テストチャットで動作を確認する
テストチャットで、トリガーの説明に合う発話（例：「CloudNova / StreamForge / Datapeak のARRを棒グラフで見せて」）を送ります。
すると、メッセージノードのカードが返り、棒グラフが実際に描画されました。
テストチャットに Chart.VerticalBar が描画された。X軸が企業（CloudNova / StreamForge / Datapeak）、Y軸が ARR（百万円）で、3社の棒が並ぶ
生成オーケストレーションをオンにすると、カードの表示に加えて、エージェント自身がランキングや要約コメントを文章で補ってくれることもありました。
グラフ（カード）と示唆（文章）が同じ応答に並ぶ形です。
今回の検証では、グラフの添付に続けて次のような文章が返ってきました。
2025年Q2のARR比較棒グラフをお届けしました。以下に数値をまとめます。
企業 ARR 1位 Datapeak 2,600百万円 2位 CloudNova 1,800百万円 3位 StreamForge 1,150百万円 ポイント
- Datapeak がトップで、3社合計（5,550百万円）の約 47% を占めています。
- CloudNova は中間で、Datapeak とは 800百万円差。
- StreamForge は最小規模で、Datapeak の約 44% 水準にとどまっています。
ARR に加えて NRR（売上維持率）や営業利益率なども比較すると、成長効率や収益性の違いがより明確になります。他のKPIの比較や、レポートの作成もお気軽にご依頼ください！
Adaptive Card 自体は、コードインタープリターのようなプレミアム機能のツールを使わずにテストチャット上で描画できました。
3.4 注意点：チャート要素が描画できるチャネルは限られる
今回グラフが描画されたのは テストチャット です。
Adaptive Cards の JSON には "version": "1.6" のようなスキーマバージョンを指定します。
これは Copilot Studio のバージョンではなく、Adaptive Cards 自体の仕様バージョン（今回作った JSON の先頭付近に書いた "version" の値）のことです。
チャート要素（Chart.VerticalBar など）はバージョン 1.6 で追加された仕様であり、表示先のチャネル（ホスト）がそのバージョンに対応していなければ描画されません。
Copilot Studio supports the Adaptive Cards schema versions 1.6 and earlier. However, the appropriate schema version depends on the targeted host app:
- The Bot Framework Web Chat component (that is, the default website integration pattern) supports version 1.6 but doesn't support
Action.Execute- The live chat widget (used for Omnichannel for Customer Service) is limited to version 1.5
- Teams is also limited to version 1.5
In addition, Copilot Studio only renders version-1.6 cards in the test chat, not on the canvas.
引用元: Using Adaptive Cards in Copilot Studio | Microsoft Learn
Teams やライブチャットは 1.5 までしか対応していないため、Chart.VerticalBar のようなチャート要素は描画されません。
公開チャネルで使う場合は、配信先のチャネルで実際に描画されるかを必ず確認してください（本記事ではテストチャットでのみ確認しています）。
4. ルートB：コードインタープリターで画像グラフを生成する
ルートAはプレミアム機能を使わずに描画できますが、表現はカードが用意したチャートの範囲に収まります。
軸の書式や注釈まで自由に作りたい場合、あるいは生成した画像を資料に貼りたい場合は、コードインタープリターが向きます。
4.1 集計値を棒グラフにする
ルートBはコードインタープリターを使います。プレミアム機能で、Copilot Credits を消費します。
エージェントの 「設定」→「生成AI」 の 「ファイルの処理能力」 で 「コードインタープリター」 をオンにしておきます。
テストチャットで、集計済みの3社のARR平均を棒グラフにするよう依頼します。最初は次のプロンプトを送りました。
3社の2025年のARR平均（CloudNova 1950、StreamForge 1300、Datapeak 2810）を比較する棒グラフを、matplotlib でPNG画像として生成してください。各棒に数値ラベルを付け、Y軸は「ARR（百万円）」、3社で色を分けてください。
コードインタープリターが matplotlib で棒グラフのPNGを生成しましたが、Y軸ラベル（「ARR（百万円）」）が文字化けしました。
依頼メッセージを送ってから、コードが実行されて画像が返ってくるまでの流れがチャット内に続けて表示されます。
発話・コード実行・棒グラフ画像がチャット内に一連の流れで表示された。Y軸ラベルが文字化けしている
そこで、プロンプトの先頭に plt.rcParams['font.family'] = 'Yu Gothic' を追加して試しました。
3社の2025年のARR平均（CloudNova 1950、StreamForge 1300、Datapeak 2810）を比較する棒グラフを matplotlib で生成してください。Y軸は「ARR（百万円）」、3社で色を分け、各棒に数値ラベルを付けてください。先頭に plt.rcParams['font.family'] = 'Yu Gothic' を入れてください。
今度はY軸ラベルが正しく日本語で表示されました。
plt.rcParams['font.family'] = 'Yu Gothic' 指定後。Y軸ラベル「ARR（百万円）」が正しく表示された
棒の値（1,950 / 1,300 / 2,810）は、これまでコードインタープリターが集計した2025年のARR平均です。
集計に続けて、同じコードインタープリターのセッションでそのままグラフにできます。
4.2 注意点：コードインタープリター生成の画像は一部チャネルで表示されない
コードインタープリターが生成した画像は、Teams と Microsoft 365 Copilot のチャネルでは描画されません。
Images created with code interpreter are not rendered in the Teams and Microsoft 365 Copilot channel
引用元: FAQ for code interpreter | Microsoft Learn
ルートA（Adaptive Card）もルートB（コードインタープリター生成画像）も、私の環境のテストチャットでは表示できましたが、Teams など一部のチャネルでは表示が制限されます。
配信先のチャネルで実際に表示されるかは、公開前に確認が必要です。
5. 2つのルートの使い分け
実機で両方を動かした結果、使い分けは次のように整理できます。
- プレミアム課金を避けたい場合は、ルートA（Adaptive Card）。コードインタープリターのようなプレミアムツールを使わずに描画できる。ただし JSON のカードペイロードを書いてトピックに組み込む手間があり、チャート種類はカードが用意した範囲に限られる
- 表現の自由度を優先する場合、あるいは生成画像を資料に貼りたい場合は、ルートB（コードインタープリター）。プレミアム課金（Copilot Credits）が必要だが、自然言語で依頼するだけで CI が Python を生成・実行してくれるため、操作の手間は少ない。軸・色・注釈まで自由に作れる
最終ゴールの資料（PowerPoint・Excel）に載せるグラフは、画像を貼るのではなく、資料の中に編集可能なグラフとして埋め込む方法もあります。
これは今後の回で扱います。
6. まとめ
チャット内にKPIグラフを出す手段は、プレミアム機能を使わない Adaptive Card と、自由度の高いコードインタープリターの2つがあります。
プレミアム課金を避けるなら Adaptive Card（ただし JSON の手書きと手間がある）。プレミアム課金ではあるが操作の直感さや表現の自由度・画像の再利用を優先するならコードインタープリター、という使い分けになります。
どちらの方法も、テストチャットでは描画できましたが、Teams など一部チャネルでは表示が制限されます。
チャット内の簡易表示か、資料に埋め込むグラフかという目的に応じて、表示先の制約まで含めて選ぶとよいと思います。
