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...

Security Scan

The skill implements a coherent WebMCP bridge and Next.js templates, but the runtime bridge code accepts/postMessages across origins without origin validation and the SKILL.md references a CLI that isn't provided—these mismatch(es) and insecure defaults merit caution before use.

Purpose & Capability

Name, description, and included files (bridge JS, Next.js templates, example tools, init scripts) are consistent: this is a toolkit for exposing structured 'tools' to AI agents in a browser/Next.js app. The files provided are appropriate for the described purpose.

Instruction Scope

SKILL.md instructs using a CLI (npx webmcp init / npm install -g @webmcp/cli), but the package/CLI binary is not present in the bundle; instead there are shell scripts (init-webmcp.sh, add-tool.sh) for manual initialization. The instructions otherwise stay within the stated purpose (register/unregister tools, dispatch events) and do not attempt to read unrelated system files or environment variables.

Install Mechanism

No install spec is declared (instruction-only). The repository contains helper shell scripts that copy templates into a project; these are safe to inspect and run locally. Nothing in the bundle downloads or executes remote code during install.

Credentials

No environment variables, credentials, or config paths are requested. The tool definitions include authentication-related tools (login/register) that will handle user credentials inside the web app, which is consistent with the stated purpose.

Persistence & Privilege

The skill does not request always:true or other elevated platform privileges. It provides client-side assets and scripts which, when run by the developer, write files into a project — this is expected for a scaffolding/template skill.

What to consider before installing

This package is conceptually coherent for adding an agent→web-app bridge, but there are insecure defaults you should be aware of: the browser bridge posts messages with target '*' and the handleMessage code does not perform origin validation (the origin check is commented out). If you install/use this in a web app, only include the bridge on pages where you control both frame/parent origins, or modify the bridge to validate event.origin and restrict allowed origins before acting on messages. Also verify the CLI commands in the README—there is no @webmcp/cli included in the bundle; the repo provides shell scripts (init-webmcp.sh, add-tool.sh) instead. Before deploying to production: 1) add strict origin checks and consider stronger authentication/CSRF protections for mutating tools (login, submitForm, cart operations), 2) avoid exposing sensitive tool handlers in pages that could be framed by untrusted sites, and 3) review any UI code that will actually perform network requests so user credentials or sensitive data are not forwarded to unintended endpoints.

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

Core Concepts

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

Usage

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

Command	Description
webmcp init	Initialize WebMCP in project
webmcp add-tool <name>	Add new tool definition
webmcp generate-types	Generate TypeScript types
webmcp example <type>	Create example project

Tool Types

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" }
    }
  }
}

Examples

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

Best Practices

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