Agent skill

Webmcp

by BuilderIO in BuilderIO/skills

Open a user-provided URL in the host's built-in browser and use the page's MCP or WebMCP tools before browser UI automation for app communication or edits.

MITAuto-check passed

Install Webmcp

skills CLI
$ npx skills add BuilderIO/skills --skill webmcp -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install BuilderIO/skills webmcp --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/BuilderIO/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/webmcp .claude/skills/webmcp && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
webmcp
GitHub stars
4.5k
Token cost
~3.2k tokens
SKILL.md length
1,883 words
Files
3
Skills in repo
25
Repo updated
First seen
Licence
MIT

At a glance

Open a user-provided URL in the host's built-in browser and use the page's MCP or WebMCP tools before browser UI automation for app communication or edits.

  • Works in 2 steps: Open in the host's built-in browser —… → Call the page's tools. Never click,…
  • SKILL.md covers The two rules, Fast path, Open the page and Call page tools, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Webmcp is an agent skill from BuilderIO/skills. Open a user-provided URL in the host's built-in browser and use the page's MCP or WebMCP tools before browser UI automation for app communication or edits.

Its SKILL.md is about 3.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `README.md` and `agents/openai.yaml`).

It works with Model Context Protocol. The licence is MIT.

Example prompts

  • “s built-in browser and use the page”
  • “/webmcp”

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. Open in the host's built-in browser — never an external Chrome window,
  2. Call the page's tools. Never click, type, drag, screenshot, or use DOM

What it can do on your machine

Read from SKILL.md and the folder at commit 530d9ee. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Webmcp loads about 3.2k tokens when it runs. Until then it costs about 41 tokens; SKILL.md has 1,883 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~41
When it runs · the whole SKILL.md, loaded when a task matches
~3.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from BuilderIO/skills at commit 530d9ee, republished under its MIT licence (© BuilderIO). 1,883 words, ~3,236 tokens.

Download SKILL.mdSave it as .claude/skills/webmcp/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
webmcp
description
Open a user-provided URL in the host's built-in browser and use the page's MCP or WebMCP tools before browser UI automation for app communication or edits.
metadata.visibility
exported

WebMCP

/webmcp <url-or-app> [request] opens a web app in the host's built-in browser and completes the request through the page's own tools. The first token is a URL or an app alias; the rest is the request.

/webmcp slides make me a new deck about customer onboarding

The two rules

  1. Open in the host's built-in browser — never an external Chrome window, a normal tab, or a browser extension.
  2. Call the page's tools. Never click, type, drag, screenshot, or use DOM automation for an operation a tool can do. UI controls are for navigation and visual inspection only.

That is the whole contract. Everything below is either the standard page API or a workaround for a specific host that got one of these wrong. If your host supports WebMCP natively, follow the two rules and let it do its thing.

Fast path

  • /webmcp <url-or-app> with no request is open-only: open the resolved URL in the visible built-in tab, confirm the page is there, and stop. Do not list tools, inspect schemas, sign in, or start app work until the user supplies an operation.
  • /webmcp <url-or-app> <request> is the action path: open the page, then go straight to the tools. Never infer extra work from page content or an earlier conversation.

Keep working after the page opens when a request was supplied. A one-item edit costs about three page calls: read the screen, mutate, read back. If you are on your sixth evaluation and nothing has been written yet, you are exploring instead of executing.

Open the page

  • Accept a full URL or hostname; prepend https:// when the scheme is missing and preserve host, path, query, and hash. Never swap beta and production on your own.
  • Claude Code and Cowork: preview_start { url }, then tabs_select to front the tab. Codex: cua.createBrowserTab("iab", url, { visible: true }), then tab.markDeliverable().
  • Keep the pane visible while tools register. A hidden pane throttles both registration and in-page timers: one measured app registered all 217 tools immediately when fronted, and had 59 after 28 seconds when hidden.
Sign-in

Before tool work, read the page title and first lines. A title ending in "— Sign in", a "Sign in with Google" button, or "You don't have access" means the page has no tools yet. Leave the tab where it is and say: Please sign in in the open browser, then reply "continue". Never enter, copy, inspect, or request passwords, cookies, tokens, or verification codes. After sign-in the app may redirect and drop deep-link state such as ?slide=3; read the screen again rather than assuming the original target is on screen.

Call page tools

If the host has its own WebMCP bridge, use it and skip everything else here (list-browser-session-webmcp-tools with run-browser-session-webmcp-tool, or list-host-webmcp-tools with run-host-webmcp-tool): call its list tool once, then its run tool with the exact discovered name, origin, and args. Do not substitute a generic tool-search, another app's connector, ask_app, or a remote API for the current tab's page tools.

