skills.rest
webmaxru
webmaxruCOMMUNITY
Explore all skills by this author →
Website𝕏@webmaxruGitHub

webmcp

Integrate and debug WebMCP tools in browser JavaScript or TypeScript apps.

46|4|Updated Mar 14, 2026
Search Tags:#debugging#browser-tools#webmcp#navigator.modelContext#imperative-api#declarative-api#form-annotations
One-click install
npx skills add https://github.com/webmaxru/agent-skills --skill webmcp-webmaxru
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webmcp
Source: https://github.com/webmaxru/agent-skills/tree/main/skills/webmcp
Command: npx skills add https://github.com/webmaxru/agent-skills --skill webmcp-webmaxru

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Implements and debugs browser WebMCP integrations in JavaScript or TypeScript web apps. Use when exposing imperative tools through navigator.modelContext, annotating HTML forms for declarative tools, handling agent-invoked form flows, or validating WebMCP behavior in the current Chrome preview. Don't use for server-side MCP servers, REST tool backends, or non-browser providers.

Core Features & Use Cases

  • Exposes imperative tools via navigator.modelContext and supports declarative tool annotations through toolname/tooldescription forms.
  • Enables debugging and validation of WebMCP tool lifecycles, including agent-driven submits and tool invocation flows in browser contexts.
  • Applies to in-browser apps and prototypes; not suitable for server-side MCP servers, REST tool backends, or non-browser providers.

Quick Start

Register a WebMCP tool on a page and validate its behavior in the Chrome preview.

Frequently Asked Questions about webmcp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I expose imperative tools via navigator.modelContext in a web app?▼

Annotating HTML forms with toolname and tooldescription attributes exposes declarative WebMCP tools. This enables agent-driven form flows in browsers, allowing agents to invoke and submit forms without requiring imperative JavaScript registration.

Can I use WebMCP integration for server-side MCP servers or REST tool backends?▼

No, WebMCP integration is strictly for in-browser apps and prototypes. It handles navigator.modelContext and declarative HTML form annotations, but does not apply to server-side MCP servers, REST tool backends, or non-browser providers.

How do I debug agent-driven form flows and WebMCP tool lifecycles?▼

The WebMCP contract specifies ToolDefinition fields, registration semantics, and compatibility guidance for browser environments. It standardizes how imperative and declarative tools are exposed and invoked by agents within web applications.

Does this approach support validating WebMCP behavior in Chrome previews?▼

Yes, validating WebMCP behavior in Chrome previews is a core function. It allows developers to test both imperative navigator.modelContext registrations and declarative form annotations to ensure proper agent-driven invocation flows.

Related Skills

Explore More Software Engineering Skills→
browserbasebrowserbase
3.7k

webmcp-gen

Generate and validate WebMCP init scripts from manifest.json to JavaScript.

Official
Intermediate
OrcaQubitsOrcaQubits
35

webmcp-testing

Validates WebMCP tools through unit, schema, integration, agent, permission, and e-commerce flow testing with Chrome DevTools support.

Official
Advanced
OrcaQubitsOrcaQubits
35

webmcp-polyfill

Provide a JavaScript polyfill for the navigator.modelContext API to enable WebMCP in browsers.

Official
Intermediate
OrcaQubitsOrcaQubits
35

webmcp-mcp-bridge

Integrates WebMCP browser tools with backend MCP servers and UCP endpoints via REST APIs.

Official
Intermediate