Canvas とは
- Agent の出力の可視化：長いテキスト出力の代わりに、パネルごとに整理されたレイアウトで表示します。
- 標準の
.canvas.tsxファイル：Agent がこのファイルを生成・編集し、変更は Canvas プレビューにリアルタイムで反映されます。 - プロンプトで編集：ソースコードを手で書く必要はありません。会話で調整したい内容を伝えれば、Agent がソースを更新して再描画します。
適用シーン
- データダッシュボード：ログやメトリクスを分析したあと、Canvas 上に統計値と傾向チャート付きのダッシュボードを生成し、一目で把握できます。
- 構造化レポート：性能プロファイリングや依存関係分析などの複雑な分析結果を、長いテキストの代わりにパネル単位で提示します。
- アーキテクチャとフローの可視化：システムロジックの整理やドキュメント作成時に、状態遷移・モジュール依存・抽象アーキテクチャを構造図として描画し、チームの認識合わせを支援します。
使い方
会話で/canvas コマンドを使うと Canvas がトリガーされます:
- 初回生成：Canvas に何を表示したいかを伝えると、Agent が
.canvas.tsxファイルを作成し、Canvas プレビューでレンダリングします。 - 反復調整：同じ会話内で Agent に指示を続けるか、Canvas 上に直接アノテーションを付けると、Agent がソースを更新して再描画します。
アノテーション
アノテーションを使うと、Canvas 上で修正したい箇所を直接指し示せます。「3 番目のチャートの凡例」を言葉で説明するより、キャンバス上で直接指し示すほうが早く、あいまいさも減ります。 使い方:- アノテーションモードに入る：Canvas 上のアノテーション入口をクリック。
- 対象を選択または囲む：特定の要素をクリックするか、注目したい領域をフリーハンドで丸く囲みます。
- コメントを追加：アノテーションに修正案やフィードバックを入力します。
- Agent に送信：アノテーションは会話のコンテキストとして添付され、Agent はそれを読み取って Canvas のソースを更新し、再描画します。
共有
Canvas はワンクリック公開に対応しており、キャンバスをチームメンバーに共有できます。公開された Canvas は 所属する組織内でのみ閲覧可能 で、外部には公開されないため、組織のデータを安全に保てます。共有機能は Teams / Enterprise プランのアカウントでのみ利用できます。個人プランのユーザーが公開しようとすると、“Sharing is available on Teams and Enterprise plans. Join or create a team to share.” というメッセージが表示されます。
Canvas を公開する
Canvas のツールバーで Publish をクリックすると、現在のキャンバスを組織内に公開します。- 公開ポップオーバーには “All team members can view” と表示されます。確認すると公開が完了します。
- 公開後、ボタンは Published に変わります。チームメンバーは共有リンクから組織内で該当キャンバスを閲覧できます。
公開後の操作
Published ボタンをクリックすると、次のメニューが開きます:
メニュー上部には前回の同期時刻（例：
Last synced 5 minutes ago）も表示されます。
My Shares
エンタープライズ管理コンソール左側ナビゲーションの My Shares に、Qoder から共有したすべてのコンテンツ（現時点では Canvas）がまとまっています。- 入口：エンタープライズ管理コンソール → My Shares（共有中のコンテンツがない場合は表示されません）
- 列項目：Canvas 名、公開 / 最終同期日時
- 行アクション：
- Canvas 名をクリック — 公開版キャンバスをプレビュー
- 右側の
...メニュー：Copy link、Delete（自分が公開したキャンバスの削除）