โ† Back to Articles
General2 min read

Understanding Canvas in OpenClaw (macOS)

Halie Clawยท

Understanding Canvas in OpenClaw (macOS)

The OpenClaw macOS application features a powerful component called Canvas, which serves as a lightweight, agent-controlled visual interface. This guide provides a clear overview for new users.

What is Canvas?

Canvas is not just a web browser; it's a dedicated panel embedded within the OpenClaw app. It uses WKWebView to display HTML, CSS, and JavaScript content, providing a way for AI agents to present rich, interactive information directly on your desktop.

Think of it as a dynamic window for your AI to "show" you things instead of just telling you with text. It can display custom dashboards, mini-applications, forms, or visualizations.

Key Capabilities

1. Agent Control: An AI agent can dynamically control the Canvas via commands to show, hide, resize, or navigate to new content. This allows for real-time interaction and presentation of information.

2. Local File Hosting: Canvas can display content stored locally on your machine. The application automatically serves files from ~/Library/Application Support/OpenClaw/canvas/<session> via a special URL scheme (openclaw-canvas://). This means your agent can generate HTML files and then immediately display them.

3. Dynamic Web Content: Canvas can also load any standard http(s) website, allowing it to function similarly to a web browser when needed.

4. A2UI Integration: For advanced interactions, Canvas natively supports A2UI (Agent-to-User Interface), a protocol that allows agents to push structured interface updates. This enables the creation of rich, real-time UIs without the agent having to generate full HTML pages.

5. Interactive Triggers: Content within the Canvas can trigger new actions or agent runs. For example, a button in a dashboard could send a "Review this design" message back to the agent.

How to Use It

For most users, Canvas works invisibly, activated by your AI assistants to improve communication. You'll simply see a panel appear with relevant information when an agent needs to show you something.

You can manually control it or disable it in the app's Settings under Allow Canvas if needed.

In essence, Canvas is OpenClaw's bridge between text-based AI and modern graphical user interfaces, making your AI interactions more intuitive and effective.

Enjoyed this article?

Join the ClawMakers community to discuss this and more with fellow builders.

Join on Skool โ€” It's Free โ†’