Tencent SkillHub · Developer Tools

WebMCP

WebMCP - Enable AI agents to interact with your web applications through structured tools. Implements the WebMCP standard for Next.js/React apps with tool re...

skill openclawclawhub Free

0 Downloads

0 Stars

0 Installs

0 Score

High Signal

WebMCP - Enable AI agents to interact with your web applications through structured tools. Implements the WebMCP standard for Next.js/React apps with tool re...

⬇ 0 downloads ★ 0 stars Unverified but indexed

Install for OpenClaw

Quick setup

Download the package from Yavira.
Extract the archive and review SKILL.md first.
Import or place the package into your OpenClaw setup.

Requirements

Target platform: OpenClaw
Install method: Manual import
Extraction: Extract archive
Prerequisites: OpenClaw
Primary doc: SKILL.md

Package facts

Download mode: Yavira redirect
Package format: ZIP package
Source platform: Tencent SkillHub
What's included: SKILL.md, assets/webmcp-bridge.js, references/webmcp-spec.md, scripts/add-tool.sh, scripts/generate-types.sh, scripts/init-webmcp.sh

Validation

Use the Yavira download entry.
Review SKILL.md after the package is downloaded.
Confirm the extracted package contains the expected setup assets.

Install with your agent

Agent handoff

Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.

Download the package from Yavira.
Extract it into a folder your agent can access.
Paste one of the prompts below and point your agent at the extracted folder.

New install

I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.

Upgrade existing

I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.

Open Send to Agent page Open JSON manifest Open Markdown brief

Trust & source

Release facts

Source: Tencent SkillHub
Verification: Indexed source record
Version: 1.0.0

Provenance

Publisher: slemo54
Source page: View original listing
Canonical URL: Open canonical page

Documentation

ClawHub primary doc Primary doc: SKILL.md 26 sections Open source page

WebMCP

Enable AI agents to interact with your web applications through structured tools. WebMCP provides a clean, self-documenting interface between AI agents and your web app.

What is WebMCP?

WebMCP is a web standard that gives AI agents an explicit, structured contract for interacting with websites. Instead of screen-scraping or brittle DOM selectors, a WebMCP-enabled page exposes tools — each with: A name A JSON Schema describing inputs and outputs An executable function Optional annotations (read-only hints, etc.)

Quick Start

# Initialize WebMCP in your Next.js project webmcp init # Add a new tool webmcp add-tool searchProducts # Generate TypeScript types webmcp generate-types

1. Tool Definition

