peek-cli: Il Tool che Regala Agli Agenti AI la Visione Completa del Browser
peek-cli: Gli Agenti AI Ora Possono Guardare Nel Tuo Browser
Scommetto che anche tu ti sei scontrato con questo problema. Stai usando un assistente AI per scrivere codice e va tutto liscio finché non devi capire perché qualcosa non funziona. L'agente genera codice, propone modifiche, ma non ha la più pallida idea di cosa stia succedendo davvero nel browser. Opera praticamente bendato.
Ecco, peek-cli nasce per risolvere esattamente questo.
Cos'è peek-cli?
Si tratta di uno strumento open source, firmato da puffinsoft, che apre una finestra — anzi, un vero e proprio oblò — tra il tuo browser e gli agenti AI con cui lavori.
Grazie a peek-cli, un agente di coding può:
- Scattare screenshot di quello che appare sullo schermo
- Esplorare il DOM in tempo reale
- Tenere d'occhio le richieste di rete
- Leggere output della console e log degli errori
- Interagire con gli elementi della pagina in modo programmatico
Non è roba da poco, eh. Non stiamo parlando solo di screenshot. Qui si parla di dare agli agenti AI una consapevolezza visiva e funzionale che cambia completamente le carte in tavola.
Perché Dovrebbe Importarti
Il bello (e il difetto) degli assistenti AI tradizionali è che ragionano sul codice, ma non vedono mai il risultato. Prendi un componente React che fa le bizze. L'AI ti suggerisce una modifica basandosi su pattern che conosce, ma non può verificare se quella modifica risolve davvero il problema.
Con peek-cli entra in gioco un circolo virtuoso:
- L'agente apre l'applicazione nel browser
- Fa uno screenshot per vedere lo stato attuale
- Individua il bug visivo con i suoi occhi
- Legge gli errori in console e le richieste fallite
- Propone correzioni mirate basate su quello che ha osservato
- Verifica il fix confrontando screenshot prima e dopo
Insomma, debugging basato sulla realtà, non sulle supposizioni.
Casi Pratici Dove Fa la Differenza
Testing Visivo Automatizzato
Immagina una pipeline CI/CD con un agente AI che esegue i tuoi test, vede quali falliscono e — dettaglio cruciale — guarda effettivamente il rendering per capire le regressioni visive. Niente più "boh, perché questo CSS ha rotto qualcosa a tre componenti di distanza".
Generazione di Codice Context-Aware
L'assistente AI apre la tua app, naviga fino a una pagina specifica, guarda come è fatta l'interfaccia esistente e genera componenti che si integrano perfettamente col tuo design system. Non si limita a leggere la documentazione della tua libreria: vede come viene usata davvero.
Debugging Intelligente
Dimentica lo scambio di messaggi dove descrivi errori e l'AI cerca di indovinare. Ora l'agente può guardare direttamente. "Ok, vedo che il bottone ha un problema di z-index ed è finito dietro al backdrop del modal."
Come Iniziare
Il progetto è su GitHub e si integra con i framework AI più diffusi. Installarlo è questione di un attimo:
npm install -g peek-cli
peek-cli --help
La CLI offre comandi per catturare screenshot, ispezionare elementi e stabilire connessioni con agenti che supportano il protocollo peek.
Verso Dove Andiamo
Questo strumento è un assaggio di quello che ci aspetta. I prossimi agenti AI non si limiteranno a leggere e scrivere codice: avranno una vera consapevolezza dell'ambiente in cui operano. Vedranno quello che vedi tu, capiranno il contesto visivamente e ti daranno supporto ancorato nella realtà, non nel vuoto.
Che tu stia costruendo pipeline di testing automatizzato, sviluppando estensioni AI per IDE, o semplicemente cercando un debugging più smart, peek-cli è un passo concreto in questa direzione.
Tu hai già provato peek-cli o strumenti simili? Raccontami nei commenti come la consapevolezza visiva sta cambiando il tuo modo di lavorare con gli agenti AI.