OPUBLIKOWANO: 11 lutego 2026
Canvas w OpenClaw to sposób, żeby AI nie kończyła się na tekście. Zamiast kolejnej wiadomości na czacie możesz mieć żywy interfejs: dashboard na iPadzie przy kasie, ekran KPI w biurze, kiosk na Raspberry Pi w magazynie czy drugi monitor w sali spotkań. Asystent aktualizuje dane w tle, a ludzie widzą wynik bez przeklikiwania się przez pięć narzędzi.
Najlepsze w Canvasie jest to, że nie musisz budować „aplikacji” w klasycznym sensie. Wystarczy prosta strona w katalogu canvas/, a potem kilka akcji: prezentacja na urządzeniu, wykonywanie JavaScriptu w kontekście UI i zrzuty podglądu (snapshoty) do kontroli. To daje świetny zwrot w firmach, gdzie wszyscy regularnie pytają: „jaki jest dziś wynik?” albo „co jest na czerwono?”, a odpowiedź zwykle wymaga ręcznego grzebania w danych.
W tym artykule pokażę Ci, czym jest Canvas, jak działa razem z Nodes oraz jak zrobić pierwszy dashboard, który odświeża się bez przeładowania. Na końcu dorzucam praktyczne scenariusze i zasady bezpieczeństwa – bo interfejs sterowany przez AI ma sens tylko wtedy, gdy jest przewidywalny.
- Czym jest Canvas w OpenClaw
- Najważniejsze akcje: present, eval, snapshot
- Pierwszy Canvas: minimalny dashboard w 10 minut
- Canvas + Nodes: ekran na iPadzie, monitorze i Raspberry Pi
- Scenariusze biznesowe o najlepszym ROI
- Zasady bezpieczeństwa: jak nie zrobić z dashboardu chaosu
Czym jest Canvas w OpenClaw
Canvas to wbudowana funkcja OpenClaw do renderowania interfejsu. W praktyce oznacza to, że agent może serwować stronę (HTML/CSS/JS) i aktualizować ją dynamicznie w odpowiedzi na dane, które zbiera: z plików, integracji, API albo automatyzacji.
Canvas żyje w katalogu canvas/ w workspace. To ważne, bo ten model jest prosty i „wersjonowalny”: UI to zwykły kod, który możesz trzymać w repo, poprawiać i testować.
Najważniejsze akcje: present, eval, snapshot
W Canvasie liczą się trzy rzeczy:
- present – pokazanie UI na urządzeniu.
- eval – aktualizacja UI przez wykonanie JavaScriptu w kontekście strony (np. zmiana tekstów, liczb, kolorów czy wykresów).
- snapshot – podgląd (zrzut) tego, co faktycznie widzi użytkownik. Świetne do debugowania i kontroli jakości.
| Akcja | Do czego służy | Typowy przykład |
| present | Pokazuje UI na urządzeniu/node | Dashboard KPI na ekranie w biurze |
| eval | Aktualizuje UI bez przeładowania | Zmień „Sprzedaż dziś” i kolor wskaźnika |
| snapshot | Zrzut stanu UI do kontroli | Sprawdź, czy kiosk nie „utknął” |
Pierwszy Canvas: minimalny dashboard w 10 minut
Najprostszy sposób, żeby poczuć Canvas, to zbudować mały dashboard z dwoma elementami: zegarem i miejscem na komunikat/dane. Zegar odświeża się lokalnie (w JS), a komunikat aktualizujesz przez eval.
Wystarczy plik canvas/index.html. Przykład minimalnej struktury:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dashboard</title>
<style>
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#0f172a; color:#f1f5f9; min-height:100vh; display:grid; place-items:center; }
.card { background:#1e293b; border-radius:16px; padding:24px 28px; width:min(720px, 92vw); }
#clock { font-size:56px; font-variant-numeric: tabular-nums; }
#msg { margin-top:8px; opacity:.85; }
#data { margin-top:18px; display:grid; gap:6px; }
</style>
</head>
<body>
<div class="card">
<div id="clock">--:--:--</div>
<div id="msg">Ładowanie…</div>
<div id="data"></div>
</div>
<script>
function tick(){ document.getElementById('clock').textContent = new Date().toLocaleTimeString('pl-PL'); }
setInterval(tick, 1000); tick();
function setMessage(text){ document.getElementById('msg').textContent = text; }
function setData(obj){
const el = document.getElementById('data');
el.innerHTML = Object.entries(obj)
.map(([k,v]) => `<div><strong>${k}:</strong> ${v}</div>`)
.join('');
}
</script>
</body>
</html>Gdy UI jest już serwowane, możesz aktualizować je w locie:
setMessage('Sprzedaż dziś: 1 234 zł');
setData({ Klienci: 47, Bestseller: 'Latte', Marża: '31%' });To podejście jest proste, ale w praktyce wystarcza do wielu dashboardów w MŚP, bo ludzie chcą widzieć 3–8 liczb, a nie „piękny produkt”.
Canvas + Nodes: ekran na iPadzie, monitorze i Raspberry Pi
Canvas robi się naprawdę ciekawy, gdy pokazujesz go na zewnętrznym urządzeniu. W OpenClaw służą do tego Nodes: sparowane urządzenia, na których możesz renderować UI.
Typowe scenariusze:
- iPad w punkcie sprzedaży (kasa, recepcja),
- monitor w biurze (KPI, status projektów),
- Raspberry Pi w trybie kiosk (magazyn, produkcja),
- drugi ekran w sali spotkań (agenda, liczby, listy kontrolne).
Z perspektywy procesu to genialne, bo asystent nie musi „odpowiadać wiadomością” – może po prostu utrzymywać ekran w aktualnym stanie.
Scenariusze biznesowe o najlepszym ROI
Canvas wygrywa tam, gdzie informacja ma być dostępna bez pytania. Jeśli zespół codziennie pyta o to samo, dashboard zwykle spłaca się w tydzień.
Trzy scenariusze, które najczęściej działają:
- KPI i sprzedaż: dzisiejsza sprzedaż, liczba transakcji, bestsellery, stany krytyczne.
- Operacje: backlog, SLA, liczba ticketów, „czerwone” procesy, alerty.
- Projekty: status sprintu, ryzyka, terminy, priorytety.
Klucz jest w tym, żeby dashboard miał jasny cel i był czytelny z 3 metrów. Jeśli trzeba się wpatrywać w małe tabelki, to znak, że dashboard jest źle zaprojektowany.
Zasady bezpieczeństwa: jak nie zrobić z dashboardu chaosu
Interfejs sterowany przez AI musi być stabilny. Dwa typowe błędy to ciągłe zmiany układu oraz przepalanie budżetu na aktualizacje.
Najprostsze zasady bezpieczeństwa:
- Stały układ: raz zaprojektowany layout nie powinien zmieniać się co godzinę.
- Jasne progi: aktualizuj tylko wtedy, gdy zmieniła się liczba albo przekroczono próg.
- Ogranicz częstotliwość: co 5 minut zwykle wystarczy; co 10 sekund to przepis na spam.
- Human-in-the-loop: jeśli dashboard ma wpływać na decyzje (np. zamówienia), dodaj wyraźny status „propozycja” vs „potwierdzone”.
Jeśli trzymasz się tych zasad, Canvas staje się „ekranem prawdy” dla firmy – nie kolejną zabawką.