const searchTool = { name: "searchProducts", description: "Search for products by query", inputSchema: { type: "object", properties: { query: { type: "string", description: "Search query" } }, required: ["query"] }, outputSchema: { type: "string" }, execute: async (params) => { // Implementation }, annotations: { readOnlyHint: "true" } };

2. Contextual Tool Loading

Tools are registered when components mount and unregistered when they unmount: useEffect(() => { registerSearchTools(); // Tools appear to agent return () => { unregisterSearchTools(); // Tools disappear }; }, []);

3. Event Bridge Pattern

Tools communicate with React through CustomEvents: Agent → execute() → dispatch CustomEvent → React updates → signal completion → Agent receives result

Architecture

┌─────────────────────────────────────────┐ │ Browser (navigator.modelContext) │ │ │ │ ┌───────────┐ registers/ ┌────┐ │ │ │ AI Agent │◄──unregisters────│web │ │ │ │ (Claude) │ tools │mcp│ │ │ │ │ │.ts│ │ │ │ calls─────┼─────────────────►│ │ │ │ └───────────┘ └──┬─┘ │ │ │ │ │ CustomEvent│ │ │ dispatch │ │ │ ▼ │ │ ┌──────────────────────────────────┐ │ │ │ React Component Tree │ │ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ │ │/products │ │ /cart │ │ │ │ │ │useEffect:│ │useEffect:│ │ │ │ │ │ register │ │ register │ │ │ │ │ │ search │ │ cart │ │ │ │ │ │ tools │ │ tools │ │ │ │ │ └──────────┘ └──────────┘ │ │ │ └──────────────────────────────────┘ │ └─────────────────────────────────────────┘

Installation

# In your Next.js project npx webmcp init # Or install globally npm install -g @webmcp/cli webmcp init

1. Initialize WebMCP

webmcp init This creates: lib/webmcp.ts - Core implementation hooks/useWebMCP.ts - React hook components/WebMCPProvider.tsx - Provider component

2. Define Tools

// lib/webmcp.ts export const searchProductsTool = { name: "searchProducts", description: "Search for products", execute: async (params) => { return dispatchAndWait("searchProducts", params, "Search completed"); }, inputSchema: { type: "object", properties: { query: { type: "string" } }, required: ["query"] }, annotations: { readOnlyHint: "true" } };

3. Register in Components

// app/products/page.tsx "use client"; import { useEffect, useState } from "react"; import { registerProductTools, unregisterProductTools } from "@/lib/webmcp"; export default function ProductsPage() { const [results, setResults] = useState([]); const [completedRequestId, setCompletedRequestId] = useState(null); // Signal completion after render useEffect(() => { if (completedRequestId) { window.dispatchEvent( new CustomEvent(`tool-completion-${completedRequestId}`) ); setCompletedRequestId(null); } }, [completedRequestId]); // Register tools + listen for events useEffect(() => { const handleSearch = (event: CustomEvent) => { const { requestId, query } = event.detail; // Perform search setResults(searchProducts(query)); if (requestId) setCompletedRequestId(requestId); }; window.addEventListener("searchProducts", handleSearch); registerProductTools(); return () => { window.removeEventListener("searchProducts", handleSearch); unregisterProductTools(); }; }, []); return <div>{/* Product UI */}</div>; }

CLI Commands

CommandDescriptionwebmcp initInitialize WebMCP in projectwebmcp add-tool <name>Add new tool definitionwebmcp generate-typesGenerate TypeScript typeswebmcp example <type>Create example project

Read-Only Tools

{ name: "viewCart", description: "View cart contents", annotations: { readOnlyHint: "true" } }

Mutating Tools

{ name: "addToCart", description: "Add item to cart", annotations: { readOnlyHint: "false" } }

Tools with Parameters

{ name: "setFilters", inputSchema: { type: "object", properties: { category: { type: "string", enum: ["electronics", "clothing"] }, maxPrice: { type: "number" } } } }

E-Commerce

webmcp example e-commerce Features: Product search Cart management Checkout flow Order tracking

Dashboard

webmcp example dashboard Features: Widget interactions Data filtering Export functionality Real-time updates

Blog

webmcp example blog Features: Article search Comment posting Category filtering Related articles

1. Tool Naming

Use camelCase verbs that describe the action: ✅ searchProducts ✅ addToCart ✅ updateProfile ❌ product_search ❌ handleCart

2. Descriptions

Write clear, specific descriptions: ✅ "Search for products by name or category" ❌ "Search stuff"

3. Schema Completeness

Always include descriptions for parameters: properties: { query: { type: "string", description: "The search query to find products by name or category" } }

4. Contextual Loading

Register tools only when relevant: // Product page useEffect(() => { registerProductTools(); return () => unregisterProductTools(); }, []); // Cart page useEffect(() => { registerCartTools(); return () => unregisterCartTools(); }, []);

5. Error Handling

Always handle timeouts and errors: async function execute(params) { try { return await dispatchAndWait("action", params, "Success", 5000); } catch (error) { return `Error: ${error.message}`; } }

Browser Support

WebMCP requires browsers that support: CustomEvent API navigator.modelContext (proposed standard) For development, use the WebMCP polyfill: import "@webmcp/polyfill";

Resources

WebMCP Specification Example Projects React Integration Guide

Integration with Other Skills

ai-labs-builder: Use WebMCP to make AI apps agent-accessible mcp-workflow: Combine with workflow automation gcc-context: Version control your tool definitions

Category context

Code helpers, APIs, CLIs, browser automation, testing, and developer operations.

Source: Tencent SkillHub

Largest current source with strong distribution and engagement signals.

Package contents

Included in package

4 Scripts2 Docs

SKILL.md Primary doc
references/webmcp-spec.md Docs
assets/webmcp-bridge.js Scripts
scripts/add-tool.sh Scripts
scripts/generate-types.sh Scripts
scripts/init-webmcp.sh Scripts

Install for OpenClaw

Requirements

Package facts

Validation

Install with your agent

Trust & source

Release facts

Provenance

Documentation

WebMCP

What is WebMCP?

Quick Start

1. Tool Definition

2. Contextual Tool Loading

3. Event Bridge Pattern

Architecture

Installation

1. Initialize WebMCP

2. Define Tools

3. Register in Components

CLI Commands

Read-Only Tools

Mutating Tools

Tools with Parameters

E-Commerce

Dashboard

Blog

1. Tool Naming

2. Descriptions

3. Schema Completeness

4. Contextual Loading

5. Error Handling

Browser Support

Resources

Integration with Other Skills

Package contents

Related skills

API Architect

The Dev Team

Web Platform Engineer