Canvas で対話型体験を構築する方法
GitHub は、対話型エージェントの限界を補完する「Canvas」と呼ばれる新しい共有インタフェース機能を GitHub Copilot に導入し、視覚的な情報処理やリアルタイム協働を可能にする技術的進展を発表した。
キーポイント
対話型インターフェースの拡張
従来のプロンプト連鎖に依存する作業から脱却し、視覚的に情報を操作・確認できる「Canvas」という共有インタフェースを提供することで、複雑なタスクやバックログ処理を効率化する。
エージェントとのリアルタイム協働
開発者と AI エージェントが同じ Canvas 上で双方向に操作でき、エージェントは作業状況を更新し、人間はクリックや編集を通じて直接フィードバックを与えることができる。
動的な生成と進化
/create-canvas コマンドによるプロンプトから即座に生成され、機能の追加や改善を繰り返すことで、ワークフローに合わせて動的に進化していく柔軟なツールとして機能する。
具体的なユースケースの実現
GitHub Issues のカード形式による素早いトリアージや、プロジェクト構造を可視化するインタラクティブなコードベース図など、多様なタスクに対応する拡張機能が提供される。
静的な理解から動的な探索へ
Canvases はコードベースやアーキテクチャを可視化し、ホバーやフィルタリングを通じて能動的に探索できる体験を提供することで、単なる静的な理解を超えたインタラクティブ性を生み出します。
AI エージェントとの共同作業と学習
Canvases はプロンプトの改善点を分析するコーチ機能や、過去の対話から学びを蓄積することで、ユーザーがエージェントに対してより効果的な指示を出せるよう支援し、結果の一貫性を高めます。
分散した知識の統合と可視化
Slack、Teams、メール、ドキュメントなど複数のツールを横断検索することで、特定のファイルやトピックに関する文脈を持つ人物を特定し、迅速な情報収集とコミュニケーションを可能にします。
重要な引用
Instead of working through a long chain of prompts and responses, you can use canvases to interact directly with the information in front of you.
These shared, interactive surfaces are extensions of the Copilot app called canvases.
The agent can update the canvas as it works, and you can interact with that same workspace through clicks, edits, and other actions.
Canvases can turn AI from a conversational tool into a place where you can visualize information, explore different workflows, and turn boring tasks into fun experiences that you'll actually want to complete.
Canvases are a fun, shared workspace where you and the agent can think, explore, and take action together.
You can get started in the GitHub Copilot app.
影響分析・編集コメントを表示
影響分析
この発表は、AI エージェントの利用形態を「テキストベースの対話」から「視覚的・操作可能な共同作業環境」へと大きく転換させる重要な一歩です。開発者が複雑な情報を直感的に把握し、エージェントと密接に連携できることで、ソフトウェア開発プロセス全体の生産性と可視性が向上すると期待されます。特に大規模プロジェクトや複雑なバックログ管理において、人間の判断力を AI が補完する新しいワークフローの標準化を促す可能性があります。
編集コメント
テキストベースの対話に依存しがちな現在の AI エージェント利用において、視覚的・操作可能なインターフェースを導入することで、開発現場の実務的な課題解決能力が一段階向上する画期的なアプローチです。GitHub が提供するこの機能は、単なるツールの変更ではなく、人間と AI の協働のあり方そのものを再定義する可能性を秘めています。
現在、多くの開発者はエージェントと協働して作業しており、その方法についてもすでに理解している方がほとんどです。エージェントはアイデアの探索から実行へとつなげ、プロジェクトの計画やワークフローの自動化を支援します。多くの場合、会話を行うだけで業務を前進させることができます。
しかし、会話という形式にすっきり収まらないタスクはどうでしょうか？
情報を視覚化して対話できる方が簡単なケースもあります。例えば、バックログの優先順位付け、複雑な情報の可視化、あるいは複数のソースから情報を集約する必要がある場合などです。ビジュアルインターフェースを使えば、パターンの理解や関連性の発見が容易になり、アクションを起こしやすくなります。
長いプロンプトとレスポンスの連鎖をたどるのではなく、キャンバスを使って目の前の情報に直接インタラクションすることができます。
キャンバスの活用方法
これらは 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 アプリで始められます。詳細についてはドキュメントをご覧ください >
本記事「How to build interactive experiences with canvases」は、The GitHub Blog で最初に公開されました。
原文を表示
Most developers are now working alongside agents, or are at least familiar with how to do so. Agents help you explore ideas and turn them into action, from planning projects to automating workflows. Oftentimes, a conversation is all you need to move your work forward.
But what about tasks that don’t quite fit the conversation mold?
Some tasks are easier when you can see and interact with the information. You may need to triage a backlog, visualize complex information, or bring information together from multiple sources. A visual interface makes it easier to understand patterns, spot connections, and take action.
Instead of working through a long chain of prompts and responses, you can use canvases to interact directly with the information in front of you.
Working with canvases
These shared, interactive surfaces are extensions of the Copilot app called canvases. A canvas is an interface in the GitHub Copilot app where developers and agents can collaborate in real time. These shared, interactive surfaces are called canvas extensions.
The agent can update the canvas as it works, and you can interact with that same workspace through clicks, edits, and other actions. Your interactions can be sent back to the agents or processed locally by the canvas.
You can continuously shape the experience by asking Copilot to iterate on your canvas—adding new functionality, refining existing features, and more. The canvas can evolve alongside your work.
To create a canvas, use /create-canvas in your agent session in the GitHub Copilot app, then describe what you want it to create and what capabilities it should be able to support.
Because canvases are generated from a prompt and evolve alongside your workflow, they can take many forms. Some help you visualize information, some help you take action, others provide a more entertaining way to tackle your backlog.
Here’s some examples of what’s possible with canvas extensions:
Issue triage helper
Goal: Quickly triage GitHub Issues in a fast, visual way.
Prompt: /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.
Result: The canvas shows a card-based interface where each issue is surfaced one at a time. You can take action directly from the UI. As you swipe, the canvas updates in real time, tracking decisions and moving the items into the appropriate buckets.
Interactive codebase diagram
Goal: Visualize how a project is structured and how its components relate to each other.
Prompt: /create-canvas Render a colorful, interactive diagram showing how the code in this project is working together, show how things are related, etc.
Result: The canvas generates a dynamic diagram of the codebase where each node represents a different part of the system. You can hover, drag, and filter to explore the different layers. You can interact with the architecture directly, turning a static understanding of a codebase into something you can actively explore.
Sessions worktree view
Goal: Visualize all active GitHub Copilot app sessions and their associated git worktrees, clearly indicating which are active and which are stale, with the ability to easily clean things up where needed.
Prompt: /create-canvas Create a worktree view that will help me see all of my current sessions and whether or not they are active or orphaned. Allow me to clean them up with a few clicks where needed
Result: The canvas generates a visual showing my worktrees with clear indication of what is active and what is currently stale or orphaned. I can clean up stale worktrees with the click of a button.
Agent prompt coach
Goal: Improve prompt quality by reviewing past interactions and suggesting clearer, more effective ways to work with agents.
Prompt: /create-canvas Create an interactive prompt coach that suggests to you how you could have improved your previous prompts in your sessions with skills, mcp servers, etc. Make note of any spelling errors, syntax errors, etc.
Result: The canvas shows a list of previous prompts and analyzes each one, suggesting improvements such as missing context, spelling issues, and more. You can use these tips to refine your future prompts, improve clarity, and get more consistent results from the agent.
Knowledge finder
Goal: Find people who have context on a specific file or topic by searching across Slack, Teams, email, and documentation.
Prompt: /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.
Result: Based on the search, the canvas looks across multiple tools and surfaces the people that are most connected to a given file or subject. It highlights who the person is, and where the connection was found. This allows you to quickly understand someone’s connection to a topic and make it easier to reach out for more information.
Take this with you
These examples only scratch the surface of what you can do with canvases. Canvases can turn AI from a conversational tool into a place where you can visualize information, explore different workflows, and turn boring tasks into fun experiences that you’ll actually want to complete.
Canvases are a fun, shared workspace where you and the agent can think, explore, and take action together.
Want to try out canvas extensions? You can get started in the GitHub Copilot app. Read the docs for more information >
The post How to build interactive experiences with canvases appeared first on The GitHub Blog.
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み