WebMCP: A More Real-Life Implementation (Part 2)

2026-04-18 · Source: AI on Medium · Field: Technology & Digital — Artificial Intelligence & Machine Learning, Software Development & Engineering · Depth: Intermediate, medium

Summary

This article details a practical implementation of WebMCP, an experimental browser API designed to enable AI agents to interact with web applications more efficiently. Instead of relying on traditional methods like screenshots or DOM parsing, WebMCP allows web pages to directly expose their capabilities as structured tools. The demonstration involves building a WebMCP-enabled HTML page that declares actions like "bookAppointment" and a CrewAI agent that interprets natural language requests, such as "Book me a haircut at 3pm." The agent then uses `chrome-devtools-mcp` to connect to a debug-mode Chrome instance, leveraging its `evaluate_script` capability to invoke the page's WebMCP tools directly. This approach aims to reduce token usage, complexity, and improve reliability for agent-web interactions, shifting web design towards exposing capabilities rather than just human-centric UIs.

Key takeaway

For AI Engineers building web interaction agents, this WebMCP implementation demonstrates a path to more robust and efficient automation. You should explore exposing web application capabilities directly as structured tools rather than relying on brittle UI automation. This paradigm shift can significantly reduce maintenance overhead and improve agent performance, even if WebMCP itself is still experimental.

Key insights

WebMCP enables AI agents to directly call structured tools exposed by web pages, bypassing fragile UI automation.

Principles

• Web pages define capabilities, agents decide execution.
• Direct tool calls reduce complexity and improve reliability.

Method

A WebMCP-enabled page registers tools via `navigator.modelContext.registerTool`. A CrewAI agent, connected via `chrome-devtools-mcp` and Chrome DevTools Protocol, uses `evaluate_script` to invoke these page-level tools.

In practice

• Use `navigator.modelContext.registerTool` to expose page functions.
• Configure CrewAI agents with detailed `backstory` for context.
• Run Chrome with `--remote-debugging-port=9222` for agent access.

Topics

• WebMCP
• AI Agents
• CrewAI
• Chrome DevTools Protocol
• Tool Calling

Code references

• purrox/webmcp_example

Best for: AI Engineer, Software Engineer, Machine Learning Engineer

Related on AIssential

• The agent-ready web: Simplify user actions with WebMCP — Tara Agyemang, Google — Web MCP transforms websites into structured APIs for AI agents, simplifying complex user actions.
• OpenAI Codex Can Now Use Your Computer! (Full Breakdown + Testing) — OpenAI's Codex is an evolving AI agent designed for non-technical users, excelling in browser and computer control.
• AI Didn’t Kill the Web, It Moved in! — Olivier Leplus (AWS) & Yohan Lasorsa (Microsoft) — AI is transforming web development across the entire lifecycle, from coding to agent-centric web app design.
• AI Agents, Tools, MCP, and Skills: The Core, The Embellishment, and The Gimmick — AI agent development requires distinguishing core components like Agents and Tools from less practical elements like MCP.
• ChromeDevTools / chrome-devtools-mcp — AI agents can control Chrome for advanced debugging, performance analysis, and automation via `chrome-devtools-mcp`.
• According to Anthropic’s Engineer, HTML is the New Markdown for AI Agents — HTML transforms static AI outputs into interactive, reusable interfaces, enabling human action.

Open in AIssential →

Editorial summary, takeaway, and curation by AIssential. Original article published by AI on Medium.