OpenClaw Live Canvas: dùng AI agent vẽ + render trực quan workspace của bạn

Live Canvas là tính năng đặc biệt nhất của OpenClaw mà mình thấy chưa có personal AI tự host nào khác (Open WebUI, AnythingLLM, LibreChat) làm được. Hiểu đơn giản: agent của bạn có một mặt phẳng vẽ trực quan render bởi gateway, hiển thị real-time trên app/web. Agent có thể vẽ kế hoạch ngày, dashboard tiến độ, mindmap, biểu đồ task - và bạn click vào tương tác lại với nó. Đây không phải canvas của ChatGPT (chỉ là document text); đây là agent-driven UI thực sự. Bài này đi qua cách enable, ví dụ thực, use case, và limit cần biết.

Live Canvas là gì cụ thể

OpenClaw có khái niệm "skill" - mỗi skill là một module mở rộng cho agent. Canvas là một skill core có sẵn từ install, viết bằng A2UI (agent-to-UI) protocol của OpenClaw. Khi LLM quyết định render visual, nó emit một event Canvas; gateway nhận, dựng DOM/SVG node, push xuống client (web hoặc app) qua WebSocket. Client render lên screen.

Khác biệt cốt lõi so với "AI vẽ biểu đồ":

Nghĩ về nó như một cái whiteboard mà agent là người vẽ, còn bạn vừa xem vừa có thể tô thêm hoặc bấm nút.

Enable Canvas trong gateway

Canvas thường bật mặc định khi openclaw onboard, nhưng bạn nên kiểm tra ~/.openclaw/config.json:

{
  "skills": {
    "canvas": {
      "enabled": true,
      "maxFrames": 200,
      "persistSessions": true,
      "publicShare": false
    }
  }
}