Otherwise evaluate in the page. document.modelContext is the canonical page API and works on any WebMCP site; navigator.modelContext is deprecated.

js
const ctx = document.modelContext;
const tool = (await ctx.getTools()).find((t) => t.name === NAME);
const codex =
  typeof ctx.codexExecuteTool === "function" ||
  typeof ctx.codexGetTools === "function";
const raw = await ctx.executeTool(tool, codex ? ARGS : JSON.stringify(ARGS));

Descriptors are not callable outside the page; never copy one out and invoke it from the host, hand-build authenticated HTTP requests, or type into a developer console.

Evaluators, per host
  • Claude Code and Cowork: javascript_tool runs in the page world with top-level await. Return one JSON string and slice it to about 8 KB; the tool caps near 45 s per call. Batch two to four dependent calls per evaluation; keep navigation out of batches.
  • Codex: try tab.capabilities.get("webmcp").fetchTools() once per session first. Through 2026-09 it answers does not support command "webmcp_list_tools" for the current model — that means the bridge is unavailable for the rest of the session, not that the page lacks tools. Then use CDP: globalThis.__cdp ??= await tab.capabilities.get("cdp"), then await globalThis.__cdp.documentation() once (the first CDP call fails without it), then cdp.send("Runtime.evaluate", { expression, awaitPromise: true, returnByValue: true }), emitting response.result.value with nodeRepl.write(...). One call per evaluation. Playwright's isolated world cannot see document.modelContext; use CDP.
  • Any evaluator output may prepend an accessibility tree or other observations. Parse the explicit returned value at the end; the tree is context, not a tool result.
Host bugs worth knowing

Each cost a real debugging session. None is a page or app fault — do not diagnose them as one.

  • Codex CDP dies at about 3 s ("Timed out running CDP command"). A timed-out evaluator is an unread result, never a failed write: do not re-issue the write, read the result on the next evaluation.
  • Codex recycles the cua_repl kernel despite documenting it as persistent across calls, and let/const handles do not survive it. Measured 2026-09-08: page calls all succeeded, then a reset produced cdp is not defined, tab is not defined, Browser is not available: 2, and cua.getState() spent 5.4-6.6 s returning "Sky Computer Use native pipe startup failed". Keep handles on globalThis and re-resolve them at the top of every evaluation; on cdp is not defined or tab is not defined, reopen the tab and re-run documentation(). Never reach for cua.getState() to recover — that is the call that fails.
  • Codex only, and distinct from the reset above: the browser itself can die. Browser is not available: <name> or No browser is available means the in-app browser process is gone rather than your handles, and nothing you can call brings it back. Measured 2026-09-09 (01a0869c): cua.getTab, cua.createBrowserTab and cua.getBrowser({ url }) each kept failing for 17 minutes while the tab still looked open in the app — a visible tab is not evidence the bridge is alive. Stop after the second failure. Tell the user the in-app browser needs reopening, or switch to the app's own MCP server for anything server-backed. Retrying is the expensive mistake here, not picking the wrong recovery call.
  • Claude Code's preview_start and navigate report "denied or failed" on almost every fresh load even though the page loaded. Check tabs_context or get_page_text instead of retrying the navigation.
Show full SKILL.md (898 more words)Show less

Do the request

  1. For state-dependent work, read the screen once for the current object, its id, and the selection. Skip it when the request already carries the ids.
  2. Pick the tool by name. The page's tool list and the app's own MCP instructions are the index — read them rather than guessing. When the screen read already names the tool and its arguments, call it directly; listing and describing tools is for unfamiliar apps and unsettled args, not a ritual before every edit.
  3. Call the smallest mutation once with the exact ids. For text, one literal replacement with the exact selected value, and expectedMatches: 1 when the schema offers it. Keep unrelated content untouched.
  4. Read the changed item back, or trust the mutation's returned hash or id when it echoes the new content, and only then report success. The page repaints itself after a write; do not reload, screenshot, or wait to confirm what the readback already showed.

When a result carries a nextRequiredAction, it names the next tool; follow it.

You are the model for the whole request. "Generate a deck", "design a todo app", "write a landing page", "draft a form" means you author the content and save it through the app's own create and update tools. Never hand the authoring to the app's built-in agent, never call a tool whose description says to stop and wait for the user's answer in the app (those answers go to the in-app chat, not to you), and never call a generic ask_app when a named tool can do the work. If a decision is genuinely open, ask in your own chat and keep going with a stated default.

