Skip to main content
Un mod può disegnare la propria interfaccia in Claude Code e modificare parti dell’interfaccia che Claude Code già disegna. Ogni posizione in cui un mod può disegnare è chiamata punto di rendering, ad esempio un riquadro, la fascia sopra il prompt o lo spinner. Claude Code attiva l’evento ui.render ogni volta che sta per disegnare un punto di rendering, e il tuo hook per quell’evento restituisce cosa disegnare lì. Questa mappa mostra dove un mod può disegnare in una sessione del terminale: Mappa di una sessione del terminale di Claude Code con il rendering a schermo intero. Un mod può aggiungere un riquadro come barra laterale a destra, un toast in alto a destra della trascrizione, una riga di log nella trascrizione, una fascia sopra il prompt e una riga di stato sotto il prompt. Un mod può ridisegnare i messaggi, le righe delle chiamate agli strumenti e lo spinner. Il prompt appartiene a Claude Code. Mappa di una sessione del terminale di Claude Code con il rendering a schermo intero. Un mod può aggiungere un riquadro come barra laterale a destra, un toast in alto a destra della trascrizione, una riga di log nella trascrizione, una fascia sopra il prompt e una riga di stato sotto il prompt. Un mod può ridisegnare i messaggi, le righe delle chiamate agli strumenti e lo spinner. Il prompt appartiene a Claude Code. In un terminale più stretto, il riquadro si trova sopra il prompt anziché accanto alla trascrizione. Crea il tuo primo mod prima di iniziare da qui. Comincia con l’esempio pratico, che crea un riquadro con due schede e un contatore, poi leggi la sezione relativa a ciascun elemento che vuoi modificare.
Per consultare una singola prop o un limite, vedi il riferimento.

Crea un pannello con schede

In questa sezione crei un mod che aggiunge un comando /hello-tabs, e il comando apre un pannello. Un pannello è una barra laterale accanto alla trascrizione in un terminale ampio a schermo intero, oppure un’area incorniciata sopra il prompt negli altri casi. Questo pannello mostra due schede, e la seconda scheda ha un pulsante che aggiunge uno a un contatore. Il conteggio è ancora lì dopo che riavvii Claude Code. Il mod finito ha questo aspetto. La registrazione apre il pannello, passa alla seconda scheda, preme il pulsante alcune volte e torna alla prima scheda:
Le schede sono due pulsanti in fila. Il mod tiene traccia di quale sia attiva e disegna il contenuto di quella scheda sotto la fila.
1

Crea il plugin

Un mod è un plugin con un manifest, un hooks.json che punta al tuo codice, e il file di codice. Crea un mod spiega ciascuno di essi. Crea una directory chiamata hello-tabs con le directory .claude-plugin e hooks al suo interno, poi salva i primi due file.Salva il manifest come hello-tabs/.claude-plugin/plugin.json:
hello-tabs/.claude-plugin/plugin.json
Indica il tuo punto di ingresso in hello-tabs/hooks/hooks.json:
hello-tabs/hooks/hooks.json
2

Scrivi il codice

Questo elenco indica cosa fa ciascun hook, nell’ordine in cui compaiono nel codice:
  • Aggiunge il comando /hello-tabs e carica il conteggio salvato da una sessione precedente
  • Apre il pannello quando esegui quel comando
  • Disegna il contenuto del pannello: la fila di schede e il corpo della scheda aperta
Due variabili a livello di modulo, tab e count, contengono lo stato del pannello.Salva questo come hello-tabs/hooks/register.js:
hello-tabs/hooks/register.js