Oggi, quando un agente AI prova a utilizzare un sito web, assomiglia a un gelataio che serve i clienti con una forchetta!
Immagina cosa succede: l’agente legge ciò che compare sullo schermo, cerca di indovinare quale pulsante cliccare, lo clicca e rilegge la pagina per verificare se ha funzionato e così via. Possiamo dire che va avanti a tentativi e potrebbe sbagliare molto facilmente.
Ma se potessimo permettergli di interagire direttamente con le funzionalità del sito, senza costringerlo a interpretare ogni volta l’interfaccia?
È qui che entra in gioco WebMCP.
WebMCP permette di esporre le funzionalità di una pagina web agli agenti AI compatibili sotto forma di strumenti, ciascuno con un nome, una descrizione e parametri strutturati. Invece di cercare di capire dove cliccare, l’agente può richiamare direttamente lo strumento che gli interessa.
Ho sperimentato questa tecnologia sul progetto La Bottega del Gelato, sviluppato con NextJS. In questo modo l’utente può chiedere di consultare il catalogo, filtrare le torte in base agli ingredienti oppure ordinare una torta compilando il form.
Per ottenere questo risultato ho utilizzato due approcci: l’API dichiarativa di WebMCP, direttamente nel form HTML, e l’API Javascript per esporre le altre funzionalità dell’applicazione.
Nel progetto è presente un form per ordinare una torta. WebMCP permette di descrivere un form attraverso alcuni attributi HTML, senza dover creare un’interfaccia dedicata agli agenti.
<form
toolname="prepare_cake_order"
tooldescription="Compila la richiesta per la torta {productName}. L’utente controlla i dati, gestisce il consenso, reCAPTCHA e conferma l’apertura di WhatsApp. Il messaggio non viene inviato dal sito."
>
<label for="customer">Nome</label>
<input
id="customer"
type="text"
name="customerName"
toolparamdescription="Nome della persona che richiede la torta, massimo 100 caratteri."
/>
<label for="date">Data ordinazione</label>
<input
id="date"
type="date"
name="pickupDate"
aria-label="Data ordinazione"
toolparamdescription="Data locale di ritiro nel formato YYYY-MM-DD, da oggi fino a un anno. Aggiorna il calendario esistente."
/>
<label for="time">Orario ordinazione</label>
<input
id="time"
type="time"
name="pickupTime"
toolparamdescription="Ora locale di ritiro nel formato HH:mm, con formato a 24 ore."
required
/>
<label for="ingredients">Modifiche ingredienti</label>
<textarea
id="ingredients"
name="ingredientChanges"
toolparamdescription="Modifiche richieste agli ingredienti, massimo 1000 caratteri. Facoltativo."
>
</textarea>
<button type="submit">Continua su WhatsApp</button>
</form>Nel form dell’ordine ho aggiunto i seguenti attributi HTML:
Esiste anche toolautosubmit, che permette di inviare automaticamente un form senza richiedere il clic dell’utente. Nel progetto ho preferito che l’utente potesse verificare i dati, gestire il consenso e il reCAPTCHA e decidere se proseguire su WhatsApp. Il messaggio viene precompilato, ma è l’utente a inviarlo.
Tutti questi attributi vengono ignorati dai browser che non li supportano, così il sito continua a funzionare normalmente.
Per tutte le azioni che non sono form ho utilizzato una libreria per React, consigliata da WebMCP, usewebmcp.
La libreria espone un hook chiamato useWebMCP, che semplifica la registrazione e la gestione del ciclo di vita degli strumenti in React. Infatti si occupa della pulizia della registrazione e dell’integrazione con il ciclo di vita dei componenti di React.
Ecco un esempio reale, semplificato, utilizzato per la navigazione tra i menu della "La Bottega del Gelato":
useWebMCP({
name: "show_menu",
description:
"Open the ice cream, cake or dessert menu in the current language.",
inputSchema: {
type: "object",
properties: { category: { type: "string", enum: Object.keys(MENU) } },
required: ["category"],
additionalProperties: false,
},
execute: ({ category: requested }) => {
if (typeof requested !== "string" || !Object.hasOwn(MENU, requested))
return { error: "Unknown menu category." };
const path = MENU[requested as keyof typeof MENU].path;
router.push(path);
return { status: "navigation_started", url: localizedPath(path) };
},
});Lo strumento si chiama show_menu e accetta un parametro category, limitato alle categorie disponibili. Quando l’agente richiede un menu, il codice verifica che la categoria sia valida, recupera il percorso corrispondente e avvia la navigazione tramite il router di React.
La parte interessante è che l’agente utilizza la logica già presente nell’applicazione, invece di dover simulare una sequenza di clic sull’interfaccia. In più non ho dovuto creare un nuovo sistema di navigazione dedicato all’AI, ma ho riutilizzato quello già presente.
Internalmente, la libreria si appoggia all’API sperimentale del browser:
document.modelContext.registerTool(...)Attraverso la registrazione possiamo definire il nome dello strumento, la descrizione, lo schema degli input e la funzione execute che esegue l’operazione richiesta.
Essendo una tecnologia sperimentale, il supporto dipende dall’ambiente in cui viene eseguita la pagina. Per provare l’integrazione localmente ho utilizzato l’estensione webmcp-extension, che consente di testare un agente capace di individuare e richiamare gli strumenti esposti dal sito.
Mentre sperimentavo questa integrazione, ho iniziato a immaginare diversi scenari pratici: consultare un menu ("Mostrami tutte le torte al pistacchio"), compilare un form ("Ordina la torta per sabato alle 16:00") e persino migliorare l'accessibilità!
Interagire con un sito attraverso un agente e un prompt vocale potrebbe semplificare alcune operazioni per chi incontra difficoltà nell'utilizzo delle interfacce tradizionali.
Questa esperienza mi ha fatto riflettere su un aspetto dello sviluppo web che probabilmente diventerà sempre più importante.
Per anni le interfacce sono state progettate pensando a come una persona avrebbe letto i contenuti, individuato i comandi e completato un’operazione.
Con gli agenti AI si potrebbe aggiungere un secondo livello: non solo rendere l’interfaccia comprensibile a chi la utilizza, ma anche esporre in modo esplicito le azioni che è possibile compiere, i parametri necessari e i risultati attesi.
Per adesso, WebMCP è ancora sperimentale, quindi è presto per conoscere quanto diventerà diffuso e quali forme assumerà. Ma il principio mi sembra molto interessante: non obbliga l’agente a indovinare come funziona il sito, quando possiamo spiegarglielo attraverso strumenti ben definiti.
A questo punto la domanda è questa: le interfacce del futuro dovranno parlare soltanto con gli utenti o anche con gli agenti AI?