The Shift to the Agentic Web

We are moving from a web of manual browsing to an "agentic web," where AI agents perform complex, multi-step workflows on behalf of users. For developers, this means building for two distinct audiences: humans and AI agents. If an agent cannot parse or interact with your site, you risk losing visibility and conversion in an AI-driven ecosystem.

How AI Agents Perceive Your Website

Agents do not "see" websites like humans. They rely on three primary data sources to build a machine-readable representation of your page:

  1. Visuals (Screenshots): Interpreted via vision models. Useful for understanding layout and hierarchy, but computationally expensive and slow.
  2. DOM & Raw Text: The structural backbone. Agents analyze nesting, IDs, and classes to understand relationships between elements (e.g., knowing a 'Buy' button belongs to a specific product).
  3. Accessibility Tree: The most efficient method. By distilling the page into roles, names, and states, it provides a semantic map that ignores visual noise. If your site is accessible to screen readers, it is already well-positioned for AI agents.

Optimizing for Agentic Readiness

To make your site agent-ready, focus on structural clarity rather than creating a separate "AI version" of your site:

  • Semantic HTML: Use native elements (<button>, <nav>, <header>) to provide strong signals about intent and interactivity.
  • Stable Layouts: Avoid frequent layout shifts or hiding actionable controls behind complex animations, as these increase the cognitive load for the agent.
  • Visibility: Ensure primary actions are visible in the viewport and avoid exposing functionality that performs background changes without clear UI feedback.

WebMCP: Bridging the Gap

WebMCP is a proposed standard that allows websites to expose structured tools directly to AI agents. Unlike the general-purpose Model Context Protocol (MCP), WebMCP is tab-bound, ephemeral, and aware of the current user session (cookies, login state).

Implementation Approaches

  • Imperative API: Use navigator.modelContext.registerTool to define a tool with a name, description, input schema, and an execute block. This allows for complex logic and cleanup via AbortController.
  • Declarative API: Add attributes (toolname, tooldescription) directly to HTML forms. This is the simplest way to expose existing forms as agentic tools.

Best Practices for Tool Design

  • Atomic & Composable: Keep tools focused on a single responsibility. Avoid creating multiple tools with nuanced differences.
  • Anticipate Input: Handle raw user input within the tool logic rather than forcing the model to perform calculations or transformations.
  • Descriptive Errors: Return meaningful error messages to allow the model to self-correct and retry.
  • Context-Awareness: Only register tools where they make sense (e.g., do not expose 'Add to Cart' on a login page).

Auditing Readiness

Starting with Chrome 150, developers can use Lighthouse to audit agentic readiness. This tool checks for visual readiness, accessibility, WebMCP tool configuration, and potential content shifts.