GitHub Copilot のデスクトップアプリ「GitHub Copilot App」に、
色んなものを可視化していい感じにインタラクティブに操作できる機能 Canvas があります。
つまり？
通常のチャットでは、回答は文章やコードとして返ってきます。
一方 Canvas では、AI が生成した内容を、操作可能なインターフェースとして表示できます。
ビルドインのものもありますが、
カスタム Canvas（/create-canvas）で自作 Canvas を作ることもできます。
ようわからん
例えばどんなことができるのか見るために、
いくつかサンプルを動かしてみましょう。
ダイアグラム可視化 Canvas インストール
コミュニティによって作られた agents, instructions, skills が配布されている場所「Awesome Copilot」に行きます。
ここでユーザの方々の作ったカスタム Canvas などをインストールすることができます。
その Awesome Copilot リポジトリの中の「Canvas Extensions」一覧を見ます。
たくさんありますね！
今回は、その中の「Diagram Explorer」を入れてみようと思います。
この右の「Install in GitHub Copilot app」を押すと、
ローカルの GitHub Copilot App がでてきます
「Allow」を押してインストールします
diagram-viewer が入りましたね。
動かしてみる (図を作らせる)
さっそく、Diagram Explorer に図を作ってもらいましょう。
GitHub Copilot App の home 画面のチャット欄に指示を書きます
Diagram Explorer を使って、次の内容をインタラクティブな図として
Canvas に表示してください。
GitHub Copilot を中心に置き、以下の5つの利用場所へ接続してください。
- エディタ
- GitHub.com
- CLI
- GitHub Copilot App
- GitHub Mobile
初めて GitHub Copilot を使う人にも分かる、日本語の図にしてください。
インタラクティブな図になった！
さらに、たとえば「GitHub Copilot App」をクリックすると
(LLM 思考後) さらに詳細にドリルダウンしてくれた
また、チャット欄に
エディタからGitHub.comにPull Requestを送るまでの流れも追加してください。
と送ると,
(LLM 思考後) そのように図が更新されました。
通常のチャットでは、回答は文章やコードとして返ってきます。
一方 Canvas では、このように AI が生成した内容を、操作可能なインターフェースとして表示できます。
有用な使い方
個人的には、GitHub の自分の情報を吸い上げて可視化、操作できるようにするのが便利だと思いました。
実際に私が使っているのが、
私は自分の仕事のタスクを GitHub Projects の issue で管理しているのですが、
その issue の状態などをわざわざ github .com に見に行かなくてエディタ内で見れるようにしていまして、それが便利だと感じています。
（実際のスクショとか見せたいけどマジのガチ案件なのでスクショできないw）
Repository Issues Kanban
Awesome Copilot にも "Repository Issues Kanban" という Canvas extension が配布されています
おすすめの勉強会
2026/9/5(土) に Microsoft MVP/ GitHub Star のマキさんが「GitHub Copilot app Canvas特集」の勉強会を開かれるので、
ぜひ見てみてください！