WebMCP is a standardized interface that allows AI agents to interact with web applications through structured tools instead of brittle DOM scraping.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install web-mcp
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 web-mcp 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 provides a clean, self-documenting interface between AI agents and modern web applications. By implementing this standard, developers can expose a structured contract to agents, allowing them to invoke functions, search data, and manipulate state within a React or Next.js environment. It represents a significant shift in how Openclaw Skills are implemented, moving from unreliable screen-scraping to a robust event-driven architecture where every tool has a clear JSON Schema for inputs and outputs.
At its core, WebMCP leverages the Event Bridge pattern to communicate between the browser's model context and the React component tree. This ensures that AI agents have a reliable way to interact with the frontend, enabling complex workflows like automated product searches, cart management, and dashboard data filtering with high precision.
WebMCP Use Cases
- Building AI-agent accessible e-commerce platforms for automated shopping experiences.
- Creating interactive administrative dashboards where AI can perform data filtering and exports.
- Enhancing SaaS applications with tool-based interfaces for seamless AI assistant integration.
- Standardizing how LLMs interact with complex web states in Openclaw Skills workflows.
How WebMCP Works
- Initialize the environment using the WebMCP CLI to generate the core implementation, hooks, and provider components.
- Define structured tools using JSON Schema to specify required input parameters and expected output types.
- Register tools within specific React components using useEffect, ensuring tools are only active when the component is mounted.
- Utilize the Event Bridge pattern where the AI agent triggers an execution function that dispatches a CustomEvent to the web app.
- The application handles the event, performs the necessary logic, and signals completion back to the agent via a dedicated completion event.
WebMCP Setup
To integrate WebMCP into your project and start building with Openclaw Skills, run the following initialization command:
npx webmcp init
For global access to the CLI, you can install the package via npm:
npm install -g @webmcp/cli
webmcp init
This will create lib/webmcp.ts, hooks/useWebMCP.ts, and the WebMCPProvider.tsx component for your React application.
WebMCP Data Schema & Taxonomy
WebMCP uses a strictly typed schema to define the contract between the agent and the web app. This data is typically organized as follows:
| Property | Type | Description |
|---|---|---|
name |
string | The unique identifier for the tool (e.g., searchProducts). |
description |
string | A clear explanation used by the agent to understand when to call the tool. |
inputSchema |
object | A JSON Schema defining parameters like types, enums, and requirements. |
outputSchema |
object | A JSON Schema defining the format of the returned data. |
annotations |
object | Metadata such as readOnlyHint to inform the agent of the action's nature. |
WebMCP Advanced Features
- Contextual Tool Loading: Dynamically register and unregister tools based on the user's current route or active UI components.
- Event Bridge Pattern: Decouple agent actions from UI logic using CustomEvents for a non-blocking, asynchronous workflow.
- TypeScript Integration: Automatically generate types for tool definitions to ensure end-to-end type safety.
- Read-Only Hints: Guide agent behavior by tagging tools as safe for data retrieval or marking them as state-mutating actions.
- Multi-Skill Integration: Compatible with Openclaw Skills like ai-labs-builder and mcp-workflow for comprehensive automation pipelines.
SKILL.md
Loading
Related Openclaw Skills
MCP Workflow
A robust automation framework for orchestrating multi-step AI agent workflows using the Model Context Protocol.
AI Labs Builder
A unified system for building production-ready websites, AI applications, and automated workflows using modern web technologies and MCP integration.
Looplink Skill
The Looplink skill enables AI agents to seamlessly interact with the looplink.app platform for social content organization and bookmarking.
Monolith — Crypto Wallet
A hardware-secured crypto wallet for AI agents utilizing Apple Secure Enclave and smart contract account abstraction for safe on-chain transactions.
Prospector
An automated lead generation skill that identifies companies via Exa and enriches contact data using Apollo for precise ICP matching.
Xianyu Auto-Fulfillment Bot
A specialized automation skill for Goofish sellers to monitor chats and fulfill digital orders instantly using browser-based AI agents.
Featured*