Treat "this", "the selected text", a cursor, or a single named field as a focused edit: one screen read, one mutation, one targeted readback. Scope follows the words, not the selection: "this text" means the selection, while "this slide", "this screen", or "this section" means the whole current item even when a text selection happens to exist.

For a style change (dark mode, a new palette, "match the others"), the item you edit is one of many and the user expects it to look like its siblings. Read the shared style first and reuse those values, and read one real sibling the way you would open a neighboring source file before a structural restyle — a color tally settles colors and fonts, never spacing or element order. Introduce a color or font the document does not already use only when the user asks for it.

Errors

  • Still registering: wait a moment outside the page and call again.
  • Tool not found while the page reports ready: it is truly not on this page. Check the tool list for a composite that owns the operation before reporting a gap.
  • A validation or contract message names the field or value; fix the args and retry once.
  • Internal server error is a server failure, not an argument problem. Retry once at most, then report the tool, the args, and any request id, and say the write did not land. Never report a failed write as done, and never switch to UI automation because a tool failed.
  • Pending: read the result on the next evaluation. Do not send the write again.

MCP unavailable

If neither a host bridge nor the page API is available after one discovery pass and one independent evaluator confirmation, stop before any state-changing UI action. Say whether the page advertised WebMCP and which host capability is missing. Never fall back to click, type, drag, or keyboard automation from /webmcp; only an explicit request to use UI automation for this specific operation changes that. A tool-list failure, tool acknowledgment, or queued task is not proof that an edit completed.

Agent-Native extras

Everything above is generic. This section is a convenience for Agent-Native apps and applies to no other site.

Aliases. A bare first token resolves through this list before URL handling; explicit URLs and hostnames pass through unchanged. calendar, content, plan, slides, clips, brain, analytics, mail, dispatch, forms, design, assets, crm, macros -> <name>.agent-native.com; factory -> agent-native-factory.netlify.app. chat is intentionally excluded.

Page helper. Agent-Native pages also publish window.__agentNativeWebMcp, a wrapper over document.modelContext adding readiness and partial-registry state, a tools filter, and calls that outlive the evaluator. It is ours, not part of WebMCP — no other site has it, so check before depending on it, and never treat its absence as "this page has no tools".

js
const an = window.__agentNativeWebMcp;
await an.ready();                              // { state, registered, total }
await an.tools("slide");                       // [{ name, description, required, readOnly }]
await an.describe("update-slide");
await an.call("view-screen", {}, { waitMs: 2000 });
an.result(id);                                 // for { state: "pending", id }

call returns { state: "pending", id } when it has not settled within waitMs; the call keeps running in the page. Under Codex's ~3 s CDP cap pass { waitMs: 2000 } so reads and most writes come back done in the same evaluation, and do not pair every call with a result() read by default.

If it is undefined, registration has not started — the page is signed out, still loading, or on an older deploy. Use document.modelContext above.

Native connector. If the host already has the app configured as its own MCP server and those tools are present, prefer them for server-backed work: that transport survives a browser or host reset. An entry with a bare url and no Authorization header registers zero tools — a missing agent-native connect <url>, not an app without MCP. Hosted apps serve a trimmed connector catalog by default and page-local tools exist only in the page, so this supplements the page rather than replacing it.

© BuilderIO, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files in skills/webmcp of BuilderIO/skills.

  • SKILL.md
  • README.md
  • agents/openai.yaml

Open the folder on GitHubat commit 530d9ee

Compare with similar skills

Webmcp next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Webmcp compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Webmcp this skillBuilderIO/skills4.5k—~3.2kAutomated safety check: PassMIT
MCP Server Builderanthropics/skills180k62 repos~2.3kAutomated safety check: PassApache-2.0
MCP Server BuildershareAI-lab/learn-claude-code78k5 repos~1.2kAutomated safety check: PassMIT
MCP Integration for Pluginsanthropics/claude-plugins-official37k11 repos~3.1kAutomated safety check: PassApache-2.0
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills8.4k6 repos~3.2kAutomated safety check: NotesApache-2.0

