Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/agentcathq/webmcp-react/webmcp-setupnpx skills add agentcathq/webmcp-react --skill webmcp-setupgit clone --depth 1 https://github.com/agentcathq/webmcp-reactWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00080 | $0.01154 |
| Opus 5 | $0.00040 | $0.00577 |
| Sonnet 5 | $0.00016 | $0.00231 |
| Haiku 4.5 | $0.00008 | $0.00115 |
Grade A, and why
webmcp-setup scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 168 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Set Up webmcp-react
Overview
webmcp-react exposes React app functionality as typed tools on document.modelContext (the W3C WebMCP API). AI agents discover and call these tools. This skill bootstraps the full setup.
Step 1: Install dependencies
npm install webmcp-react zod
zod is a peer dependency used for typed tool input schemas.
Step 2: Add WebMCPProvider
All useMcpTool calls must be descendants of <WebMCPProvider>. It installs a polyfill when native browser support is absent.
React / Vite
Wrap the app root:
import { WebMCPProvider } from "webmcp-react";
function App() {
return (
<WebMCPProvider name="my-app" version="1.0">
{/* existing app content */}
</WebMCPProvider>
);
}
Next.js (App Router)
Create a client component wrapper since webmcp-react uses browser APIs:
// app/providers.tsx
"use client";
import { WebMCPProvider } from "webmcp-react";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<WebMCPProvider name="my-app" version="1.0">
{children}
</WebMCPProvider>
);
}
Then wrap children in the root layout:
// app/layout.tsx
import { Providers } from "./providers";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
The library ships with a "use client" banner in its build output, so no transpilePackages config is needed when installing from npm.
Step 3: Create a first tool
Create a simple tool component to verify the wiring works:
// components/mcp-tools.tsx (add "use client" at top if Next.js)
import { useMcpTool } from "webmcp-react";
import { z } from "zod";
export function GreetTool() {
useMcpTool({
name: "greet",
description: "Greet someone by name",
input: z.object({
name: z.string().describe("The name to greet"),
}),
handler: async ({ name }) => ({
content: [{ type: "text", text: `Hello, ${name}!` }],
}),
});
return null;
}
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 168 lines · 80 tokens per session scan A 665265c3a31b
webmcp-setup is a skill published in the GitHub repository agentcathq/webmcp-react (46 stars, last pushed 9d ago), licensed MIT. It adds 80 tokens to every session and 1,154 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
codexless-browser-repair
Diagnose and temporarily repair Codexless Browser compatibility after a Codex, Chrome Skill, or Browser runtime update when Codexless Browser stopped working. Use for current-version Codexless Browser compatibility drift, not ordinary website bugs, general Browser operation, Codexless install/update work, or long-term…
install-shellby-mcp
Install and verify Shellby MCP on a Mac using terminal access only. Use when a user asks an agent to install, set up, configure, or finish a new Shellby MCP installation from this repository.
xcatcher
Fetch fresh or recent public X (Twitter) posts from one or many named account handles through Xcatcher, with structured JSON results and optional x402 v2 USDC pay-per-crawl access on Base. Use for account monitoring, social intelligence, OSINT, tweet/post collection, timeline snapshots, or requests to scrape, crawl…
apify-product-data-setup
Wire an AI agent to live e-commerce product data using Apify's E-commerce Scraping Tool over MCP, either as runtime tool calls or as a scheduled refresh into a vector store. Trigger on "give my agent live product data", "my agent quotes stale prices", "connect Apify MCP to Claude or Cursor or n8n", "add product data…
apify-product-lookup
Answer questions about a real product's current price, stock, rating, specs, or images by calling Apify's E-commerce Scraping Tool over MCP, across Amazon, Walmart, Target, eBay, and many more retailers. Trigger on "what does X cost right now", "is X in stock", "compare the price of X across stores", "find me a Y…
agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a…