Build your website for the agentic era

Key Concepts

• Agentic Web: A paradigm shift where AI agents perform complex, multi-step workflows on behalf of humans, moving from simple browsing to autonomous delegation.
• AI Agent: An autonomous entity that observes its environment, processes information via an LLM (Large Language Model), and takes actions to achieve goals.
• WebMCP (Web Model Context Protocol): A proposed web standard that exposes structured tools directly to AI agents within a browser tab, allowing for reliable, context-aware interactions.
• Accessibility Tree: A browser-native API that provides a semantic summary of a page (roles, names, states), serving as the primary "map" for AI agents to understand functional intent.
• Imperative vs. Declarative APIs: Two methods for registering WebMCP tools—the former using JavaScript (navigator.modelContext.registerTool), the latter using HTML form attributes.
• Evals (Evaluations): Testing methodologies used to measure the performance and reliability of non-deterministic AI agents interacting with website tools.

---

1. How AI Agents Perceive Websites

AI agents do not "see" websites like humans; they rely on machine-readable representations:

• Vision Models (Screenshots): Agents interpret visual layouts, colors, and proximity. While effective for understanding structure, it is computationally expensive and slow.
• DOM Analysis: Agents parse the Document Object Model to understand the hierarchy, nesting, and relationship between elements (e.g., identifying that a "Buy" button belongs to a specific product).
• Accessibility Tree: The most efficient method. It strips away visual noise to provide a semantic map of interactive elements. Key takeaway: A website that is accessible to screen readers is inherently "agent-ready."

2. Best Practices for Agentic Readiness

• Stable Layouts: Frequent UI changes increase cognitive load for agents, similar to how a grocery store re-organizing aisles confuses shoppers.
• Visibility: Ensure actionable controls are visible in the viewport. Avoid hiding critical actions behind hover states or complex animations.
• Semantic HTML: Use native elements (<button>, <nav>, <header>) rather than <div> or <span> wrappers. This provides built-in focusability and semantic meaning that agents can parse without custom JavaScript.
• Next Best Action: Design UIs where the logical next step is clear, reducing the need for the agent to "guess" the workflow.

3. WebMCP: Framework and Implementation

WebMCP bridges the gap between the agent and the website’s backend logic.

• Imperative Approach: Uses navigator.modelContext.registerTool. Requires a name, description, input schema, and an execute block.
• Declarative Approach: Adds attributes to standard HTML forms (tool-name, tool-description). This is the simplest way to expose existing forms to agents.
• WebMCP vs. MCP:
  • WebMCP: Tab-bound, ephemeral, interacts with the active user session/cookies, and is DOM-aware.
  • MCP (Model Context Protocol): Persistent, server-based, and not bound to a specific browser tab or UI state.

4. Development, Testing, and Debugging

• Lighthouse Audit: Starting in Chrome 150, developers can run audits specifically tailored to "agentic readiness," covering accessibility, content shifts, and WebMCP tool health.
• DevTools Support: New features in Chrome DevTools allow developers to track tool invocations, view input/output parameters, and verify if tools are being triggered correctly during user journeys.
• Tool Design Principles:
  • Atomic & Composable: Each tool should have a single responsibility.
  • Descriptive Naming: Use clear, positive descriptions (e.g., "Create Event" vs. "Start Event Creation").
  • Error Handling: Return descriptive errors to allow the model to self-correct and retry.

5. Notable Quotes

• "We are going from browsing to delegating." — Kasper Kulikowski
• "Everything that makes a site agent-ready also makes it better for humans." — Kasper Kulikowski
• "The agentic web is not a future trend. It's already here." — Kasper Kulikowski

---

Synthesis and Conclusion

The transition to the "Agentic Era" represents a fundamental shift in web development. Rather than building a separate "AI web," developers should focus on semantic clarity and accessibility. By implementing WebMCP, developers can provide agents with direct, reliable tools to execute complex tasks—such as booking travel or filtering e-commerce results—without requiring the agent to "guess" through visual interpretation. The combination of semantic HTML, WebMCP integration, and rigorous evaluation (Evals) ensures that websites remain visible and functional in an AI-driven ecosystem. Developers are encouraged to start experimenting with Chrome flags and participate in the upcoming origin trial.