WebMCP demistificato: rendere il tuo sito pronto per gli agenti in e-commerce e CMS

Gli agenti IA stanno diventando una parte reale di come le persone interagiscono con il web. Cercano prodotti, compilano moduli, prenotano appuntamenti e completano acquisti, il tutto navigando i siti web al posto tuo. Ma c'è un problema di fondo: i siti web sono costruiti per gli esseri umani, non per le macchine.

Un agente IA che guarda il tuo sito e-commerce vede un ammasso di div, pulsanti e moduli. Deve indovinare cosa fa ogni elemento, il che porta a interazioni lente e soggette a errori. WebMCP risolve questo permettendoti di dire agli agenti esattamente cosa sa fare il tuo sito, in un linguaggio che capiscono.

WebMCP è un nuovo standard del browser (attualmente in origin trial, Chrome 149+) che ti permette di esporre le funzionalità del tuo sito come "strumenti" strutturati per gli agenti IA. Nessuna modifica al backend, nessuna API separata. Solo il tuo sito esistente, reso amichevole per gli agenti.

In questo articolo spieghiamo cos'è WebMCP, cosa abilita per i siti e-commerce e CMS, e come puoi iniziare a usarlo, che tu sia uno sviluppatore o il titolare di un sito.

Cos'è WebMCP?

WebMCP (Web Model Context Protocol) è uno standard W3C proposto che fornisce due API complementari per registrare strumenti su una pagina web:

• L'API imperativa: registrazione di strumenti basata su JavaScript tramite document.modelContext.registerTool()
• L'API dichiarativa: annotazioni con attributi HTML su elementi <form> esistenti (toolname, tooldescription, toolparamdescription)

Entrambe le API servono allo stesso scopo: rendono le capacità del tuo sito individuabili ed eseguibili dagli agenti IA che girano nel browser (l'agente integrato di Chrome, estensioni del browser o altre piattaforme di agenti).

Come funziona

┌─────────────────────────────────────────────┐
│              Web Browser                     │
│  ┌───────────────────────────────────────┐  │
│  │  Running Page (your website)          │  │
│  │  ┌─────────────────────────────────┐  │  │
│  │  │  WebMCP Tools                   │  │  │
│  │  │  - search_products()            │  │  │
│  │  │  - add_to_cart()                │  │  │
│  │  │  - submit_order()               │  │  │
│  │  └─────────────────────────────────┘  │  │
│  └───────────────────────────────────────┘  │
│              │                               │
│  Browser AI Agent                           │
└──────────────┼───────────────────────────────┘
               │
    Agent invokes tools → UI updates visibly

La differenza chiave rispetto alle integrazioni backend tradizionali (come i server MCP) è che gli strumenti WebMCP girano dentro la scheda del browser, sulla pagina che l'utente sta già guardando. L'agente agisce sul DOM live, nella sessione dell'utente, con pieno accesso a cookie, stato di autenticazione e dati in tempo reale.

Cosa abilita WebMCP per l'e-commerce

Ricerca e scoperta dei prodotti

Invece che un agente scorra centinaia di pagine prodotto cercando ciò che corrisponde alla richiesta di un utente, uno strumento search_products ben definito permette all'agente di interrogare direttamente il tuo catalogo:

await document.modelContext.registerTool({
  name: "search_products",
  description: "Search the product catalog by category, price range, and features.",
  inputSchema: {
    type: "object",
    properties: {
      category: { type: "string", description: "Product category" },
      max_price: { type: "number", description: "Maximum price in EUR" },
      features: {
        type: "array",
        items: { type: "string" },
        description: "Required features, e.g. ['organic', 'gluten-free']"
      }
    },
    required: ["category"]
  },
  async execute({ category, max_price, features }) {
    const results = await fetch(`/api/products?category=${category}&max_price=${max_price}&features=${features.join(",")}`);
    return results.json();
  }
});

Un utente può poi dire: "Trovami alimenti biologici per bambini sotto i 5 € per il mio bambino di 1 anno", e l'agente chiama direttamente il tuo strumento, restituendo risultati strutturati che la tua UI sa già mostrare.

Flussi di checkout e acquisto

Gli strumenti WebMCP possono guidare gli agenti attraverso percorsi di checkout complessi:

Questo è particolarmente prezioso per gli acquisti ripetuti. Un utente che chiede "Riordina i chicchi di caffè che ho comprato il mese scorso" può essere servito da uno strumento get_order_history() che restituisce gli ordini passati, seguito da add_to_cart() e submit_order().

Assistenza clienti

I flussi di assistenza complessi (richieste di garanzia, resi, cambi) richiedono spesso di navigare più pagine e moduli. Gli strumenti WebMCP possono:

• navigare alla pagina di assistenza corretta (start_claim_process())
• precompilare i campi noti (populate_product_details())
• inviare il modulo completato (submit_claim())

L'utente vede il modulo compilarsi in tempo reale sul suo schermo, mantenendo fiducia e visibilità.

Cosa abilita WebMCP per il CMS

Ricerca e recupero dei contenuti

Un sito basato su CMS può esporre ricerca e filtraggio come strumenti:

await document.modelContext.registerTool({
  name: "search_articles",
  description: "Search articles by topic, date, author, or keywords.",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "Search query" },
      category: { type: "string", description: "Article category" },
      date_from: { type: "string", description: "Start date (YYYY-MM-DD)" },
      date_to: { type: "string", description: "End date (YYYY-MM-DD)" }
    },
    required: ["query"]
  },
  async execute({ query, category, date_from, date_to }) {
    // Query your CMS search index
    return await cmsSearch({ query, category, date_from, date_to });
  }
});

