mcp-dashboards

MCP Dashboards

AI がデータを語る。今度は、見せることもできます。

   
_{サムネイルをクリックすると、全サイズで表示できます}

課題

分析、レポート、戦略など、あらゆることにAIを活用しています。しかし、データに隠れたストーリーを実際に見るとなると、数値をスプレッドシートにコピーして、自分でグラフを作らなければなりません。会話の中には洞察がありますが、可視化は別の場所にあります。

解決策

MCP Dashboards は、インタラクティブなチャート、ダッシュボード、KPI ウィジェットをAIとの会話の中に直接表示します。45種類以上のチャートサブタイプを網羅する32個のチャートツール（棒グラフには積み上げ表示やドリルダウン、ヒーローには11種類のバリエーション、フローチャートには6種類のノードと5種類のエッジスタイルなど）、21種類のテーマ、4つのビジュアル探索カタログ、ライブポーリング、PNG/PPT/A4エクスポートを、1つのMCP サーバーから利用できます。ブラウザーのタブを開いたり、コピー＆ペーストしたり、コンテキストを切り替えたりする必要はありません。

対応クライアント

ChatGPT と claude.ai では、リモートでホストされたエンドポイント（下記のStreamable HTTPモード）が必要です。デスクトップクライアントではサーバーがローカルで起動します。

重要

公式のnpmパッケージは、このリポジトリから公開されているmcp-dashboardsのみです。名前が似たパッケージは当プロジェクトのものではありません。mcp-dashboards-sharedはマルウェアでした（OSSFアドバイザリー MAL-2026-4296を参照）。2026年5月にnpmのセキュリティチームによって削除されました。mcp-dashboardsのみをインストールしてください。

クイックスタート

Claude Desktop

claude_desktop_config.jsonに追加します。

• Windows: %APPDATA%\Claude\claude_desktop_config.json
• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "dashboard": {
      "command": "npx",
      "args": ["-y", "mcp-dashboards", "--stdio"]
    }
  }
}

Claude Code / VS Code

claude mcp add dashboard -- npx -y mcp-dashboards --stdio

リモート（Streamable HTTP）

npx mcp-dashboards
# Server starts on http://127.0.0.1:3001/mcp

デフォルトではlocalhostにバインドされます。ネットワーク上に公開する必要がある場合や、localhost以外のオリジンからのブラウザーアクセスを許可する場合は、設定を参照してください。

対応クライアント

MCP Apps対応クライアントであれば、どれでも動作します：Claude Desktop、Claude Web、VS Code（GitHub Copilot）、Goose、Postman、MCPJam。ChatGPTへの対応は順次展開中です。

まずは聞いてみましょう

覚える必要のある API はありません。作りたいものを平易な言葉で説明してください。

• 「地域別に第1四半期と第2四半期の売上を比較する棒グラフ」
• 「ボードルームのテーマで、ポートフォリオの配分をドーナツグラフに表示する」
• 「月次の売上 KPI とトレンドラインを含むダッシュボードを作成する」
• 「国別のウェブサイトトラフィックを世界地図で可視化する」
• 「ビットコインの価格を30秒ごとに更新しながらリアルタイムで追跡する」
• 「サインアップから購入までのコンバージョンファネルを表示する」
• 「レーダーチャートを使って、チームのパフォーマンスを順位付けする」
• 「マルチエージェントのパイプラインをフローチャートで図解し、ステップごとに進められるようにする」

AI が適切なツールを選び、データを整形して、チャートを会話内に表示します。データポイントをクリックして、追加の質問をすることもできます。

どこから始めればよいかわからない場合は、 「カタログを表示して」 と尋ねてください。カスタマイズ項目ごとにライブのビジュアルタイルが1つずつ並ぶマスターダッシュボードが開きます（チャートには実際の棒グラフ、テーマには円グラフ、ヒーローバリエーションには進捗リング、エフェクトにはネオンが光るカードが表示されます）。タイルをクリックして「質問」を押すと、そのサブカタログを詳しく確認できます。

画像ではなく、インタラクティブなチャート

すべてのチャートは、会話内に直接表示されるインタラクティブな HTML です。

• 会話内で操作 - ホバー時のツールチップ、クリックによる選択（AI にフィードバック）、パンくずリスト付きのドリルダウン、地図やヒートマップで最大12倍のスクロールズーム
• 編集可能なフローチャート - ノードのドラッグ、複数選択、右クリックでの名前変更、ナビゲーション用のミニマップとノード一覧、フローのステップ再生。レイアウトを AI に同期して保存することもできます
• ライブポーリング - 任意の API から一定間隔で自動更新されるリアルタイムチャート
• あらゆる形式にエクスポート - PPT（16:9 のスライド）、A4（スマートな改ページ付きの複数ページ）、PNG、CSV

テーマ

組み込みテーマは 21 種類あります。任意のツールに theme を渡してください。

palette、typography（8 種類：system、mono、professional、editorial、bold、techno、cyberpunk、luxury）、effects（5 種類のプリセット：none、subtle、shimmer、neon、energetic）を自由に組み合わせられます。

ライブポーリング

任意の API から自動更新するリアルタイムチャートです。ライブチャートは poll_http を介してデータをポーリングし、次の 2 つのモードをサポートします。

