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

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

この記事の要点:

• 4月15日リリースのCanvas機能で、エージェントがReactベースのUIを直接生成
• テーブル・ボックス・ダイアグラム・チャートなど一人称コンポーネントが使用可能
• 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ツール要らないんじゃ？」と思うくらいの完成度でした。

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

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

リリース日と概要

Canvas機能は2026年4月15日にリリースされました（CLI改善は4月14日先行リリース）。Cursor公式ブログによると、Canvasの設計思想は「AIエージェントの出力をmarkdownとコードの限界から解放する」ことです。

従来との比較

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

Canvasの技術的な仕組み

Reactベースのレンダリング

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

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

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

エージェントは、以下の条件を満たす場合にCanvasの生成を選択します：

• 複数データソースの統合が必要な場合
• データの傾向・パターンの可視化が有効な場合
• ユーザーが「ダッシュボード」「グラフ」「インタラクティブ」などのキーワードを含む場合
• 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分前に起きている」という気づきをCanvasに自動追記してくれました。

事例区分: 実案件（匿名加工）
以下は弊社が支援した企業の事例です。守秘義務のため社名・数値を一部加工しています。

測定期間: 2026年4月第3週（3インシデント対応）
対象: Web系サービス企業のSREチーム4名
測定方法: インシデント発生〜原因特定までの時間を事前事後で比較
結果: データ統合・可視化フェーズが平均47分→8.3分（82%短縮）

ユースケース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" → Install

使い方:
「このリポジトリのアーキテクチャ図を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

# 表示される設定項目例:
# - モデル選択（Claude 4.7 Sonnet / Opus / 他）
# - 自動実行モード（on/off）
# - Canvasの自動トリガー条件
# - ターミナルテーマ
# - デフォルト言語設定

# 変更はその場で反映

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

# デフォルト: 作業ディレクトリ・ブランチ・環境が表示
# カスタマイズ例:
/statusline add git_branch     # 現在のブランチ
/statusline add active_task    # 現在のタスクヒント
/statusline add session_meta   # セッションメタデータ
/statusline add env_name       # 環境名（dev/staging/prod）

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

その他の改善点

• シームレスなモデル切り替え: プロンプトをクリアせずにモデルを変更可能
• 自動実行提案: 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はエージェントが実行した時点のデータを可視化するものです。リアルタイム更新はサポートされていません。顧問先でもこの誤解が多かったです。

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

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

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

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

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

なぜ重要か: Canvasは開発・分析フロー内での使用を前提とした機能です。エクスポート機能は限定的で、社外共有やダッシュボードサービスへの組み込みは想定されていません。

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

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

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

まとめ：今日から始める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ピックス）。

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