WebMCP Chrome DevTools Quickstart

Skill by ara.so — Devtools Skills collection.

This skill teaches AI agents how to use WebMCP with Chrome DevTools MCP to enable structured, token-efficient browser automation. Instead of screenshot-based workflows, WebMCP lets you register JavaScript functions as AI-callable tools, reducing token usage by up to 89%.

What This Project Does

WebMCP turns your website's JavaScript functions into AI-callable tools using the Model Context Protocol (MCP). The Chrome DevTools MCP server connects to Chrome via the Chrome DevTools Protocol (CDP) and provides:

1. 26 browser automation tools (navigation, interaction, inspection, tab management)
2. WebMCP tool discovery (list_webmcp_tools)
3. WebMCP tool execution (call_webmcp_tool)

Architecture:

AI Client → Chrome DevTools MCP → Chrome (CDP) → Your Website (navigator.modelContext)