Reload: openclaw stop && openclaw start. Mở web UI gateway (mặc định https://claw.example.com sau khi bạn đã reverse proxy theo bài bảo mật trước đó), bạn sẽ thấy tab "Canvas" bên cạnh "Chat".

Vẽ canvas đầu tiên: kế hoạch ngày

Mở chat, gõ:

Tạo cho tôi một Canvas kế hoạch ngày hôm nay với 4 cột:
Morning, Afternoon, Evening, Backlog.
Đọc Google Calendar tôi và phân task vào đúng cột.
Mỗi task có checkbox để tôi tick hoàn thành.

Agent sẽ:

1. Gọi skill google_calendar đọc events hôm nay.
2. Gọi skill canvas.create với layout 4 columns.
3. Lặp qua từng event, gọi canvas.addCard kèm tiêu đề, giờ, checkbox.
4. Trả URL canvas dạng https://claw.example.com/canvas/abc123.

Mở URL, bạn thấy bảng kanban-style với task của ngày. Tick checkbox - agent nhận event và lưu state. Drag task từ Morning sang Afternoon - canvas update real-time, ai mở cùng link đều thấy đồng bộ.

Canvas API mà skill gọi

Nếu bạn viết skill riêng và muốn vẽ canvas custom, đây là API cơ bản. Skill là JS/TS file trong ~/.openclaw/skills/:

// ~/.openclaw/skills/deploy-dashboard/index.ts
import { canvas } from '@openclaw/sdk';

export async function showDeployStatus(ctx) {
  const board = await canvas.create({
    title: 'Deploy Status',
    layout: 'grid',
    columns: 3,
  });

  await board.addPanel({
    title: 'Production',
    color: 'green',
    content: { type: 'metric', value: '99.8%', label: 'uptime' },
  });

  await board.addPanel({
    title: 'Staging',
    color: 'yellow',
    content: { type: 'metric', value: '15min', label: 'last deploy' },
  });

  await board.addPanel({
    title: 'CI',
    color: 'green',
    content: { type: 'chart', kind: 'sparkline', data: [4,3,5,2,4] },
  });

  // Stream updates mỗi 30s
  setInterval(async () => {
    const newData = await fetchSentryMetrics();
    await board.updatePanel('Production', { value: newData.uptime });
  }, 30_000);

  return { canvasUrl: board.shareUrl };
}

Bạn thấy: skill chỉ định Canvas vẽ gì, gateway lo phần render và sync state đến mọi client đang mở. Skill có thể giữ reference và stream update - rất hợp cho dashboard live.

5 use case mình thực sự dùng

1. Daily standup ảo cho dev solo

Mỗi sáng 8h, một cron skill chạy: đọc git commit hôm qua, đọc issue tracker, đọc Sentry error - rồi vẽ canvas "Standup hôm nay" gồm 3 panel: Did yesterday, Doing today (lấy từ task chưa done), Blocker (Sentry P0 + dependabot alerts). 30 giây review bằng mắt, không cần đọc 5 tab.

2. Mindmap brainstorm song song với LLM

"Tôi đang nghĩ về một SaaS B2B cho dev VN, vẽ mindmap brainstorm các hướng đi và pain point". Agent vẽ root node, các nhánh chính (target user, value prop, pricing, channel). Bạn click vào node nào muốn đào sâu, agent tự thêm sub-node. Nhanh hơn nhiều so với gõ qua lại trong chat text.

3. Code review visualization

"Lấy PR #42 trên GitHub repo X, vẽ canvas hiển thị file changes, line count, complexity score, risk score per file". Agent gọi GitHub API, chấm điểm complexity bằng LLM, render flame chart trên canvas. Mình thấy file nào đỏ nhìn vào trước - hữu ích cho PR lớn 30 files.

4. Trello/Jira lite

Nhiều dev VN không thích Jira (phức tạp) và Trello (không tự host). Canvas kanban của OpenClaw đủ dùng cho cá nhân + freelance: vẽ board, agent thêm task qua voice ("hey claw, thêm task fix bug login cao priority"), click task xem detail, tick done. Lưu local trên VPS bạn.

5. Bảng tài chính cá nhân

Agent đọc Google Sheet (skill google_sheets), tính tổng chi tiêu tháng, vẽ pie chart + bar chart so với tháng trước. Hỏi "tháng này tôi tiêu nhiều nhất vào gì", agent reply text kèm highlight panel trên canvas. Đẹp hơn nhiều so với mở Sheet trên mobile.

Share Canvas cho team

Canvas mặc định private cho user gateway. Muốn share read-only cho người khác (vợ, partner, client), bật share link:

"canvas": {
  "publicShare": true,
  "shareTokenExpireDays": 7,
  "shareRequireAuth": false
}

Trong chat: "Share canvas này read-only 24h". Agent gọi canvas.createShareLink({ readOnly: true, expireHours: 24 }) và trả URL có token. Bất kỳ ai có link đều xem được trong 24h (sau đó token expire). URL có shape:

https://claw.example.com/canvas/abc123?share=tok_XYZ&exp=1717000000

Performance: canvas nặng vẽ gì cũng được không

Canvas render trên gateway và push diff qua WebSocket. Performance phụ thuộc:

• Số panel: <50 panel mượt, >200 panel bắt đầu lag UI. Đừng vẽ excel 10.000 row trên canvas - dùng table component có pagination.
• Stream update frequency: <1 update/s mượt, 10 update/s OK với chart, >30 update/s bắt đầu drop frame (WebSocket queue đầy).
• Concurrent canvas: Mỗi user mở canvas chiếm ~30MB RAM gateway. 10 canvas mở cùng lúc ~300MB, không vấn đề trên VPS 50 (4GB) hay 80 (6GB).
• Image embedded: Canvas chấp nhận data:image base64 nhưng đừng nhúng >5MB ảnh - chậm khi sync. Tốt nhất upload qua skill storage rồi nhúng URL.

Limit và bug cần biết

Một số rough edges mình gặp:

1. Mobile rendering chưa đẹp với layout grid >4 columns: canvas auto-scroll horizontal trên iPhone, không dễ nhìn. Khi vẽ kế hoạch ngày, mình dùng 2 columns trên mobile, 4 columns trên desktop. Skill có thể check viewport: canvas.create({ responsive: true }).
2. Canvas state lost khi gateway restart: Nếu persistSessions: false, restart gateway = canvas mất. Bật persist nếu cần.
3. WebSocket disconnect ngầm: Đôi khi canvas client mất connection và không reconnect tự động. Reload page là fix.
4. Concurrent edit conflict: Nếu 2 user cùng drag task, ai save sau thắng. Không có CRDT như Figma. Vấn đề nhỏ cho personal use, nhưng đừng dùng làm Trello team 10 người.
5. Skill timeout: Skill vẽ canvas có thể bị kill nếu chạy >30s mặc định. Update "skillTimeoutMs": 60000 nếu skill stream dữ liệu lâu.

Khi nào nên dùng Canvas, khi nào không

Canvas tốt cho: visualize state, dashboard cá nhân, kanban, mindmap, kết quả phân tích trực quan, share quick.

Canvas không tốt cho: edit code (dùng VS Code), write document dài (dùng Obsidian/Notion), real-time collaboration nhiều người (dùng Figma), hiển thị data >1000 row (dùng metabase).

Một số dev mới làm quen OpenClaw có xu hướng "đẩy mọi thứ lên canvas" - không cần thiết. Chat text vẫn là interface tốt nhất cho 80% tương tác. Canvas dành cho khi visual giúp hiểu nhanh hơn text.

Resource cần cho gateway có Canvas active

Benchmark trên VPS TND VPS 80 (6vCPU/6GB):

VPS 50 (4GB) đủ cho dùng chính. VPS 80 (6GB) dư dả nếu kết hợp Canvas + Voice + 2-3 skill nặng. Đọc thêm cơ bản về self-host OpenClaw nếu chưa rõ stack. Nếu phân vân cấu hình VPS, xem guide chọn VPS cho vibe coder.

So sánh nhanh với artifact của ChatGPT/Claude

Nhiều người hỏi: "Canvas của OpenAI/Claude artifact khác gì OpenClaw Canvas?". Khác biệt cốt lõi:

Điểm thắng lớn nhất của OpenClaw Canvas không phải UI đẹp hơn (ChatGPT đẹp hơn thật), mà là tự chủ update. Cron skill mỗi sáng push canvas standup. Webhook GitHub fire khi có PR mới push update vào panel "Review queue". Background skill chạy mỗi 10 phút check Sentry, đèn xanh chuyển đỏ tự động. ChatGPT Canvas không làm được - nó là canvas của chat, OpenClaw Canvas là canvas của agent.

Workflow đề xuất cho người mới

Nếu bạn vừa enable Canvas và không biết bắt đầu từ đâu, đây là roadmap 7 ngày mình hay khuyên:

1. Day 1: tạo 1 canvas "Today's plan" manual qua chat, tick checkbox suốt ngày. Quen với UI.
2. Day 2: cài skill google_calendar, để agent tự fill task vào canvas mỗi sáng.
3. Day 3: tạo canvas "Read later" - cuối ngày dùng voice "hey claw, lưu trang này vào Read later canvas". Skill web_clip lấy title + excerpt.
4. Day 4: dashboard "Project X" cho project chính - panel commit count, panel issue open, panel deploy status.
5. Day 5: mindmap brainstorm cho một idea kinh doanh. Click sub-node để zoom in.
6. Day 6: share canvas đầu tiên cho vợ/partner read-only (kế hoạch cuối tuần?).
7. Day 7: review tuần. Quyết định canvas nào keep, canvas nào archive. Setup auto-archive cho canvas >30 ngày không touch.

Tóm lại

Live Canvas là cái biến OpenClaw từ "lại một wrapper ChatGPT" thành "personal AI workspace thực sự". Khi agent của bạn không chỉ nói mà còn vẽ, tổ chức, visualize giúp - bạn dừng hỏi nó và bắt đầu làm việc cùng nó. Setup không khó (Canvas bật mặc định), khó là quen với việc nghĩ "việc này canvas hóa được không" thay vì gõ list xuống Notes. Mình mất khoảng 2 tuần để quen, giờ thì khó tưởng tượng đi lại workflow cũ. Tip cuối: đừng cố vẽ mọi thứ - canvas tốt là canvas bạn nhìn vào và hiểu trạng thái trong 5 giây, nhiều hơn thì đã quá tải thông tin.