Interazioni basate su moduli

I siti CMS hanno spesso moduli di contatto, iscrizioni alla newsletter, registrazioni a eventi e sistemi di prenotazione. L'API dichiarativa ti permette di trasformarli in strumenti WebMCP con pochi attributi HTML, senza JavaScript.

<form
  toolname="book_event"
  tooldescription="Register for a public event at our venue."
  toolautosubmit
>
  <label for="name">Full Name</label>
  <input name="name" type="text"
    toolparamdescription="Attendee's full name" required />

  <label for="email">Email</label>
  <input name="email" type="email"
    toolparamdescription="Contact email address" required />

  <label for="date">Event Date</label>
  <input name="date" type="date"
    toolparamdescription="Date of the event" required />

  <label for="guests">Number of Guests</label>
  <select name="guests"
    toolparamdescription="Number of attendees (1-50)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5+</option>
  </select>

  <button type="submit">Register</button>
</form>

Quando un agente invoca questo strumento, il browser mette a fuoco il modulo, compila i campi e, con toolautosubmit, lo invia automaticamente. L'utente vede tutto accadere sullo schermo.

Filtraggio e navigazione dei contenuti

Per i siti con grandi collezioni di contenuti (portali di notizie, cataloghi, documentazione), gli strumenti di filtraggio permettono agli agenti di restringere i risultati con precisione:

await document.modelContext.registerTool({
  name: "filter_articles",
  description: "Refine article results by reading time, language, or tags.",
  inputSchema: {
    type: "object",
    properties: {
      max_read_time: { type: "number", description: "Maximum reading time in minutes" },
      language: {
        type: "string",
        enum: ["en", "fr", "de", "es"],
        description: "Article language"
      },
      tags: {
        type: "array",
        items: { type: "string" },
        description: "Article tags to include"
      }
    }
  },
  async execute({ max_read_time, language, tags }) {
    // Apply filters to current results
    return applyFilters({ max_read_time, language, tags });
  }
});

Dichiarativa vs imperativa: quale usare?

WebMCP offre due API. Non sono in competizione, sono complementari. Ecco come scegliere.

L'API dichiarativa

Cos'è: Aggiungi attributi HTML a elementi <form> esistenti. Tutto qui. Nessun JavaScript.

Ideale per:

• Moduli che esistono già e funzionano per gli utenti umani
• Moduli di contatto, registrazione, prenotazione, ricerca
• Siti costruiti con piattaforme CMS che generano l'HTML dei moduli
• Vittorie rapide: puoi aggiungere il supporto WebMCP a un sito esistente in pochi minuti

Pro:

• Zero JavaScript richiesto
• Funziona con qualsiasi modulo HTML
• Facile da mantenere accanto al tuo markup esistente
• Ottima per la raccolta di dati semplici e strutturati

Contro:

• Limitata alle interazioni basate su moduli
• Meno controllo sulla logica di esecuzione
• Non può registrare/deregistrare dinamicamente strumenti in base allo stato della pagina
• La generazione dello schema è implicita (basata sulla struttura del modulo)

Usala quando: Il tuo bisogno principale è rendere i moduli accessibili agli agenti. Se le interazioni chiave del tuo sito sono invii di moduli (contatto, prenotazione, ricerca, registrazione), inizia da qui.

L'API imperativa

Cos'è: Chiami document.modelContext.registerTool() da JavaScript, definendo strumenti con nomi, descrizioni, schemi JSON e funzioni execute.

Ideale per:

• Interazioni complesse oltre i moduli (ricerca prodotti, gestione carrello, filtraggio)
• Registrazione dinamica degli strumenti (strumenti che appaiono/scompaiono in base al contesto)
• Strumenti che devono chiamare API, trasformare dati o restituire risultati strutturati
• Siti che richiedono un controllo granulare sul comportamento degli agenti

Pro:

