Integrare WebMCP nativo (W3C Draft) in Joomla con Convert Forms

webmcp-joomla-convertform.md

Integrare WebMCP nativo (W3C Draft) in Joomla con Convert Forms

Questo Gist mostra come trasformare un normale form di contatto Joomla (creato con Convert Forms) in uno strumento ("Tool") utilizzabile direttamente da un'Intelligenza Artificiale, sfruttando le nuove specifiche sperimentali del Draft W3C per WebMCP (Model Context Protocol).

Tramite questa implementazione, un Agente AI (es. Claude o Gemini) può leggere la pagina, compilare i campi del form, spuntare la privacy e cliccare su "Invia" in totale autonomia, agendo per conto dell'utente.

⚠️ Prerequisiti

• Joomla 4/5/6 con l'estensione Convert Forms.
• Un browser con l'API nativa sperimentale navigator.modelContext abilitata (vedi sezione test).
• Consiglio importante: Disabilitate Google reCAPTCHA v3 sul form se volete farlo usare all'AI (Google bloccherà l'invio perché l'AI non muove il mouse). Usate i campi Honeypot integrati di Convert Forms.

---

💻 1. Il Codice JavaScript (Template Generico)

Questo è il codice boilerplate. Utilizza l'oggetto navigator.modelContext per registrare il form come strumento.

document.addEventListener("DOMContentLoaded", function() {
    // 1. Verifichiamo che il browser supporti la nuova API nativa W3C
    if ('modelContext' in navigator) {
        
        navigator.modelContext.registerTool({
            name: 'compila_form_contatto',
            description: 'Usa questo strumento per compilare e inviare il form di contatto',
            
            // 2. Definiamo il JSON Schema dei dati che l'AI deve fornirci
            inputSchema: {
                type: "object",
                properties: {
                    nome: { type: "string", description: "Nome o ragione sociale dell'utente" },
                    email: { type: "string", description: "Indirizzo email valido" },
                    messaggio: { type: "string", description: "Testo della richiesta" }
                },
                required: ["nome", "email", "messaggio"]
            },
            
            // 3. La logica di esecuzione (Mappatura dati -> DOM)
            execute: async function(input, client) {
                try {
                    // Sostituisci questi ID con quelli reali del tuo form
                    document.querySelector('#tuo_campo_nome').value = input.nome || '';
                    document.querySelector('#tuo_campo_email').value = input.email || '';
                    document.querySelector('#tuo_campo_messaggio').value = input.messaggio || '';
                    
                    // Spunta obbligatoria della Privacy Policy (modifica l'ID)
                    document.querySelector('#tuo_campo_privacy').checked = true;

                    // Simula il click sul tasto Submit (modifica l'ID del form)
                    document.querySelector('#tuo_form button[type="submit"]').click();

                    return { 
                        success: true, 
                        message: "I dati sono stati inseriti e il form è stato inviato con successo!" 
                    };
                    
                } catch (error) {
                    return { 
                        success: false, 
                        error: "Errore durante la compilazione del form: " + error.message 
                    };
                }
            }
        });
        
        console.log("WebMCP: Tool di contatto registrato nativamente con successo.");
        
    } else {
        console.warn("WebMCP: Il browser in uso non supporta ancora navigator.modelContext.");
    }
});

---

🛠️ 2. Come inserire il codice in Convert Forms

Non è necessario modificare i file del template di Joomla. Convert Forms ha un'area dedicata:

1. Vai su Componenti -> Convert Forms -> Forms.
2. Apri il form che vuoi automatizzare.
3. Vai in Settings (Impostazioni) -> Custom Code (Codice Personalizzato).
4. Incolla lo script nel box Custom Javascript.
5. Salva e chiudi. Lo script verrà caricato solo nella pagina in cui è presente il form!

---

🤖 3. Il trucco furbo: Fatti scrivere il codice mappato dall'AI

I form di Joomla generano spesso ID dinamici o complessi (es. #form1_privacy-policy_0). Invece di cercare i selettori document.querySelector a mano nel codice sorgente, usa questo trucco!

Apri ChatGPT, Claude o Gemini e usa questo prompt:

"Voglio creare uno script WebMCP nativo (navigator.modelContext.registerTool) per automatizzare la compilazione di un form.

Ecco l'HTML del form generato dalla mia pagina web:

[INCOLLA QUI IL CODICE SORGENTE HTML DEL TUO FORM]

Scrivimi il codice JavaScript completo. Analizza l'HTML per trovare gli ID esatti dei campi input, della checkbox della privacy e del bottone di submit, e inseriscili nei document.querySelector dentro la funzione execute."

L'AI ti restituirà il codice esatto e millimetrico, pronto da incollare in Convert Forms.

---

🚀 4. Come testarlo su Chrome

Essendo un'API ancora in fase di Draft, per testare il funzionamento direttamente nel browser è necessario abilitare un flag sperimentale e usare un'estensione dedicata:

1. Abilita le API sperimentali: Digita nella barra degli indirizzi chrome://flags/#enable-webmcp-testing, imposta il flag su Enabled e riavvia Chrome.
2. Installa l'estensione: Cerca e installa l'estensione Chrome "WebMCP - Model Context Tool Inspector".
3. Configura l'AI: Apri l'estensione e inserisci una API Key valida (ad esempio di Gemini tramite Google AI Studio).
4. Fai la magia: Vai sulla pagina del tuo sito dov'è presente il form e apri l'estensione WebMCP.
5. Lancia un prompt naturale, ad esempio: "Usa lo strumento a tua disposizione per inviare una richiesta di contatto a nome di Mario Rossi, email mario@test.com. Scrivi che ha bisogno di un preventivo."
6. Guarda l'AI che richiama il tool, compila il form e preme invio per te in una frazione di secondo!