TIPS 52 · DASHBOARD

La dashboard senza backend

Una pagina con i numeri della tua app, pubblicata da Claude Code con un link da condividere: come collegarle i dati, cosa si aggiorna da solo e cosa no, chi può vederla e come Claude risponde ai commenti.

Cos'è e perché conta

Un investitore ti chiede i numeri. Di solito gli mandi uno screenshot, o un foglio di calcolo che dopo una settimana è vecchio. Oppure ti costruisci una dashboard vera: un server, un database, un login, un deploy. Tutto questo per una pagina.

Claude Code può pubblicare una pagina vera, che si chiama artifact: una pagina web su claude.ai, con il suo link, che Claude disegna e pubblica dalla sessione. Non c'è un server tuo da tenere acceso, né un deploy, né codice da mantenere. E se colleghi i tuoi servizi come connettori, per esempio Stripe per i pagamenti e PostHog per le analytics, la pagina legge i dati freschi ogni volta che si apre.

C'è un però, ed è il cuore di questa guida: i dati dal vivo passano dall'account di chi guarda la pagina, non dal tuo. Per te e il tuo team funziona benissimo. Per un investitore fuori dalla tua organizzazione si fa in un altro modo: Claude ripubblica la pagina con i numeri nuovi, sullo stesso link. Qui trovi tutti e due.

1. Cosa ti serve

  • Un piano Claude Pro, Max, Team o Enterprise.
  • Claude Code dal terminale o dall'app desktop, con il login del tuo account claude.ai (/login). Con una chiave API o con un provider cloud come Amazon Bedrock non si pubblica.
  • L'ultima versione di Claude Code: i dati dal vivo e le risposte ai commenti richiedono versioni recenti.
  • Su Team ed Enterprise gli artifact sono attivi di default, ma un Owner li può spegnere, e le chiamate ai connettori dalle pagine hanno un interruttore a parte (Enable artifact connectors).

Se chiedi una pagina e Claude ti scrive un file HTML in locale senza link, per la tua sessione gli artifact non sono attivi: ricontrolla questi punti.

2. Collega i dati come connettori di claude.ai

Qui c'è il dettaglio che fa perdere più tempo. La pagina pubblicata può chiamare solo i connettori del tuo account claude.ai. I server MCP aggiunti in locale con claude mcp add servono a Claude mentre costruisce la pagina, ma dalla pagina pubblicata non si possono chiamare.

  1. Apri claude.ai/customize/connectors.
  2. Stripe ha un connettore ufficiale nella directory: lo cerchi, lo colleghi, fai il login a Stripe e scegli a quali account dare accesso. Su Team ed Enterprise prima lo deve aggiungere un Owner.
  3. Per PostHog, se non lo trovi nella directory, usa Add custom connector con l'indirizzo https://mcp.posthog.com/mcp e fai il login. La regione, USA o Europa, la sceglie PostHog in base al tuo account.
  4. In Claude Code scrivi /mcp: i connettori di claude.ai compaiono nella lista. Se mancano, controlla di essere entrato con l'account claude.ai e non con una chiave API.

Il connettore di Stripe può anche scrivere, non solo leggere: tieni attiva l'approvazione degli strumenti, come consiglia Stripe stessa.

3. Chiedi la dashboard

Più sei preciso su cosa vuoi vedere, meno giri fai. Gli eventi di PostHog scrivili con il loro nome vero: se non li sai, chiedi prima a Claude di elencarteli dal connettore.

Il prompt
Fammi un artifact: una dashboard per un investitore con i numeri della mia app.
In alto quattro riquadri: iscritti totali, iscritti negli ultimi 7 giorni, abbonati paganti attivi, entrate ricorrenti del mese.
Sotto: gli iscritti al giorno negli ultimi 30 giorni, e il funnel dell'onboarding, con quante persone arrivano a ogni passo e dove mollano, in percentuale.
Iscritti e onboarding da PostHog (l'evento di iscrizione è [evento], i passi dell'onboarding sono [eventi in ordine]); abbonati ed entrate da Stripe.
Leggi i dati dai connettori di claude.ai ogni volta che la pagina si apre. In ogni sezione dal vivo metti un messaggio di riserva che dice quale connettore serve, se non risponde. Sotto ogni numero scrivi da dove viene e a che ora è stato letto.

Prima di pubblicare una pagina che chiama i connettori, Claude Code ti chiede conferma. Poi ti dà il link e apre il browser; /artifacts ti mostra tutte le tue pagine.

4. Come resta aggiornata

Una pagina con i connettori legge i dati quando si apre, e può aggiornarsi a intervalli o con un pulsante. Le risposte restano in memoria nel browser di chi guarda: quando la riapre vede subito gli ultimi numeri, e un attimo dopo quelli freschi.

Il prompt
Aggiungi alla dashboard un pulsante «Aggiorna» e un aggiornamento automatico ogni 15 minuti mentre la pagina è aperta. In alto scrivi l'ora dell'ultimo aggiornamento. Se un connettore non risponde, lascia gli ultimi numeri e scrivi che non sono aggiornati. Poi ripubblica sullo stesso link.

