WebMCP: il Web diventa "Agente-abile"

Pubblicato da

  

Per anni, l'automazione web è stata un esercizio di fragilità. Dallo scraping basato su selettori CSS capricciosi alla simulazione di input utente tramite strumenti come Playwright o Selenium, il rapporto tra software e web è sempre stato mediato da un "hackeraggio" dell'interfaccia pensata per gli umani.

Con l'introduzione di WebMCP (proposto da Google come standard per l'interazione tra modelli AI e il browser), cambiamo paradigma: stiamo passando dal Web "da leggere" al Web "da eseguire".

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

Il cambio di paradigma: dal DOM-parsing alla chiamata di funzione

Fino ad oggi, un agente AI che voleva interagire con un sito web doveva "guardare" la pagina (es. fare una serie di screenshot), tentare di interpretare la struttura del DOM, indovinare quale <div> fosse un bottone e sperare che il layout non cambiasse tra una sessione e l'altra.

WebMCP (Model Context Protocol per il Web) introduce un contratto standardizzato. Invece di costringere l'AI a indovinare, lo sviluppatore web espone le funzionalità del sito come "Tools" direttamente nel contesto del browser. Il browser agisce come orchestratore, garantendo un'interfaccia sicura, semantica e prevedibile tra l'applicazione web e l'agente AI.

Immagine creata da https://developer.chrome.com/blog/ai-webmcp-origin-trial


Architettura e Funzionamento

WebMCP non è una semplice API. Si basa su una separazione netta tra la logica di presentazione (UI) e la logica di esecuzione (Tool).

1. La Dichiarazione dei Tool

Lo sviluppatore definisce i tool utilizzando un'interfaccia JavaScript nativa nel browser. Ogni tool è descritto da:

  • Nome e Descrizione: Fondamentali affinché l'LLM possa comprendere quando e come utilizzarlo:
    • toolname
    • tooldescription
    • toolparamdescription
    • toolName

    <form toolname="supportRequestTool"
    tooldescription="Submit a request for support."
    action="/submit">

    <label for="firstName">First Name</label>
    <input type=text name=firstName>

    <label for="lastName">Last Name</label>
        <input type=text name=lastName>

    <select name="select" required 
       toolparamdescription="Determines what team this request is routed to.">
       <option value="Customer happiness team">Return my purchase.</option>
       <option value="Distribution team">Check where my package is.</option>
       <option value="Website support team">Get help on the website.</option>
    </select>

    <button type=submit>Submit</button>
</form>
    Sorgente codice: https://developer.chrome.com/docs/ai/webmcp/declarative-api
  • Schema dei parametri: Utilizza JSON Schema per definire input rigorosi, riducendo drasticamente le allucinazioni sui parametri. 
    await document.modelContext.registerTool({
  name: "filter-templates",
  description: "Filters the list of templates based on a natural language visual description.",
  inputSchema: {
    type: "object",
    properties: {
      description: { type: "string", description: "A visual description of templates to show." }
    },
    required: ["description"]
  },
  execute({ description }) {
    filterTemplatesInUI(description);
  }
});
    Sorgente codice: https://github.com/webmachinelearning/webmcp?tab=readme-ov-file

2. Il Ciclo di Vita dell'Esecuzione

  1. Discovery: L'agente interroga la pagina per scoprire quali tool sono esposti via WebMCP.
  2. Negotiation: Il browser verifica le autorizzazioni.
  3. Execution: L'agente invoca il tool. Il browser esegue la funzione JavaScript definita nel contesto della pagina, garantendo che lo stato (cookies, sessione, autenticazione) sia gestito correttamente.
  4. Feedback: Il risultato viene restituito all'agente in formato strutturato, pronto per essere elaborato ulteriormente.

La Sicurezza: L'Isolamento come pilastro

Uno dei timori maggiori è: "Un agente può fare acquisti a mio nome o cancellare il mio account?".

WebMCP è stato progettato con la sicurezza al centro. A differenza di un'estensione browser invasiva, WebMCP opera sotto le stringenti Permissions Policy del browser. L'accesso ai tool è vincolato alla Origin e richiede un consenso esplicito dell'utente. Il browser funge da gatekeeper: l'agente non "prende il controllo" del sito, ma esegue solo le funzioni che il sito ha esplicitamente autorizzato a esporre.


Lo stato dell'arte e l'impatto sul Web Development

Siamo in una fase di Origin Trial. Non è più un esercizio teorico, ma una tecnologia che sta definendo come le applicazioni web si integreranno con l'intelligenza artificiale di nuova generazione.

Per uno sviluppatore, questo significa:

  • Meno codice "Glue": Non servono più backend complessi solo per esporre azioni semplici.
  • Testabilità: Poiché le interazioni sono basate su API standard, è possibile scrivere unit test per i tool esposti, garantendo che l'agente si comporti sempre come previsto.
  • User Experience AI-Native: È possibile creare flussi in cui l'AI aiuta l'utente nel completamento di task complessi (es. configurazione di un prodotto, compilazione di form multi-step) in modo fluido e trasparente.

Conclusione

WebMCP rappresenta la naturale evoluzione del web. Se il passaggio dai siti statici alle SPA (Single Page Application) ha reso il web interattivo per gli umani, WebMCP rende il web operativo per le macchine.

Per gli sviluppatori, la sfida non è più solo costruire interfacce belle, ma definire interfacce robuste per agenti. Il sito web del futuro non è fatto solo di HTML e CSS, ma di un set ben documentato di tool pronti a collaborare con l'AI.


Riferimenti



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment