Cursor 3.1 Canvas｜AIで対話型ダッシュボード生成

結論: Cursor 3.1 Canvasは、AIエージェントがエージェントウィンドウ内に永続的なReactインターフェースを生成する新機能で、データ可視化・コードレビュー・インシデント対応を「テキスト出力」から「インタラクティブなUIアプリ」へと変革します。

この記事の要点:

• 4月15日リリースのCanvas機能で、エージェントがReactベースのUIを直接生成
• テーブル・ボックス・ダイアグラム・チャートなどCursor純正（ファーストパーティ）のコンポーネントが使用可能
• CLI改善（/debug・/btw・/config・/statusline）で4月14日からターミナル体験も向上

対象読者: Cursor利用中の開発者、AIコーディングツールで業務ダッシュボードの自動化を検討するエンジニア・IT担当者

読了後にできること: Cursor Canvasを使ったインシデント対応ダッシュボードを今日から構築できる

「AIがコードを書いてくれても、結果がテキストだとそのまま使えないんですよね」

先日、データエンジニアの顧問先でこんな声を聞きました。Datadog・Databricks・Sentryのログを複数引っ張ってきても、AIが出力するのは「markdownのテーブル」。それを見て手動でグラフを作るか、別ツールに投げ込む必要がある、というわけです。

この問題を根本から解決するのが、Cursor 3.1で搭載されたCanvas機能です。AIエージェントが「コードを書く」だけでなく、「インタラクティブなReact UIをその場で生成する」ようになりました。

「これ、もうBIツール要らないんじゃ？」と思いたくなる機能ですが、常に更新される監視画面はBIツールのほうが向いています（使い分けは後半で整理します）。

この記事では、Cursor 3.1 Canvasの仕組み・活用パターン・CLIの改善点を、コピペ可能なプロンプト例つきで解説します。

Cursor 3.1 Canvas — 何が変わったのか

リリース日と概要

Canvas機能は2026年4月15日にリリースされました（CLI改善は4月14日先行リリース）。Cursor公式ブログは、チャットやmarkdownファイルの長い文章を読む代わりに、依頼に合わせて作られた画面を見て操作できるようにする機能だと説明しています。

従来との比較

AIエージェントの概念・導入ステップについては、AIエージェント導入完全ガイドで詳しく解説しています。

Canvasの技術的な仕組み

Reactベースのレンダリング

Canvasは、Cursor独自のReact UIライブラリをベースにしています。エージェントがCanvas出力を選択した場合、エージェントウィンドウ内でReactコンポーネントとしてレンダリングされます。

利用可能なファーストパーティコンポーネント

Canvasの生成をトリガーする条件

公式ドキュメントによると、Canvasが作られるのは、Cursorがタスクに視覚的・対話的な表示が向くと判断した場合か、ユーザーが直接求めた場合です。たとえば次のような依頼が当てはまります：

• 複数データソースの統合が必要な場合
• データの傾向・パターンの可視化が有効な場合
• ユーザーが「ダッシュボード」「グラフ」「インタラクティブ」などのキーワードを含む場合
• PR/コードレビューで差分を整理・優先付けする場合

3つの主要ユースケース

ユースケース1：インシデント対応ダッシュボード

SREチームを想定したシナリオです。本番環境でAPIのレスポンスタイムが急上昇した際、従来はDatadog・Databricks・Sentryの3つを別々に開いて手動で突き合わせる必要がありました。

Cursorエージェントへの指示:
「本番APIのレスポンスタイム急上昇のインシデント対応をしています。
以下の3ソースのデータを統合したダッシュボードを Canvas で作成してください。

データソース:
- ./logs/datadog_api_metrics.json (過去24時間のp50/p95/p99レイテンシ)
- ./logs/databricks_query_log.csv (DB クエリ実行時間)
- ./logs/sentry_errors.json (エラー発生タイムライン)

ダッシュボードの要件:
- 時系列チャート: 3ソースのタイムラインを重ね合わせて表示
- ヒートマップ: エラー発生頻度を時間×エンドポイントで可視化
- サマリーカード: 最もレイテンシが高いエンドポイントTop 5
- フィルター: エンドポイント別・時間帯別で絞り込み可能に"

想定シナリオでは、従来40〜60分かかるデータ統合・可視化作業が8分程度で済む見込みです（実測値ではありません）。時系列を重ねて表示すれば、たとえば「DBクエリの急増（14:23）がp95レイテンシの急上昇（14:25）の2分前に起きている」といった前後関係も見つけやすくなります。

事例区分: 試算例（実測値ではありません）
以下は上の想定シナリオにもとづく試算で、特定の企業での実績ではありません。

場面: 本番APIのレスポンスタイム急上昇への対応（上のプロンプト例）
前提: 3つのツールのログを手作業で開いて突き合わせる時間を40〜60分、Canvasでの生成と確認を8分程度と仮定
対象: データ統合・可視化の作業だけ（原因の調査と修正は含めない）
計算: (40−8)÷40＝80%、(60−8)÷60≒87%で、約8割の短縮になる計算

ユースケース2：PRレビューUI

Cursorエージェントへの指示:
「このPRの差分を整理して、Canvas でレビューしやすいUIを作ってください。

要件:
- 変更ファイルをカテゴリ別（API/フロントエンド/設定ファイル/テスト）にグループ化
- 各ファイルにリスク評価（高/中/低）を自動付与
- 高リスクファイルを最上部に配置
- アルゴリズムが複雑なコードには疑似コード説明を添付
- 変更量（追加/削除行数）をバーグラフで視覚化"

研修先のチームリーダーが「今まで大きなPRはレビューが後回しになりがちだったけど、Canvas化してから優先度がわかりやすくなって、同日中にレビューできるようになった」と言っていました。

ユースケース3：評価分析・テスト結果可視化

Cursorエージェントへの指示:
「テスト実行結果を分析して、Canvas でテスト品質ダッシュボードを作ってください。

データ: ./test-results/jest-output.json

要件:
- カバレッジ推移チャート（過去30日間）
- 失敗テストをエラーパターン別にクラスタリング
- 最も頻繁に失敗するテストTop 10のリスト
- フレーキーテスト（断続的に失敗）の検出・ハイライト
- 修正優先度スコアリング（失敗頻度×影響範囲）"

Canvasを拡張するSkillマーケットプレイス

Docs Canvas Skill

Cursorマーケットプレイスで公開されている「Docs Canvas Skill」を使うと、エージェントがコードリポジトリ全体のアーキテクチャ図をCanvasで自動生成します。

インストール: Cursor Marketplace で "Docs Canvas" を追加（チャットで /add-plugin docs-canvas）

使い方:
「このリポジトリのアーキテクチャ図をCanvasで作成してください。
サービス間の依存関係・データフロー・外部API接続を含めて"

カスタムSkillの作成

自社の業務要件に合わせたCanvasスタイルを定義するカスタムSkillも作成できます。例えば、「営業レポートダッシュボード」スタイルをSkillとして定義すると、営業データを渡すだけで自社フォーマットのダッシュボードが自動生成されます。

CLI改善（4月14日リリース） — /debug・/btw・/config・/statusline

Canvas機能と同時期に、Cursor CLIも大幅に改善されました。4月14日リリースの4つの新機能を紹介します。

/debug — 再現困難なバグの根本原因分析

# 使い方
/debug

# → Cursorが以下を自動実行:
# 1. 仮説を生成（「このエラーはXが原因ではないか？」）
# 2. ログ文を追加
# 3. ランタイム情報を収集
# 4. 根本原因を特定してから修正を提案

# 活用例
/debug
> 本番でのみ発生するNullPointerExceptionを調べてください。
> ログ: ./logs/prod-errors.log
> 開発環境では再現しません。

