Setup & Installation
openclaw skills install @slemo54/web-mcp
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
npx clawhub install web-mcp
What This Skill Does
WebMCP is a standard for exposing web application functionality to AI agents through structured, typed tools. Pages register named tools with JSON Schema definitions that agents discover and call via navigator.modelContext, instead of using DOM selectors or screen scraping. A CLI, React hooks, and an event bridge pattern handle tool registration and lifecycle in Next.js apps.
Agents get a stable, typed contract that survives UI redesigns, unlike CSS selectors or screenshot parsing.
When to use it
- Letting an AI agent search products on an e-commerce site without DOM access
- Exposing cart management actions as typed, callable tools for agents
- Building an agent-navigable dashboard with filter and export tools
- Adding structured agent access to a blog's search and comment features
- Wrapping internal web app actions so agents can trigger them reliably
Example Workflow
Here's how your AI assistant might use this skill in practice.
INPUT
User asks: Add the blue sneakers to my cart
AGENT
- 1Reads available tools from navigator.modelContext on the current page
- 2Calls searchProducts with query 'blue sneakers'
- 3Identifies the product ID from returned results
- 4Calls addToCart with the product ID
- 5Receives tool completion event confirming the item was added
OUTPUT
Blue sneakers added to cart successfully