Ricorda da dove passano quelle chiamate: dall'account di chi guarda, che deve dare il permesso la prima volta. Due persone che aprono la stessa pagina possono vedere dati diversi. Chi non ha collegato il connettore, o non dà il permesso, vede la pagina senza le parti dal vivo.

Per un investitore: la stessa pagina, ripubblicata

Per chi apre il link pubblico senza account claude.ai, o da fuori della tua organizzazione, i connettori non partono. Allora fai una versione con i numeri dentro, e la tieni fresca ripubblicandola sullo stesso link: chi ha la pagina aperta vede l'aggiornamento al momento.

Il prompt
Fai una copia della dashboard per l'investitore, senza chiamate ai connettori: leggi adesso i numeri da Stripe e PostHog e mettili nella pagina, con la data e l'ora della lettura. Pubblicala come artifact nuovo e dammi il link.

Per aggiornarla, anche da una sessione nuova, gli dai il link:

Il prompt
Aggiorna [link dell'artifact] con i numeri di oggi da Stripe e PostHog. Stessa struttura, cambia solo i numeri e l'ora della lettura.

Per farlo ogni mattina puoi usare /loop, finché la sessione resta aperta: un /loop ricorrente scade dopo sette giorni. Con una pagina pubblica, Claude Code ti chiede conferma la prima volta che la cambia in ogni conversazione. Le attività programmate nel cloud, invece, una pagina condivisa in pubblico non la ripubblicano senza chiedertelo.

5. Chi la vede

  • All'inizio la vedi solo tu. Per condividerla apri la pagina nel browser e usi Share, in alto.
  • Su Pro e Max la condividi con un link pubblico: la apre chiunque ce l'abbia, senza login.
  • Su Team ed Enterprise la dai a persone precise della tua organizzazione, o a tutta l'organizzazione. Il link pubblico è spento finché un Owner non attiva External sharing.
  • Ogni pubblicazione è una versione: da Share scegli quale vedono gli altri, oppure fai vedere sempre l'ultima.
  • Per toglierla: /artifacts, scegli la pagina e premi d. È definitivo: il link smette di funzionare per tutti, anche per te.

La regola che mi darei: nella versione pubblica metti solo numeri che manderesti anche per email. Chi ha il link la può girare a chiunque.

6. I commenti, con Claude che risponde

Quando condividi la pagina dentro la tua organizzazione, quindi su Team o Enterprise, chi la vede può lasciare commenti. Chi la apre solo con il link pubblico non li vede e non ne può scrivere.

  1. Chi può modificare la pagina scrive un commento e lo manda a Claude con Send to Claude, oppure scrive @claude nel commento.
  2. Claude Code tiene d'occhio le pagine pubblicate nella tua sessione: il commento arriva lì, Claude legge il filo e risponde. La risposta appare firmata Claude, via te.
  3. Se la tua modalità dei permessi gli lascia postare senza chiedere, risponde da solo. Altrimenti ti chiede l'ok prima di leggere il filo e prima di rispondere.
  4. Per fermarlo: Ctrl+C una volta, con il prompt fermo, mette in pausa le risposte; da /tasks fermi una pagina sola.

Claude risponde solo ai fili che qualcuno gli ha mandato: gli altri restano aperti finché una persona non li chiude. I commenti puoi anche chiederglieli tu:

Il prompt
Leggi i commenti su [link dell'artifact]. Rispondi alle domande sui numeri spiegando da dove viene ogni dato, fai le modifiche che chiedono e ripubblica. Se una richiesta cambia cosa mostriamo all'esterno, chiedimelo prima.

Gli errori più comuni

  • Collegare Stripe e PostHog solo con claude mcp add. La pagina pubblicata chiama solo i connettori di claude.ai.
  • Mandare all'investitore la versione dal vivo. Da fuori della tua organizzazione i connettori non partono, e vede i riquadri vuoti.
  • Dimenticare i messaggi di riserva. Chi non ha collegato un connettore vede una sezione vuota senza capire perché.
  • Pensare che ogni commento arrivi a Claude. Arriva solo quello mandato con Send to Claude o con @claude da chi può modificare la pagina.

Checklist

  • Ho un piano Pro, Max, Team o Enterprise e ho fatto /login
  • Stripe e PostHog sono connettori su claude.ai, e /mcp li mostra
  • Ogni sezione dal vivo ha un messaggio di riserva
  • Sotto ogni numero c'è la fonte e l'ora della lettura
  • L'investitore ha una versione con i numeri dentro, non quella dal vivo
  • Ho deciso chi la vede, dal pulsante Share

Domande frequenti

È davvero senza backend?

Sì: è una pagina sola, ospitata su claude.ai. Per questo non può avere un suo login né più pagine collegate, e le librerie le carica solo da pochi CDN pubblici. Per uno strumento interno con un server suo, serve la tua infrastruttura.

Va bene anche per il team?

È il caso migliore. Su Team ed Enterprise la condividi con l'organizzazione, ognuno vede i dati dal vivo con i suoi connettori, e i commenti con Claude funzionano.

← Tutte le guide