これまでは「開発環境で再現しないバグ」の調査に半日かかることもありましたが、/debugで仮説生成→ログ追加→確認のサイクルが自動化されました。想定シナリオとして、3時間かかっていたデバッグが40分程度に縮む場面も考えられます（実測値ではありません）。

/btw — 実行中断なしのサイド質問

# 実行中にサイドで質問（実行は止まらない）
/btw このメソッドの命名規則はキャメルケースとスネークケース、どちらが適切？

# → エージェントが現在の作業を止めずに回答
# → 質問履歴は次の指示に活かされる

/config — インタラクティブな設定メニュー

# 設定メニューを開く
/config

# 表示される設定項目例:
# - モデル選択
# - 既定値（デフォルト）の設定
# - 実行時の動作に関する設定

# 変更はその場で反映

/statusline — カスタマイズ可能なステータスバー

# フッターには作業ディレクトリ・worktree・現在のブランチが表示される
# ステータスバーのカスタマイズを開く:
/statusline

# 表示できる情報（公式の変更履歴より）:
# - 現在のモード
# - ブランチ
# - 環境
# - 実行中のタスクのヒント
# - そのほかのセッション情報

# アクティブタスクを常に表示することで、
# 長い処理中も「今何をやっているか」が一目でわかる

その他の改善点

• シームレスなモデル切り替え: プロンプトをクリアせずにモデルを変更可能
• 自動実行提案: 自動実行（auto-run）を3回続けて有効にすると、常時オンにすることを提案
• クリップボード画像貼り付け: Ctrl+Vでスクリーンショットを直接ペースト

企業での業務ダッシュボード自動構築 — 実践ガイド

適用できる業務の選び方

導入時の推奨フロー

# Phase 1: 単一チームでのPoC（1〜2週間）
# 最も複雑なデータ統合業務を1つ選んでCanvas化を試みる
# 目標: 従来の50%以下の時間で同品質のレポートが作れるか確認

# Phase 2: フィードバックをもとにプロンプト最適化（1週間）
# 「ダッシュボードの見やすさ」「データ解釈の正確さ」をチームでレビュー
# カスタムSkillとして保存

# Phase 3: 全チームへの展開（2〜4週間）
# プロンプトテンプレートを共有リポジトリに保存
# 定期的なCanvas生成タスクをCronで自動化

Canvasプロンプトテンプレート集 — 5つのシーン別コピペ例

研修先でよく聞かれる「どう指示すればCanvasが出てくるの？」という疑問に答えます。以下は、そのまま使える形に整えたプロンプトテンプレートです。「Canvas で」と明示することで、エージェントがCanvas生成を選択しやすくなります。

テンプレート1：マルチソースデータ統合ダッシュボード

以下の複数データソースを統合した分析ダッシュボードを Canvas で作成してください。

データ:
- [ファイルパス1]: [データの説明]
- [ファイルパス2]: [データの説明]

ダッシュボードの要件:
- 時系列チャート: 全データソースの推移を重ねて表示
- サマリーカード: 主要KPI（最大値・最小値・平均）を3枚で表示
- 異常値ハイライト: 平均±2σを超える箇所を赤色でマーク
- フィルター: 期間・カテゴリ別で絞り込み可能に

不足している情報があれば、最初に質問してから作業を開始してください。

テンプレート2：PRレビューUI自動生成

このブランチのPRをCanvas形式でレビューしやすく整理してください。

要件:
- 変更ファイルを [API/フロントエンド/テスト/設定] の4カテゴリに分類
- 各ファイルにリスクスコア（高/中/低）を付与
- 高リスクファイルを最上部に配置し、理由を1行で添える
- 変更量（追加/削除行数）をファイル横に表示
- コードレビューのチェックリスト（セキュリティ・パフォーマンス・テスト有無）を末尾に

仮定した点は必ず"仮定"と明記してください。

テンプレート3：テスト品質ダッシュボード

./test-results/ 以下のテスト結果を分析して、品質ダッシュボードを Canvas で作成してください。

