Canvas
Agent-controlled Canvas panel embedded via WKWebView + custom URL scheme
macOS アプリは ''WKWebView'' を使用してエージェント制御の''Canvas パネル''を埋め込みます。これは
HTML/CSS/JS、A2UI、小さな対話型
UI サーフェスのための軽量なビジュアルワークスペースです。
Canvas の場所
Canvas の状態は Application Support の下に保存されます：
- ''~/Library/Application Support/OpenClaw/canvas/<session>/...''
Canvas パネルはカスタム URL スキームを介してこれらのファイルを提供します：
- ''openclaw-canvas://<session>/<path>''
Examples:
- ''openclaw-canvas://main/'' → ''<canvasRoot>/main/index.html''
- ''openclaw-canvas://main/assets/app.css'' → ''<canvasRoot>/main/assets/app.css''
- ''openclaw-canvas://main/widgets/todo/'' → ''<canvasRoot>/main/widgets/todo/index.html''
ルートに ''index.html'' が存在しない場合、アプリは''組み込みスキャフォールドページ''を表示します。
パネルの動作
- ボーダーレス、サイズ変更可能なパネルは、メニューバー（またはマウスカーソル）の近くにアンカーされます。
- セッションごとにサイズ/位置を記憶します。
- ローカル canvas ファイルが変更されると自動的に再読み込みされます。
- 一度に表示できる Canvas パネルは 1 つだけです（必要に応じてセッションが切り替わります）。
設定 → Canvas を許可から Canvas を無効にできます。無効にすると、canvas
ノードコマンドは ''CANVAS_DISABLED'' を返します。
エージェント API サーフェス
Canvas はGateway WebSocketを介して公開されるため、エージェントは次のことができます：
- パネルを表示/非表示にする
- パスまたは URL に移動する
- JavaScript を評価する
- スナップショット画像をキャプチャする
CLI の例：
openclaw nodes canvas present --node '<id>' openclaw nodes canvas navigate --node '<id>' --url "/" openclaw nodes canvas eval --node '<id>' --js "document.title" openclaw nodes canvas snapshot --node '<id>'
Notes:
- ''canvas.navigate'' は''ローカル canvas パス''、''http(s)'' URL、''file://'' URL を受け入れます。
- ''"/"'' を渡すと、Canvas はローカルスキャフォールドまたは ''index.html'' を表示します。
Canvas 内の A2UI
A2UI は Gateway canvas ホストによってホストされ、Canvas パネル内でレンダリングされます。
Gateway が Canvas ホストをアドバタイズすると、macOS アプリは自動的に
最初の開き時に A2UI ホストページに移動します。
デフォルトの A2UI ホスト URL：
http://'<gateway-host>':18793/__openclaw__/a2ui/
#
A2UI コマンド（v0.8）
Canvas は現在A2UI v0.8 サーバー→クライアントメッセージを受け入れます：
- ''beginRendering''
- ''surfaceUpdate''
- ''dataModelUpdate''
- ''deleteSurface''
''createSurface'' (v0.9) はサポートされていません。
CLI の例：
cat > /tmp/a2ui-v0.8.jsonl '<<''EOFA2''
{"surfaceUpdate":{"surfaceId":"main","components":[{"id":"root","component":{"Column":{"children":{"explicitList":["title","content"]}}}},{"id":"title","component":{"Text":{"text":{"literalString":"Canvas (A2UI v0.8)"},"usageHint":"h1"}}},{"id":"content","component":{"Text":{"text":{"literalString":"If you can read this, A2UI push works."},"usageHint":"body"}}}]}}
{"beginRendering":{"surfaceId":"main","root":"root"}}
EOFA2
openclaw nodes canvas a2ui push --jsonl /tmp/a2ui-v0.8.jsonl --node <id>'クイックスモークテスト：
openclaw nodes canvas a2ui push --node '<id>' --text "Hello from A2UI"
Canvas からエージェント実行をトリガーする
Canvas はディープリンクを介して新しいエージェント実行をトリガーできます：
- ''openclaw://agent?...''
Example (in JS):
window.location.href = "openclaw://agent?message=Review%20this%20design";
有効なキーが提供されない限り、アプリは確認を求めます。
セキュリティに関する注意事項
- Canvas スキームはディレクトリトラバーサルをブロックします。ファイルはセッションルートの下にある必要があります。
- ローカル Canvas コンテンツはカスタムスキームを使用します（ループバックサーバーは不要）。
- 外部 ''http(s)'' URL は明示的に移動した場合のみ許可されます。