Utilizza il riquadro WebMCP in Chrome DevTools per ispezionare, eseguire il debug e testare gli strumenti AI lato client che il tuo sito web espone agli agenti AI. Il riquadro fornisce una visibilità end-to-end completa del ciclo di vita dello strumento, inclusi la registrazione, la convalida dello schema e la cronologia delle chiamate.
Apri il riquadro WebMCP
Il riquadro WebMCP si trova all'interno del riquadro Applicazione. Per aprirlo, segui questi passaggi:
- Apri Chrome DevTools in una pagina che utilizza gli strumenti WebMCP.
- Fai clic sulla scheda Applicazione.
- Nel livello superiore della barra laterale, seleziona il riquadro WebMCP.
Panoramica dell'interfaccia
Il riquadro WebMCP utilizza un layout a doppio riquadro per aiutarti a gestire e monitorare gli strumenti:
- Strumenti chiamati:un log cronologico delle interazioni tra l'agente AI e la pagina.
- Strumenti disponibili:un elenco live di tutti gli strumenti WebMCP rilevati nella scheda attiva.
Strumenti disponibili
La sezione Strumenti disponibili mostra i nomi e le descrizioni degli strumenti così come appaiono all'agente AI. Include anche un contatore di chiamate per ogni strumento, che mostra quante volte è stato chiamato uno strumento durante la sessione corrente.
Strumenti chiamati
Il log Strumenti chiamati fornisce una registrazione permanente delle interazioni con gli strumenti. Quando selezioni una voce nel log, puoi esaminare i seguenti dettagli:
- Stato:il risultato della chiamata (completato, annullato, in corso o errore).
- Input:i parametri esatti che l'agente ha previsto e inviato allo strumento.
- Output:il valore restituito o il messaggio di errore fornito dallo strumento.
Filtra il log
Utilizza la barra Filtra per restringere l'elenco degli strumenti chiamati in base ai seguenti criteri:
- Nome o descrizione:inserisci il testo per trovare gli strumenti che corrispondono a un nome o a uno scopo specifico.
- Tipo di stato:filtra le chiamate in base al loro stato attuale, ad esempio Completato, Errore, Annullato o In corso.
- Tipo di strumento:seleziona per filtrare gli strumenti dichiarativi definiti in HTML e gli strumenti imperativi definiti in JavaScript. Per visualizzare tutti i tipi di strumenti, assicurati che nessuno dei filtri sia attivo.
Testare gli strumenti manualmente
Puoi ignorare la logica decisionale dell'agente AI per testare l'affidabilità dello strumento in modo indipendente. Questa opzione è utile per verificare la logica delle funzioni senza attendere un prompt specifico dell'agente.
Nell'elenco Strumenti disponibili, fai clic sullo strumento che vuoi testare. In alternativa, nel log Strumenti chiamati, passa il mouse sopra uno strumento per visualizzare l'icona Riproduci (➜) e fai clic su di essa. Si apre l'area di test manuale.
Nell'area di test manuale, inserisci o modifica i parametri nei campi di immissione.
Fai clic su Esegui strumento.
Risolvere i problemi di integrazione
Il riquadro WebMCP ti aiuta a diagnosticare gli errori di integrazione comuni:
- Violazioni dello schema:il riquadro di output mostra i messaggi di errore se i parametri dello strumento o i valori restituiti non corrispondono allo schema definito.
- Rifiuto dell'agente:controlla il contatore di chiamate nell'elenco Strumenti disponibili per vedere se l'agente ha mai considerato il tuo strumento per un determinato prompt.
Automazione e agenti
WebMCP è progettato per il web agentico, in cui gli agenti AI possono scoprire e interagire con gli strumenti del tuo sito. Per lo sviluppo assistito da agenti, il Chrome DevTools per agenti progetto fornisce un'interfaccia specializzata che utilizza questo protocollo per aiutare gli agenti AI a testare e utilizzare i tuoi strumenti WebMCP.
Flag della riga di comando
Gli strumenti WebMCP in Chrome DevTools per agenti (list_webmcp_tools e execute_webmcp_tool) sono disattivati per impostazione predefinita. Per attivarli, aggiungi il flag --categoryExperimentalWebmcp agli argomenti del server:
"args": ["chrome-devtools-mcp@latest", "--categoryExperimentalWebmcp"]
Per altre opzioni, vedi Configurazione.
Risorse correlate
Per saperne di più su WebMCP e sul web agentico, consulta le seguenti risorse: