WebMCP: Readying Web for Agents

Transcript

1. Readying the Web for Agents Moving from screen-scraping to structured API contracts in the browser. Lucknow Simar Preet Singh Front-end Engineer, Redaptive Inc.
2. Chapter One AI: The clumsy Intern
3. Is your AI just looking at the screen and guessing where to click?
4. Why current web agents fail to scale • Vision Models treat the web like a picture • Slow, expensive, and brittle. • Fail at complex UIs, hover states, and dynamic DOMs. • Custom MCP server treats the web like a backend. • High friction manual installation. • Offers absolutely zero on-the-fly discoverability. ERR: VISION_MODEL ERR: CUSTOM_SERVER
5. Chapter Two WebMCP: Secret Handshake
6. Introducing WebMCP A proposed web standard exposing structured tools for Al agents natively inside existing websites.
7. Introducing WebMCP Discovery Agents query available tolls on the fly as they browse, without pre-installation. A proposed web standard exposing structured tools for Al agents natively inside existing websites.
8. Introducing WebMCP Discovery Agents query available tolls on the fly as they browse, without pre-installation. Schema Explicit JSON definitions for input and expected outputs eliminate model hallucinations. A proposed web standard exposing structured tools for Al agents natively inside existing websites.
9. Introducing WebMCP Discovery Agents query available tolls on the fly as they browse, without pre-installation. Schema Explicit JSON definitions for input and expected outputs eliminate model hallucinations. Discovery Agents maintain a shared, real-time understanding of page context and available resources A proposed web standard exposing structured tools for Al agents natively inside existing websites.
10. How WebMCP routes Agent Intent AI Agent (Gemini, Claude) Chrome Browser Your Web App The agent processes natural language and outputs structured JSON. The browser acts as the mediator. It enforces the contract without exposing the backend The web app executes native logic and updates the UI State. requests tool exposes schema provides structured JSON executes JS/HTML returns state
11. How it works: 2 flavours JavaScript or HTML Chapter Three
12. Selecting your implementation path Imperative API Declarative API (JavaScript) (HTML) • Use registerTool(). • Best for complex logic, dynamic SPAs, and fetching custom backend APIs. • Registered and unregistered dynamically based on page state. • Use <form> annotation. • Best for standard web forms, simple search inputs and basic CRUD. • The browser automatically translates DOM elements. Shared Benefit: Both Generate the exact same JSON schemas for the AI agents under the hood.
13. Registering complex logic with JS
14. Transforming HTML forms into agent tools HTML Source <form toolname=”my_tool” tooldescription=”A simple declarative tool”> <select name=”select” required toolparamdescription=”A nice description”> </form> Computed Schema { ‘name’: ‘my_tool’, ‘description’: ‘A simple declarative tool’, ‘parameters’: { ‘type’: ‘object’, ‘select’: { description: ‘A nice description’, }, ‘required’: [‘select’], } }
15. Transforming HTML forms into agent tools HTML Source <form toolname=”my_tool” tooldescription=”A simple declarative tool”> <select name=”select” required toolparamdescription=”A nice description”> </form> Computed Schema { ‘name’: ‘my_tool’, ‘description’: ‘A simple declarative tool’, ‘parameters’: { ‘type’: ‘object’, ‘select’: { description: ‘A nice description’, }, ‘required’: [‘select’], } }
16. Chapter Four Live Demo
17. Pro-tips Chapter Five
18. Rules for writing effective tool contracts Antipatterns vs Best Practices ❌ Negative Limits: “Do no use for weather”. ✅ Positive Descriptions: “This tool creates calendar events”. ❌Forcing AI Math: Requiring the agent to calculate minutes from midnight. ✅Accept Raw Inputs: Accept user-native strings like ‘11:00’ and ‘15:00’. ❌Strict Schema Loose Coding: Not having proper validation in the code logic. ✅Strict Code, Loose Schema: Validate in logic and return descriptive text errors so that model can self correct. ❌Fragmented Tooling: Exposing add_blue_shirt and add_red_shirt separately. ✅Composable Functions: Exposing one unified add_shirt(color) tool.
19. Current Constraints and Developer Overhead Browsing Context Required There is no headless execution yet. A browser tab or webview must be open and visible for javascript tools to execute. Strict UI Scyncroization Developer must ensure the UI updates to reflect the tool call. The AI and Human user must always see the exact same page state. Zero Built in Discoverability Search engine cannot crawl dynamically registered tools yet. Agents only know your tools exist after they visit the page.
21. Thank you @programmersingh