Canvas on macOS: Embedding A2UI in the App

Introduction

The OpenClaw macOS app provides a powerful visual workspace through its embedded Canvas panel. This panel, built on WKWebView, serves as a lightweight interface for HTML/CSS/JS content and, crucially, for A2UI—OpenClaw's dynamic UI generation system. This article explores how A2UI is hosted and rendered within Canvas, enabling rich, interactive agent-driven experiences directly on macOS.

Canvas Architecture

Canvas state is stored in the Application Support directory:

~/Library/Application Support/OpenClaw/canvas/<session>/...

The panel serves content via a custom URL scheme:

openclaw-canvas://<session>/<path>

For example:

• openclaw-canvas://main/ → Serves index.html from the main session's canvas directory.
• openclaw-canvas://main/widgets/todo/ → Loads a todo widget.

If no index.html exists, a built-in scaffold page is displayed.

A2UI Integration

A2UI is hosted by the OpenClaw Gateway and rendered directly within the Canvas panel. When the Gateway advertises a Canvas host, the macOS app automatically navigates to the A2UI host page on first launch.

The default A2UI host URL is:

http://<gateway-host>:18789/__openclaw__/a2ui/

This integration allows agents to generate and update UI components dynamically using A2UI server messages.

Supported A2UI Commands

Canvas currently supports A2UI v0.8 commands, including:

• beginRendering
• surfaceUpdate
• dataModelUpdate
• deleteSurface

createSurface (v0.9) is not yet supported.

Example: Pushing A2UI Content

You can push A2UI content to Canvas using the a2ui push command. Here’s a quick example:

openclaw nodes canvas a2ui push --node <id> --text