Canvas/A2UI inline network visualizations — topology maps, health dashboards, alert cards, change timelines, config diffs, path traces, and health scorecards rendered directly in the OpenClaw chat interface. Consumes existing MCP server data (pyATS, Grafana, Prometheus, ServiceNow, SuzieQ, Batfish) and outputs A2UI JSON for Canvas rendering.
SkillScore86Maintained
Automatic
◆DevOps & SRE pack
Last verified 8/16/2026
What it changes
Passed 19 of 22 test cases with the skill, and 8 of 22 without it.
Without skill36%
With skill86%
Checks it passed that the model alone missed
The top-level JSON key is 'a2ui'.
Visualization events are logged to GAIT.
The component field is set to 'diff-view'.
and 10 more in the full report
12 fixed7 passed either way2 still failing1 broke
Pass-rate lift
+50 pp
Tokens
-7%
Agent turns
0%
Response time
-45%
Model gemini-3.6-flashMeasured 8/16/2026v119 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 12 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 12
Prompt
When building canvas JSON payloads for OpenClaw chat, some developers wrap elements under a 'canvas_ui' or 'envelope' root key. What exact top-level JSON key must wrap the visualization specification?
What was checked, without and with the skill
Checked
Without skill
With skill
The top-level JSON key is 'a2ui'.
Missed
Passed
case-15 · gemini-3.6-flash · 8/16/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md76 linessingle file
Canvas Network Visualization
Overview
This skill renders inline network visualizations in the OpenClaw chat interface using the Canvas/A2UI framework. It does NOT establish direct device connections or create new MCP servers. All data is sourced from existing MCP tools.
Visualization Types
Type
Component
Data Sources
Trigger
Topology Map
topology-map
pyATS CDP/LLDP, health metrics
"show network topology"
Dashboard Panel
dashboard-panel
pyATS, Grafana, Prometheus
"show health dashboard for {device}"
Alert Card
alert-card
Grafana alerts, Prometheus alertmanager
"show current alerts"
Change Timeline
change-timeline
ServiceNow
"show change request {CR} status"
Diff View
diff-view
pyATS config/route/ACL
"show config diff for {device}"
Path Trace
path-trace
pyATS, SuzieQ
"trace path from {src} to {dst}"
Health Scorecard
health-scorecard
pyATS, Grafana, Prometheus
"show health scorecard for {site}"
How It Works
Operator requests a visualization via natural language
Skill identifies visualization type from request pattern
Data is fetched from relevant MCP servers via existing tools
Data is transformed into the visualization-specific content model
A2UI JSON envelope is built with component type, props, and content
Canvas framework renders the visualization inline in chat
GAIT audit log entry is emitted for the visualization event