• Pieno controllo sul comportamento degli strumenti e sui valori di ritorno
• Registrazione e deregistrazione dinamiche
• Può chiamare API backend, trasformare dati, restituire JSON
• Ricco supporto agli schemi JSON (enum, tipi, validazione)
• Supporto agli iframe cross-origin con exposedTo

Contro:

• Richiede un'implementazione JavaScript
• Maggiore sforzo di sviluppo
• Deve gestire il ciclo di vita degli strumenti

Usala quando: Le tue interazioni vanno oltre i semplici invii di moduli: cataloghi prodotti e-commerce, filtraggio dinamico, flussi multi-step o qualsiasi scenario in cui devi restituire dati strutturati dall'esecuzione di uno strumento.

Matrice decisionale

Puoi usarle entrambe?

Assolutamente. Un sito ben progettato potrebbe usare l'API dichiarativa per i moduli statici (contatto, newsletter) e l'API imperativa per le interazioni dinamiche (ricerca prodotti, gestione carrello). Coesistono sulla stessa pagina senza conflitti.

WebMCP vs MCP: non concorrenti, ma partner

È importante capire che WebMCP non è un sostituto del Model Context Protocol (MCP). Risolvono problemi diversi:

Pensala così: MCP è il tuo livello di servizio backend: gestisce la logica di business principale, il recupero dei dati e le attività in background. WebMCP è il tuo livello frontend: collega gli agenti direttamente al sito che l'utente sta guardando, abilitando interazioni contestuali nel browser.

Le applicazioni agentiche più efficaci usano entrambe: MCP per il lavoro pesante (dati, autenticazione, logica di business) e WebMCP per l'esperienza interattiva (azione sulla UI, feedback in tempo reale, flussi human-in-the-loop).

Per iniziare

Disponibilità

WebMCP è attualmente disponibile in Chrome 149+ tramite un origin trial. Per partecipare:

1. Registrati all'origin trial nel portale origin trial di Chrome
2. Aggiungi il meta tag dell'origin trial al tuo HTML
3. Implementa i tuoi strumenti con una delle due API

Per lo sviluppo locale, puoi abilitare WebMCP tramite chrome://flags/#enable-webmcp-testing.

Sicurezza

Gli strumenti WebMCP sono vincolati da:

• Isolamento dell'origine: gli strumenti funzionano solo in documenti isolati per origine
• Permissions Policy: la policy tools è impostata su self per impostazione predefinita, disabilitando gli strumenti negli iframe cross-origin se non esplicitamente consentiti con allow="tools"

Gli strumenti sono effimeri: esistono solo finché la pagina è aperta. Una volta che l'utente naviga altrove o chiude la scheda, l'agente perde l'accesso.

Buone pratiche

1. Uno strumento, un compito: ogni strumento dovrebbe svolgere un singolo compito ben definito. Evita strumenti sovrapposti.
2. Nomi chiari: usa verbi che descrivono esattamente cosa succede (create-event invece di start-event-creation-process).
3. Descrizioni positive: descrivi cosa uno strumento può fare, non cosa non può fare.
4. Accetta input grezzi: non chiedere all'agente di fare calcoli o formattare stringhe. Lascia che se ne occupi lo strumento.
5. Valida rigorosamente nel codice, in modo permissivo nello schema: i vincoli dello schema aiutano ma non sono garantiti.
6. Gestisci il ciclo di vita degli strumenti: registra gli strumenti quando sono rilevanti, deregistrali quando non lo sono.
7. Fidati dell'agente: descrivi le capacità, non prescrivere flussi esatti.

Esempi reali

Google ha pubblicato diverse demo che mostrano WebMCP in azione:

• Pizza Maker (imperativa): ordinare una pizza con personalizzazione a livelli
• Flight Search (imperativa, React): cercare voli con filtri complessi
• Le Petit Bistro (dichiarativa): modulo di prenotazione al ristorante con annotazioni HTML

Queste demo mostrano le due API fianco a fianco e sono un ottimo punto di partenza per sperimentare.

E adesso?

WebMCP è ancora in sviluppo attivo. La specifica viene affinata su GitHub, e l'implementazione di Chrome è soggetta a cambiamenti. Anche Angular ha un supporto sperimentale per la registrazione degli strumenti WebMCP.

Per gli sviluppatori che costruiscono piattaforme e-commerce, soluzioni CMS o qualsiasi applicazione web in cui gli agenti IA devono interagire con pagine rivolte all'utente, WebMCP rappresenta un cambiamento fondamentale: invece che gli agenti indovinino come funziona il tuo sito, il tuo sito dice loro esattamente cosa sa fare.

Il risultato sono interazioni più rapide, più affidabili e più trasparenti, con l'utente sempre al controllo.

Questo articolo si basa sulla documentazione ufficiale per sviluppatori di Chrome, sulla specifica W3C WebMCP e sulle demo WebMCP di Google. WebMCP è uno standard proposto e soggetto a cambiamenti.