Canvas で対話型体験を構築する方法

現在、多くの開発者はエージェントと協働して作業しており、その方法についてもすでに理解している方がほとんどです。エージェントはアイデアの探索から実行へとつなげ、プロジェクトの計画やワークフローの自動化を支援します。多くの場合、会話を行うだけで業務を前進させることができます。

しかし、会話という形式にすっきり収まらないタスクはどうでしょうか？

情報を視覚化して対話できる方が簡単なケースもあります。例えば、バックログの優先順位付け、複雑な情報の可視化、あるいは複数のソースから情報を集約する必要がある場合などです。ビジュアルインターフェースを使えば、パターンの理解や関連性の発見が容易になり、アクションを起こしやすくなります。

長いプロンプトとレスポンスの連鎖をたどるのではなく、キャンバスを使って目の前の情報に直接インタラクションすることができます。

キャンバスの活用方法

これらは Copilot アプリの一部である「キャンバス」と呼ばれる、共有型のインタラクティブな表面です。キャンバスは、開発者とエージェントがリアルタイムで協働できる GitHub Copilot アプリ内のインターフェースです。こうした共有のインタラクティブな表面を「キャンバス拡張機能」と呼びます。

作業が進むにつれてエージェントがキャンバスを更新し、ユーザーはその同じワークスペース上でクリックや編集などの操作を通じて対話できます。これらの操作はエージェントにフィードバックされるか、あるいはキャンバス側でローカル処理されます。

Copilot にキャンバスの改善を依頼することで、体験を継続的に形作ることができます。新機能の追加や既存機能の洗練などを行い、作業に合わせてキャンバスも進化させていくことが可能です。

GitHub Copilot アプリのエージェントセッションで /create-canvas コマンドを実行し、作成したいものの内容やサポートすべき機能について説明することで、キャンバスを作成できます。

キャンバスはプロンプトから生成され、ワークフローに合わせて進化するため、その形態は多岐にわたります。情報を可視化するためのものもあれば、アクションを起こすためのもの、あるいはバックログをより楽しく処理するためのものもあります。

以下に、キャンバスの拡張機能で実現できる具体例を紹介します。

課題選別支援ツール (Issue triage helper)

目的：GitHub の課題を素早く、視覚的に選別する。

プロンプト：/create-canvas Create an interface that allows me to easily swipe through issues in a repo in card format. Can swipe right to ship, left to reject.（リポジトリ内の課題をカード形式で簡単にスワイプして閲覧できるインターフェースを作成してください。右にスワイプすれば提出、左にスワイプすれば却下とします）

結果：このキャンバスは、課題を一つずつ表示するカードベースのインターフェースとして機能します。UI 上ですぐにアクションを実行可能です。スワイプ操作に応じてキャンバスがリアルタイムで更新され、判断内容を追跡しながらアイテムを適切なカテゴリへ移動させます。

インタラクティブなコードベース図 (Interactive codebase diagram)

目的：プロジェクトの構造と、各コンポーネント間の関係を可視化する。

プロンプト：/create-canvas Render a colorful, interactive diagram showing how the code in this project is working together, show how things are related, etc.（このプロジェクト内のコードがどのように連携しているか、要素同士の関係性を示す、カラフルでインタラクティブな図を描画してください）

結果：Canvas はコードベースの動的な図を生成し、各ノードがシステムの異なる部分を表します。ホバーやドラッグ、フィルタリングを通じて多層的な構造を検索可能に。アーキテクチャと直接対話することで、コードベースに対する静的な理解を、能動的に探索できる体験へと変えます。

セッション・ワークツリービューの例

目的：GitHub Copilot アプリのアクティブなセッションとその関連する Git ワークツリーを可視化し、どの状態が「アクティブ」で「 stale（古く不要）」かを明確に表示。必要に応じて簡単に整理整頓できる機能を提供します。

プロンプト：/create-canvas 現在のセッションと、それらがアクティブかオーファンド（孤立）しているかを一目で確認できるワークツリービューを作成してください。必要な箇所は数回のクリックで整理できるようにしてください。

結果：Canvas が生成したビジュアルでは、ワークツリーの状態が明確に表示されます。アクティブなものと stale またはオーファンドになっているものが一目で区別でき、不要なワークツリーはボタン一つで削除可能です。

エージェント・プロンプトコーチの例

目的：過去の対話履歴をレビューし、より明確で効果的なエージェントとの協働方法を提案することで、プロンプトの質を向上させます。

プロンプト：/create-canvas 技能や MCP サーバーなどを活用したセッションにおいて、過去のプロンプトをどう改善できたかを提案するインタラクティブな「プロンプトコーチ」を作成してください。スペルミスや構文エラーなどにも言及できるようにしてください。

結果：キャンバスは過去のプロンプト一覧を表示し、それぞれを分析して改善点を提案します。具体的には文脈の不足やスペルミスなどへの指摘です。これらのヒントを活用すれば、今後のプロンプトを洗練させ、明確さを高め、エージェントからの回答の一貫性を向上させることができます。

ナレッジファインダー（知識発見ツール）

目的：Slack、Teams、メール、ドキュメント全体を検索し、特定のファイルやトピックに関する知見を持つ人物を見つけることです。

プロンプト：/create-canvas Create a way that I can search across Slack, Teams, Email and docs to find people with knowledge of a specific file or someone that would have more context.

結果：検索に基づき、キャンバスは複数のツールを横断して、特定のファイルやトピックと最も関連性の高い人物を特定します。誰が該当し、どこでそのつながりが発見されたかを強調表示するため、対象者との関係性を即座に把握でき、より詳しい情報を求めるための連絡も容易になります。

この先へつなげて

これらの例は、キャンバスでできることのほんの一部に過ぎません。キャンバスを使えば、AI は単なる会話ツールから、情報の可視化やさまざまなワークフローの探索、そして退屈なタスクを楽しくてやりがいのある体験へと変えるプラットフォームになります。

キャンバスは、あなたとエージェントが一緒に考え、探索し、行動できる楽しい共有ワークスペースです。

キャンバスの拡張機能を試してみたいですか？GitHub Copilot アプリで始められます。詳細についてはドキュメントをご覧ください >