A bridge for AI agents to programmatically inspect, edit, and collaborate on visual boards and diagrams using the WebMCP protocol.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install board-webmcp
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install board-webmcp using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Board WebMCP Skill?
The Board WebMCP skill allows developers and AI agents to interact with the native board demo at board.holon.run or local instances. By utilizing the @webmcp-bridge/local-mcp protocol, this skill provides a robust interface for manipulating nodes, edges, and layouts in real-time. It is a vital component within the Openclaw Skills ecosystem for bridging the gap between automated agents and visual collaborative workspaces.
This skill enables both headless background automation and headed sessions where agents can work alongside humans. It leverages uxc and Playwright to maintain a persistent and scriptable connection to browser-based canvas tools, ensuring that visual documentation stays synchronized with project data.
Board WebMCP Skill Use Cases
- Automatically generating system architecture diagrams from code or text specifications.
- Real-time synchronization of project management boards with external task trackers.
- Collaborative brainstorming where an AI agent organizes and layouts nodes based on human input.
- Auditing visual boards to ensure compliance with architectural standards.
- Exporting dynamic board states to structured JSON for version-controlled documentation using Openclaw Skills.
How Board WebMCP Skill Works
- The skill initializes by verifying the availability of uxc and necessary Playwright browsers.
- A persistent bridge is established between the CLI and the target board URL using the provided setup scripts.
- The agent queries the current board state by listing nodes and edges to understand the existing graph topology.
- Structured updates are applied via JSON payloads to create, modify, or delete board elements.
- If visual collaboration is required, the session mode is switched to headed to allow human oversight.
- Automated layout algorithms are triggered to organize the visual representation cleanly.
- The final board configuration is exported or persisted via the bridge.
Board WebMCP Skill Setup
To get started with this skill within the Openclaw Skills framework, ensure your environment is prepared:
# Install required Playwright browsers for the bridge
npx playwright install
# Run the link verification script to point to the public board
skills/board-webmcp/scripts/ensure-links.sh
# Or point to a local development instance
skills/board-webmcp/scripts/ensure-links.sh --url http://127.0.0.1:4173
Board WebMCP Skill Data Schema & Taxonomy
The skill manages data through a graph-based schema and session-specific metadata:
| Component | Data Type | Description |
|---|---|---|
| Nodes | Array of Objects | Represents entities with properties like label, kind, and coordinates. |
| Edges | Array of Objects | Represents relationships with source, target, and protocol attributes. |
| Session | JSON Object | Manages bridge state, including headed/headless mode and profile paths. |
| Export | JSON String | A complete snapshot of the board including nodes, edges, and layout settings. |
Board WebMCP Skill Advanced Features
- Support for headed and headless execution modes to balance performance and visibility.
- Granular node and edge upserting for surgical updates to complex diagrams.
- Automated layout application (e.g., layered mode) to maintain board readability.
- Cross-environment compatibility using Openclaw Skills to manage local vs. remote board targets.
- Profile isolation to ensure board data remains secure and separated from other browser tasks.
SKILL.md
Loading
Related Openclaw Skills
Agent Memory Kit
A structured memory framework that organizes AI agent knowledge into episodic, semantic, and procedural layers to prevent context loss.
Anatomy Quiz Master
An advanced AI-driven quiz engine designed to generate interactive anatomical assessments for medical students and educators.
Story
A local-first terminal utility designed for drafting, optimizing, and scheduling narrative content with total privacy.
Jinritoutiao Draft Uploader
A professional browser automation tool designed to bulk upload micro-headline content and images directly to the Jinritoutiao creator platform drafts.
frompdf
A robust PDF extraction API that transforms documents into structured, LLM-ready content including semantic AST, Markdown, and tables without page limits.
Twitch
A local command-line utility for tracking Twitch channel data, scores, and leaderboards without a GUI.
Featured*