セキュアなプリセット（認証が必要な API）

環境変数でプリセットを設定します。認証情報はサーバー側に保持され、会話には表示されません。

{
  "mcpServers": {
    "dashboard": {
      "command": "npx",
      "args": ["-y", "mcp-dashboards", "--stdio"],
      "env": {
        "POLL_PRESET_T212_CASH_URL": "https://live.trading212.com/api/v0/equity/account/cash",
        "POLL_PRESET_T212_CASH_HEADERS": "{\"Authorization\": \"Bearer YOUR_API_KEY\"}"
      }
    }
  }
}

次に、*「ポートフォリオの合計と損益をリアルタイムで監視して」*と依頼すると、AI は pollArgs: { preset: "t212_cash" } を指定して render_live_chart を使用します。

命名規則： POLL_PRESET_<NAME>_URL および POLL_PRESET_<NAME>_HEADERS（JSON オブジェクト）。

パブリック URL（認証不要）

パブリック API の場合は、URL を直接使用します。

*「30 秒ごとに更新されるビットコイン価格を表示して」*と依頼すると、pollArgs: { url: "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd" } が使用されます。

仕組み

MCP Apps を基盤にしています。AI にデータの可視化を依頼すると、適切なツールが呼び出され、チャートが会話内に表示されます。自己完結型で、CDN も外部リクエストも必要ありません。

MCP Apps に対応（インライン表示）：Claude Desktop、VS Code Insiders + MCP Apps extension、Goose、Postman。

MCP Apps に対応していない場合も問題ありません。 すべてのチャートの応答には、ブラウザーで同じインタラクティブなチャートを開くクリック可能なリンクも含まれます。

• http://localhost:PORT/chart/{id} - チャット内のクリック可能なリンクです。同一マシン上の 127.0.0.1 にバインドされた小規模な HTTP サーバーを使用し、最初のプレビューリクエスト時に遅延起動します。
• file:///.../chart-{id}.html - 永続的で共有可能なアーティファクトです。同じ HTML バイト列をディスクに書き込むため、メールで送信したり、アーカイブしたり、サーバー終了後に開いたりできます。

両方を用意している理由：Claude Code（VS Code）はチャットの Markdown から file://、vscode://、command:// の URL スキームを除去するため、クリック可能なリンクとして機能するのは http:// のみです。file:// のパスは共有とオフラインでの表示用に提供されます。ツールのアノテーション（readOnlyHint、idempotentHint、openWorldHint）は、クライアントがツールの動作を判断するのに役立ちます。

設定

すべて省略可能です。デフォルトは安全な値です。上書きする必要がある場合にのみ設定してください。

ディスク上のファイル

グラフの HTML ファイルは <system temp>/mcp-dashboards/ に書き込まれ、7 日後に自動削除されます。ファイルを恒久的に保存するには、グラフに組み込まれているダウンロードボタン（PNG / PPT / A4）の使用をおすすめします。

いつでも AI に 「グラフファイルを一覧表示して」 または 「1 日より古いグラフファイルを削除して」 と依頼できます。list_chart_files / delete_chart_files が呼び出されます。

要件： Node.js 18 以降。

git clone https://github.com/KyuRish/mcp-dashboards.git
cd mcp-dashboards
npm install
npm run build
npm run serve   # http://localhost:3001
npm run dev     # watch mode

サポート

MCP Dashboards が役に立った場合：

Rishabh Dogra が開発しました。LinkedIn でつながりましょう。

プライバシー

すべての処理はローカルで行われます。データが収集、送信、または外部に保存されることはありません。

外部への呼び出しは、ユーザーが 明示的に依頼した場合にのみ行われます。render_from_url と poll_http では、ユーザーが指定した URL またはプリセットが必要です。どちらもプライベート、ループバック、リンクローカルのアドレス（192.168.* ネットワークや 169.254.169.254 の AWS メタデータなど）へのアクセスを拒否するため、プロンプトインジェクションを受けた AI が内部サービスにひそかにアクセスすることはできません。また、ホスト名ごとに呼び出しをスロットルするため、無限ループが発生しても実際の API から IP アドレスがブロックされることはありません。

環境変数のプリセットに含まれる認証情報がマシンの外に出ることはありません。ブラウザープレビューサーバーとオプションの HTTP トランスポートは、どちらもデフォルトで 127.0.0.1 にバインドされ、他のデバイスからアクセスできません。グラフの HTML ファイルはシステムの一時フォルダーに保存され、7 日後に自動削除されます。これらの設定を変更するには、設定を参照してください。

ライセンス

FSL-1.1-MIT - 競合する商用製品の構築を除き、あらゆる目的で自由に使用できます。各バージョンはリリースから 2 年後に MIT ライセンスに切り替わります。商用ライセンスについては、[email protected] までお問い合わせください。

サードパーティソフトウェア

同梱されている UI アーティファクト（dist/mcp-app.html）には、Chart.js、html2canvas-pro、Luxon、TopoJSON、Dagre の各プロジェクトのオープンソースライブラリが埋め込まれており、MIT または ISC ライセンスに基づいて配布されています。完全なクレジット表記とライセンス文は THIRD_PARTY_LICENSES.md に掲載されています。