Skip to content
Skillpedia
Agents40k · #5419

webmcpify

Helps your agent connect with web applications. It creates a manifest so the AI can interact with the app's actions and test it in a browser.

What it does

Webmcpify transforms an existing website into a tool for AI agents. It does this by exposing the website's functions in a way that AI can use them directly, instead of guessing how to interact with the page.

When to use it

  • ✓When you want an AI to control your website.
  • ✓To connect a website to more advanced AI systems.
  • ✓To make website actions understandable to AI agents.

Example of what to ask your AI

“Make my e-commerce website so that AI can add products to the cart and complete purchases.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/github/awesome-copilot/blob/main/skills/webmcpify/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/github/awesome-copilot/blob/main/skills/webmcpify/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

Webmcpify analyzes your website, identifies the actions a user can take, and creates a 'manifest' describing these actions for the AI. It then integrates these descriptions into the website and verifies that the AI can use the functions correctly.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add github/awesome-copilot --skill webmcpify

Or download just the file:

curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/webmcpify/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

webmcpify — make any web app agent-ready, verifiably

You are running the webmcpify pipeline. It takes an existing web application and exposes its user-facing functionality as WebMCP tools (document.modelContext — a proposed web standard incubated in the W3C Web Machine Learning Community Group, currently a Chrome origin trial), so browser AI agents can operate the app through structured tool calls instead of guessing at the DOM.

DETECT ──▶ INVENTORY ──▶ [HUMAN GATE: manifest approval] ──▶ INTEGRATE ──▶ VERIFY ──▶ HEAL ──▶ AUDIT
              ▲  loop            per-area batches on big apps    ▲  loop      ▲ loop    ▲ loop
              └── per area                                       └── per manifest entry ──┘

Everything you need ships inside this skill directory: phase guides in references/, and vendorable code in templates/ (runtime, ambient types, JS variant, React JSX typings, verification spec). Never assume files exist outside the skill dir.

Out of scope (stop and say so): backend-only MCP servers (that's classic MCP, not WebMCP), automating third-party sites you don't control, and generic SEO work.

Invocation modes

The user may pass an argument (/webmcpify <mode> or plain words):

Argument Run Stop at
(none) or full all phases, resuming from current manifest state done
inventory / map DETECT + INVENTORY loops only — zero code changes present the manifest table for review
integrate INTEGRATE loop only (requires approved tools in the manifest) integrated + built
verify VERIFY + HEAL loops on integrated/verified tools green/skipped report
status read .webmcpify/manifest.json — read-only report phase, per-status tool counts, and the recommended next command

Any other text is scoping guidance (e.g. "only the checkout area", "read-only tools only").

Ground rules (non-negotiable, enforce in every phase)

  1. Zero unrelated changes. Every diff hunk you produce must trace to a manifest entry or the recorded one-time setup. Never refactor, reformat, rename, or "improve" anything else — note problems in the report instead. Files that were already dirty at baseline (recorded in the manifest) are untouchable: never modify or revert them.
  2. Read-only tools first. Mutations are tri-state: mutating: false, "client" (browser-local only: prefs, localStorage), or "server" (data leaves the browser). Server-mutating tools require explicit per-tool human approval recorded in the manifest; client-mutating tools may be approved as a batch at the gate. Never expose destructive, irreversible, or payment actions in a first integration.
  3. The server is the only trust boundary. A tool's execute() may only call code paths the UI already uses (same endpoints, same validation, same auth). Never create new endpoints, never bypass existing checks, never put secrets in tools.
  4. Spec-shaped and dependency-free. Register via document.modelContext.registerTool() with AbortSignal lifecycle (feature-detect the deprecated navigator.modelContext fallback). No third-party WebMCP runtime dependencies. Everything feature-detected: the app behaves identically in browsers without WebMCP.
  5. Never toolautosubmit on state-changing forms — neither mutating: "client" nor "server". Only on pure read forms (search, filter, availability).
  6. State lives in files, not in your context. Read/write .webmcpify/ constantly; assume your context can be wiped between any two steps. Write the manifest atomically (write manifest.json.tmp, then rename over manifest.json).
  7. Commits are opt-in. Never commit unless the human chose a commit policy at the gate (see below). Without git or without permission, leave changes in the working tree and record progress in the manifest only.

Fresh, authoritative guidance

WebMCP is an evolving origin-trial API — the surface has already changed during the trial (testing API removed 2026-07; navigator → document). Before Phase 2, if network is available, pull Google's current official guides rather than relying on memory:

npx -y modern-web-guidance@latest retrieve "webmcp,agentic-forms,agentic-javascript-tools"

If offline, use references/integrate.md — but prefer the live guides when they conflict.

…

FAQ

What is WebMCP?

WebMCP is a proposed standard for websites to describe their functionalities to AI agents in a structured way.

What does the AI agent do with this information?

The AI uses the 'manifest' to understand what actions are possible on the website and how to execute them, allowing it to control the website more effectively.

What happens if the AI tries to do something it shouldn't?

Webmcpify has verification and healing mechanisms to ensure the AI only performs allowed and safe actions, and that unrelated code remains untouched.

Details

Original description by the author

Make a web app agent-ready — propose a WebMCP tool manifest, integrate, verify in a real browser, heal; unrelated code stays untouched. Use for "webmcpify", "add WebMCP", or "expose app actions to AI agents".

repo: github/awesome-copilot

Popularity

GitHub stars
40k
Ranking position
#5419
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills