Canvas (macOS app) で軽量なビジュアルワークスペースを構築する

エージェントを開発している際、実行結果をすぐに視覚的に確認したい場面は多いはずです。しかし、そのためだけに重いフロントエンド環境を立ち上げたり、ブラウザとターミナルを何度も往復したりするのは手間がかかります。

もっとシンプルに、エージェントが直接操作できる軽量なキャンバスがあれば、開発効率はぐっと上がります。HTML や JavaScript を使って、その場ですぐに UI をレンダリングできる環境を構築してみましょう。

必要なもの

macOS 版アプリ
Gateway WebSocket へのアクセス
Settings で「Allow Canvas」が有効であること
OpenClaw CLI

クイックスタート

Canvas パネルを操作するための最小限のステップを紹介します。以下の CLI コマンドを使用して、5分で動作を確認できます。

パネルを表示する キャンバスを表示し、特定のノードにフォーカスさせます。
Terminal window
```
openclaw nodes canvas present --node \<id\>
```
ページを移動する ローカルパスや URL を指定してコンテンツを表示します。
Terminal window
```
openclaw nodes canvas navigate --node \<id\> --url "/"
```
JavaScript を実行する 表示されているページに対して JavaScript を流し込みます。
Terminal window
```
openclaw nodes canvas eval --node \<id\> --js "document.title"
```
スナップショットを撮る 現在のキャンバスの状態を画像としてキャプチャします。
Terminal window
```
openclaw nodes canvas snapshot --node \<id\>
```

A2UI の利用 (v0.8)

Canvas は A2UI v0.8 をサポートしており、Gateway 経由で UI コンポーネントをプッシュできます。

以下の手順で、A2UI を使ったレンダリングを試せます。

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_DISABLED というエラーが返ってくる Settings 画面の「Allow Canvas」がオフになっていないか確認してください。この設定が無効な場合、すべての canvas ノードコマンドは失敗します。
A2UI が表示されない Canvas は現在 A2UI v0.8 のメッセージ（beginRendering, surfaceUpdate, dataModelUpdate, deleteSurface）のみを受け付けます。v0.9 で導入された createSurface には対応していません。

不明な点がある場合は、AI Setup Assistant で質問してみてください。

次のステップ

OpenClaw Expert

まだ解決しませんか？

このページで解決しない場合は、OpenClaw Expertに直接質問してください。