skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

webmcp-chrome-devtools-quickstart

Registers JavaScript functions as AI-callable WebMCP tools for browser automation via Chrome DevTools MCP.

4|Updated May 16, 2026
Search Tags:#AI agents#javascript#MCP#browser automation#token efficiency#chrome devtools#webmcp
One-click install
npx skills add https://github.com/reason-machines/devtools-skills --skill webmcp-chrome-devtools-quickstart-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webmcp-chrome-devtools-quickstart
Source: https://github.com/reason-machines/devtools-skills/tree/main/skills/webmcp-chrome-devtools-quickstart
Command: npx skills add https://github.com/reason-machines/devtools-skills --skill webmcp-chrome-devtools-quickstart-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mcp-b/global, @mcp-b/chrome-devtools-mcp.

What problem does it solve? Screenshot-based browser automation consumes large amounts of tokens and produces brittle interactions. This Skill teaches AI agents to use WebMCP with Chrome DevTools MCP so websites expose structured JavaScript functions as AI-callable tools, reducing token usage by up to 89% compared to screenshot workflows. ## Core Features & Use Cases - WebMCP Tool Registration: Register JavaScript functions as AI-callable tools via navigator.modelContext with JSON Schema inputs, error handling, and structured responses. - Tool Discovery and Execution: Use the Chrome DevTools MCP tools list_webmcp_tools and call_webmcp_tool to discover and invoke registered page tools from Claude Code, Cursor, Claude Desktop, or Windsurf. - Browser Automation: Navigate pages, click elements, fill inputs, take screenshots, and evaluate scripts through 26 Chrome DevTools MCP tools connected over the Chrome DevTools Protocol. - Use Case: Build a calendar web app where an AI agent discovers a create_calendar_event tool, calls it with title, date, and time arguments, and verifies the result, all without parsing screenshots. ## Quick Start Set up WebMCP with Chrome DevTools MCP in my project and register a JavaScript function as an AI-callable tool.

Frequently Asked Questions about webmcp-chrome-devtools-quickstart

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

FAQPage Schema
How do I register JavaScript functions as AI-callable tools with WebMCP?▼

Import @mcp-b/global first, then call navigator.modelContext.registerTool with a name, description, JSON Schema inputSchema, and an async execute function. The tool returns structured content that AI clients can invoke through the Chrome DevTools MCP server.

How to connect Claude Code or Cursor to browser automation with MCP?▼

Add the Chrome DevTools MCP server with claude mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest, or configure it in .cursor/mcp.json for Cursor. The server connects to Chrome over the Chrome DevTools Protocol and exposes 26 automation tools.

Does WebMCP reduce token usage compared to screenshot-based automation?▼

Yes, WebMCP replaces screenshot parsing with structured tool calls, and the included benchmarks show 89% token reduction on simple tasks and 77% on complex tasks. Run npm run benchmark:simple:direct or benchmark:complex:direct with an Anthropic API key to verify.

Why is navigator.modelContext undefined in my project?▼

This happens when @mcp-b/global is not imported or is imported after your tool registration code. Import @mcp-b/global first in your entry file so the navigator.modelContext polyfill initializes before any registerTool calls.

Why does list_webmcp_tools return no tools?▼

Tools may not be registered yet because the page has not fully loaded. Register tools inside a DOMContentLoaded or load event listener, or verify registration by evaluating navigator.modelContext.tools.size through the evaluate_script MCP tool.

What are the limitations of WebMCP browser automation?▼

WebMCP requires modifying the target website to register tools, so it cannot automate arbitrary third-party sites without code access. Hot module reload in Vite can also break tool registration, requiring a full page reload after tool changes.

Related Skills

Explore More Software Engineering Skills→
AdielMagAdielMag

unity-initial-setup

Installs unity-mcp-cli and configures Unity projects with MCP integration and AI skills.

Community
Basic
OrcaQubitsOrcaQubits
35

webmcp-testing

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

Official
Advanced
lucasloutayflucasloutayf

browser-testing-with-devtools

Diagnose browser-rendered issues by inspecting real-time DOM, console, and network data.

Community
Advanced
Sake-TeamSake-Team

browser-qa

Automate visual testing and UI interaction verification with browser automation tools.

Official
Advanced