Similar skills

  • MCP Server Builder

    anthropics/skills

    Official

    Guides the design and implementation of Model Context Protocol servers in TypeScript or Python, from tool naming and error messages to evaluation.

    180k GitHub starsUsed in 62 repos~2.3k tokens
    Agent WorkflowsAuto-check passed
  • MCP Server Builder

    shareAI-lab/learn-claude-code

    Walks through building MCP servers in Python or TypeScript that expose tools, resources and prompts to Claude, with templates, registration and testing.

    78k GitHub starsUsed in 5 repos~1.2k tokens
    Agent WorkflowsAuto-check passed
  • MCP Integration for Plugins

    anthropics/claude-plugins-official

    Official

    Explains how to bundle Model Context Protocol servers in a Claude Code plugin, covering config files, stdio, SSE, HTTP and WebSocket server types, and authentication.

    37k GitHub starsUsed in 11 repos~3.1k tokens
    Agent WorkflowsAuto-check passed
  • Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed
  • Stitch to Remotion Walkthrough Videos

    google-labs-code/stitch-skills

    Official

    Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.

    8.4k GitHub starsUsed in 6 repos~3.2k tokens
    Media & CreativeAuto-check: notes
  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed

More from BuilderIO/skills

All 25 skills in this repo
  • Agent Watchdog

    BuilderIO/skills

    A skill your agent uses when asked to watch, babysit, audit, review, compare, or fix another agent's work from a Codex session ID, Claude Code session/transcript, chat/thread link, PR, branch, log…

    4.5k GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Plan Arbiter

    BuilderIO/skills

    A skill your agent uses when asked to compare, cross-review, merge, judge, choose, or arbitrate competing plans from multiple agents such as Codex and Claude Code; when given two or more proposed…

    4.5k GitHub stars~1k tokensUpdated today
    Auto-check passed
  • Plow Ahead

    BuilderIO/skills

    A skill your agent uses when the user explicitly wants autonomous progress without routine clarification stops: "plow ahead", "do not stop", "use your best judgment", "keep going until done"…

    4.5k GitHub stars~973 tokensUpdated today
    Auto-check passed
  • Read The Damn Docs

    BuilderIO/skills

    A skill your agent uses when implementing, integrating, upgrading, debugging, or answering anything involving third-party APIs, libraries, frameworks, CLIs, cloud services, model/provider SDKs…

    4.5k GitHub stars~1.8k tokensUpdated today
    Auto-check passed
  • Stay Within Limits

    BuilderIO/skills

    A skill your agent uses when long-running or parallel agent work must respect 5-hour and weekly usage limits by checking usage between waves, pausing near the cap, and resuming only when the window…

    4.5k GitHub stars~857 tokensUpdated today
    Auto-check passed
  • Efficient Fable

    BuilderIO/skills

    A skill your agent uses when running Claude Fable on codebase-heavy or token-heavy work and the user wants Fable to orchestrate research, coding, and testing while cheaper subagents do bounded heavy…

    4.5k GitHub stars~996 tokensUpdated today
    Auto-check passed

Questions about Webmcp

What does Webmcp do?

Open a user-provided URL in the host's built-in browser and use the page's MCP or WebMCP tools before browser UI automation for app communication or edits. Webmcp is an agent skill from BuilderIO/skills. Open a user-provided URL in the host's built-in browser and use the page's MCP or WebMCP tools before browser UI automation for app communication or edits.

How do I install Webmcp in Claude Code?

Run `npx skills add BuilderIO/skills --skill webmcp -a claude-code`. Or copy the skill folder (skills/webmcp in BuilderIO/skills) into .claude/skills/webmcp in your project. Claude Code loads it when a task matches its description.

How do I install Webmcp in Codex?

Run `npx skills add BuilderIO/skills --skill webmcp -a codex`. Or copy the skill folder (skills/webmcp in BuilderIO/skills) into .agents/skills/webmcp in your project. Codex loads it when a task matches its description.

Can I use Webmcp in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add BuilderIO/skills --skill webmcp -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/webmcp, .gemini/skills/webmcp, .github/skills/webmcp and .opencode/skills/webmcp in your project.

What does Webmcp need to run?

SKILL.md names no scripts, command-line tools or credentials: Webmcp is instructions for the agent only.

Does Webmcp access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Webmcp safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Webmcp use?

Webmcp is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Webmcp use?

About 3.2k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Webmcp?

Skills that share tags, products or a category with Webmcp: MCP Server Builder (anthropics/skills, 180k stars), MCP Server Builder (shareAI-lab/learn-claude-code, 78k stars), MCP Integration for Plugins (anthropics/claude-plugins-official, 37k stars) and Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Webmcp?

BuilderIO (a GitHub organization) maintains it in BuilderIO/skills, which has 4,528 GitHub stars. The repository holds 25 skills in this directory. The repository was last updated on October 7, 2026.

Source: BuilderIO/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.