含めてほしい要素:
- カバレッジ: ファイル・モジュール別のカバレッジ棒グラフ
- 失敗分析: エラーメッセージのクラスタリング（類似エラーをグループ化）
- フレーキーテスト: 過去10回の実行で断続的に失敗したテストを検出
- 優先度スコア: [失敗頻度 × 影響範囲] で算出したスコア順リスト

数字と固有名詞は根拠（テストファイル名・行番号）を添えてください。

テンプレート4：アーキテクチャ図の自動生成

このリポジトリのシステムアーキテクチャ図を Canvas（Diagram形式）で生成してください。

含めてほしい要素:
- サービス間の依存関係（矢印の向きで依存方向を表示）
- 外部API・データベースとの接続
- 認証・認可の境界線
- 各サービスの担当チーム（package.jsonやREADMEから推定）

凡例を右上に表示してください。

テンプレート5：KPIモニタリングスナップショット

以下のCSVファイルから月次KPIレポートを Canvas で作成してください。
ファイル: [CSVのパス]

グラフ構成:
- 上段: 売上・MAU・NPS の折れ線チャート（月次推移）
- 中段: 目標達成率を信号機（赤/黄/緑）で表示
- 下段: 前月比の増減を矢印付き数字カードで表示（↑赤 ↓緑）

注記: 数値はファイルの実データのみ使用し、補完・推測は不要です。

【要注意】Cursor Canvas導入の失敗パターン

失敗1：リアルタイムデータには使わない

❌ 「10秒ごとに更新されるリアルタイムダッシュボード」をCanvasで作ろうとする
⭕ Canvasは「タスク完了時点のスナップショット」。リアルタイム監視はGrafana等の専用ツールを使う

なぜ重要か: Canvasはエージェントが実行した時点のデータを可視化するものです。公式ドキュメントでは、保存されたCanvasを後から開き直し、新しいデータで再実行できると説明されていますが、常時更新される監視画面とは用途が異なります。顧問先でもこの誤解が多かったです。

失敗2：Canvas生成をすべてのタスクに使おうとする

❌ 「ファイルを1つ修正するだけ」のタスクでもCanvasを要求する
⭕ Canvas生成にはトークンコストがかかる。複数データソース統合・可視化が必要なタスクに絞る

なぜ重要か: 単純なタスクでCanvasを生成すると、コストに対してメリットが薄い上に、余計な処理時間がかかります。

失敗3：Canvasの出力をそのまま本番ダッシュボードに使う

❌ Canvas生成のダッシュボードをそのまま社外向けレポートに使用
⭕ CanvasはあくまでエージェントウィンドウUI。本番ダッシュボードは別途実装する

なぜ重要か: Canvasは開発・分析フロー内での使用を前提とした機能です。2026年9月30日時点では、Canvasのツールバーの「Publish」で共有リンクを発行でき、同じチームのメンバーがブラウザから読み取り専用で開けます（Pro・Teams・Enterpriseの有料プランが対象）。リンクを開けるのはチームのメンバーだけなので、社外への共有やダッシュボードサービスへの組み込みには別途実装が必要です。

失敗4：プロンプトでCanvas生成を強制しすぎる

❌ 「必ずCanvasで出力してください」と全タスクに追記
⭕ エージェントのCanvas生成判断に任せ、必要な場合だけ明示的に指定

なぜ重要か: エージェントは適切な場面でCanvasを選択します。強制指定すると、シンプルな回答がCanvas化されて逆に見づらくなります。

よくある質問

Cursor Canvasとは何ですか？

Cursor Canvas（canvases）は、エージェントの回答をチャットの横に表示される対話型の画面として作る機能です。2026年4月15日にCursor 3.1で公開されました。テーブル・ボックス・ダイアグラム・チャートなどのコンポーネントを使い、ダッシュボードや分析、レポートを、長いmarkdownの表の代わりに独立した画面として表示します。

Cursor Canvasはエクスポートや共有ができますか？

はい、Cursor Canvasはチーム内で共有できます。Canvasのツールバーの「Publish」で共有リンクを発行すると、同じチームのメンバーがブラウザから読み取り専用で開けます。共有はPro・Teams・Enterpriseの有料プランが対象で、Freeでは発行できません。2026年9月30日時点の公式ドキュメントに、PDFなどのファイルへ書き出す機能の記載はありません。

CursorのDocs Canvasとは何ですか？

Docs Canvasは、ドキュメントを行き来しやすいCanvasとして表示する、Cursor公式のプラグインです。Cursorのマーケットプレイスで公開されており、/add-plugin docs-canvas で追加します。Cursorの公式ブログでは、Docs Canvasのスキルを使うと、リポジトリの対話型のアーキテクチャ図を生成できると紹介されています。

Cursor Canvasでダッシュボードを作るにはどう指示すればよいですか？

Cursor Canvasでダッシュボードを作るには、「Canvasで作成して」と明示し、データの場所と載せたい要素を伝えます。公式ドキュメントによると、Canvasが作られるのは、Cursorが視覚的な表示が向くと判断した場合か、ユーザーが直接求めた場合です。時系列チャート・サマリーカード・絞り込みなどの要件を箇条書きで渡し、出来上がった画面は追加の指示で直します。

Cursor CanvasはGrafanaやBIツールの代わりになりますか？

いいえ、Cursor Canvasは常時監視や社外向けダッシュボードの代わりにはなりません。Canvasはエージェントが実行した時点のデータを可視化するもので、保存したCanvasは後から新しいデータで再実行できますが、共有リンクを開けるのは同じチームのメンバーだけです。リアルタイム監視はGrafanaなどの専用ツール、社外向けの画面は別途実装が向いています。

まとめ：今日から始める3つのアクション

Cursor 3.1 Canvasは、「AIがコードを書く」から「AIがUIを作る」へのパラダイムシフトを体現した機能です。特にインシデント対応・PRレビュー・テスト分析の3場面では、マークダウンの限界を超えた価値を提供します。CLI改善（/debug・/btw・/config・/statusline）も合わせると、Cursor 3.1はAIコーディング体験の完成度が一段上がったバージョンと言えます。

1. 今日やること: 手元のプロジェクトで「複数CSVの統合分析」を依頼して、Canvasが自動生成されるか試してみる。プロンプトテンプレート1を使うとスムーズです。
2. 今週中: /debug・/btwコマンドをデバッグ作業に組み込み、従来のデバッグ時間と比較する。「/debugで何分短縮できたか」を記録しておくと、チームへの普及説明に使えます。
3. 今月中: チームの定例インシデント対応フローにCanvasプロンプトを標準化し、対応時間短縮を測定する。テンプレート1を起点に、自社のデータソースに合わせてカスタマイズしてみてください。

あわせて読みたい:

• AIエージェント導入完全ガイド — AIエージェント活用の全体像と企業展開の手順
• AI導入戦略フレームワーク — 中小企業がAIを組織に定着させるための戦略設計

参考・出典

• Interact with agent-created visualizations in canvases · Cursor — Cursor公式（参照日: 2026-04-19）
• CLI Debug Mode and /btw Support · Cursor — Cursor公式（参照日: 2026-04-19）
• Changelog · Cursor — Cursor公式（参照日: 2026-04-19）
• Cursor Release Notes – April 2026 Latest Updates — Releasebot（参照日: 2026-04-19）
• Cursor 3.1 Canvas: AI Agents Now Build Your Dashboard — NextDev（参照日: 2026-04-19）

著者: 佐藤傑（さとう・すぐる）
株式会社Uravation代表取締役。早稲田大学法学部在学中に生成AIの可能性に魅了され、X（旧Twitter）で活用法を発信（@SuguruKun_ai、フォロワー約10万人）。100社以上の企業向けAI研修・導入支援を展開。著書『AIエージェント仕事術』（SBクリエイティブ）。SoftBank IT連載7回執筆（NewsPicks最大1,125ピックス）。

ご質問・ご相談はお問い合わせフォームからお気軽にどうぞ。