WebMCP enables AI agents to interact with websites through structured JavaScript tools instead of fragile DOM scraping.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install 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 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 WebMCP?
WebMCP is a specialized browser API designed to bridge the gap between AI agents and web applications by exposing JavaScript functions as structured tools. By utilizing Openclaw Skills with WebMCP support, pages can register capabilities via window.navigator.modelContext, providing agents with a formal interface complete with names, descriptions, and JSON Schema definitions. This move from DOM-based scraping to API-driven interaction significantly improves the reliability and efficiency of web-based agentic workflows.
This technology functions essentially as an MCP server operating directly within the web page. It allows for a more robust integration where the website explicitly tells the agent what it can do and how to do it. For developers building with Openclaw Skills, this provides a standardized way to build websites that are natively compatible with AI-driven automation and tool use.
WebMCP Use Cases
- Automating complex web workflows without relying on fragile CSS selectors or DOM structures.
- Discovering native application capabilities on support-enabled websites for more accurate task execution.
- Executing high-precision data entry or state updates via direct function calls instead of simulated clicks.
- Implementing secure, user-confirmed transactions within a browser context using native interaction hooks.
- Enhancing the overall reliability of agentic browsing sessions within the Openclaw Skills ecosystem.
How WebMCP Works
- The agent navigates to a target website to begin the browsing session.
- The system checks for the existence of modelContext in window.navigator to confirm if the page supports WebMCP.
- The agent discovers registered tools, inspecting their names, descriptions, and input schemas.
- Based on the user's intent, the agent selects the most relevant tool from the discovered list.
- The tool is invoked with parameters that strictly match the required JSON Schema.
- The execution callback runs on the page's main thread, potentially updating the UI or application state.
- The agent receives a structured JSON response and communicates the results back to the user.
WebMCP Setup
To leverage WebMCP within your automation environment, ensure your agent is compatible with Openclaw Skills. On the web development side, you can expose tools to the agent using the following implementation:
window.navigator.modelContext.provideContext({
tools: [
{
name: "action-name",
description: "Explains what this tool does to the agent",
inputSchema: { type: "object", properties: { /* Schema */ } },
execute: (params, agent) => {
/* Logic here */
return { content: [{ type: "text", text: "Success" }] };
}
}
]
});
Ensure that the browser context is active, as these tools are scoped to the live tab and are not accessible in a headless or disconnected state.
WebMCP Data Schema & Taxonomy
WebMCP organizes tool interaction and discovery using a structured format that aligns with standard MCP protocols. The following table describes the primary data components utilized by Openclaw Skills during tool invocation:
| Property | Type | Description |
|---|---|---|
| name | String | The unique identifier for the tool registered on the page. |
| description | String | A descriptive string used by the agent to understand the tool's purpose. |
| inputSchema | Object | A JSON Schema defining the required and optional parameters for invocation. |
| execute | Function | The JavaScript callback that handles the tool logic on the website. |
| content | Array | The structured return object containing the result of the tool execution. |
WebMCP Advanced Features
- Dynamic Context Management: Tools can be added or removed in real-time using registerTool and unregisterTool to reflect SPA state changes.
- Human-in-the-Loop Integration: Supports agent.requestUserInteraction to prompt for manual confirmation during sensitive operations like purchases.
- Sequential Execution Model: Ensures tool calls are processed one at a time on the main thread to maintain application state integrity.
- Native JSON Schema Validation: Guarantees that the data sent by the Openclaw Skills agent matches the website's expectations.
- Automatic Discovery Fallback: Agents can gracefully revert to DOM-based interaction if the target site does not expose WebMCP tools.
SKILL.md
Loading
Related Openclaw Skills
Startup Info — Portable Prompt
An AI-powered research agent that generates deep-dive investor briefings and competitive analysis for startups and private companies.
Hide OpenClaw Banner
A utility configuration to disable the automated banner message shown during OpenClaw CLI startup.
Stegstr
A steganographic tool for embedding and decoding hidden Nostr messages and arbitrary data within PNG images.
AICE (AI Confidence Engine)
AICE is a bidirectional performance and trust tracking engine that quantifies the confidence relationship between AI agents and human users through multi-domain scoring.
Plan-Flow
A comprehensive AI development framework that automates the software lifecycle from discovery to execution with built-in project memory.
CoinMarketCap Cryptocurrency API Skill
A technical reference skill for integrating CoinMarketCap cryptocurrency data, including real-time quotes, market listings, and historical OHLCV data.
Featured*
