Interazione con ChatGPT: follow‑up e «dialoghi intorno al widget»

1. Che cosa sono i follow‑up in ChatGPT App e a cosa servono

Cominciamo con una definizione in linguaggio umano, non di marketing. Un follow‑up nel contesto di ChatGPT App è un passo successivo avviato a livello di programma nella conversazione. Di solito è un breve suggerimento presentato come pulsante: alla pressione diventa un nuovo messaggio di testo da parte dell’utente in chat e avvia la prosecuzione dello scenario di interazione tra persona e IA.

Dal punto di vista del modello, un follow‑up è semplicemente un altro messaggio dell’utente. Niente magia: quando l’utente fa clic sul vostro pulsante «Mostra opzioni più economiche», nella cronologia della chat entra qualcosa tipo «Mostra regali più economici». Il modello lo vede come una normale frase dell’utente, applica il system‑prompt e le descrizioni dei tools, decide quale strumento invocare e, forse, renderizza di nuovo il vostro widget già con altri dati.

Perché è importante:

• Il modello ragiona in termini di testo. Se al clic richiamate semplicemente un tool direttamente (senza messaggio), aggirate il «cervello» principale del sistema e perdete parte del contesto. Il follow‑up conserva l’avanzamento della conversazione nella cronologia e aiuta il modello a capire che cosa stia succedendo.
• L’utente rimane nella consueta paradigma della chat: o scrive messaggi, o preme suggerimenti. I follow‑up sono «risposte rapide» (quick replies), come nei moderni messenger.
• È il ponte principale tra la vostra UI e la parte testuale di ChatGPT. Senza follow‑up il widget diventa un’isola muta: l’utente clicca qua e là e non capisce bene cosa fare dopo.

Si può vedere i follow‑up come un pulsante «Prossima domanda all’IA», solo formulata da voi. D’ora in poi considereremo i follow‑up non come «un’altra feature di UI», ma come il modo principale per costruire il dialogo intorno al widget.

2. «Dialogo intorno al widget»: conversational sandwich

Per capire meglio come i follow‑up aiutino a costruire il «dialogo intorno al widget», è utile immaginare la conversazione come un sandwich a tre strati:

• in alto il testo di ChatGPT prima del widget (pre‑testo),
• al centro il vostro widget (UI),
• in basso i follow‑up e i messaggi successivi (post‑interazione).

Schema:

sequenceDiagram
    participant U as Utente
    participant G as ChatGPT
    participant W as Widget

    U->>G: "Trova un regalo per una sorella entro 100$"
    G->>G: Decide di chiamare l’App
    G->>U: Pre-text: "Ora apro GiftGenius e seleziono alcune idee"
    G->>W: Passa toolOutput per il rendering
    W-->>U: Schede dei regali + pulsanti follow-up
    U->>W: Clic su "Mostra opzioni più economiche"
    W->>G: sendFollowUpMessage("Mostra regali più economici, fino a 50$")
    G->>G: Nuova esecuzione del modello, chiamata ai tools
    G->>W: Nuovo toolOutput, widget aggiornato

Il pre‑testo in genere è generato interamente dal modello sulla base del system‑prompt e del contesto: lì «spiega» che cosa sta per accadere («Ora apro un’app che aiuta a scegliere un regalo»). Gestiremo questo strato più avanti, nel modulo sulle istruzioni.

Il widget è il vostro consueto componente React: renderizza il toolOutput, usa il widgetState, offre pulsanti e scelte.

Il livello post‑interazione è ciò di cui ci occupiamo oggi. Tramite i follow‑up e l’invio di messaggi impostate un percorso chiaro: «Mostra più cari», «Modifica budget», «Ricomincia la selezione», «Procedi al checkout».

Semplificando, un follow‑up è una battuta di controllo che chiude il ciclo: UI → testo → nuova UI.

3. Modello tecnico: come un clic su un follow‑up si trasforma in una nuova tool‑call

Guardiamo con attenzione la catena di eventi «sotto il cofano». È utile pensarla come un ciclo ibrido di interazione: clic → API → testo in cronologia → nuova decisione del modello → nuova chiamata allo strumento → UI aggiornata.

La sequenza è circa questa:

1. L’utente preme un pulsante nel vostro widget.
2. Il widget chiama l’API window.openai.sendFollowUpMessage oppure, nello strato React, la comoda hook‑wrapper useSendMessage (negli esempi sotto useremo proprio la hook). L’argomento è una normale stringa: il testo che come se fosse stato scritto dall’utente.
3. ChatGPT aggiunge questo messaggio alla cronologia come nuovo user_message.
4. Il modello esegue un nuovo passaggio: considera l’intera cronologia, incluso il precedente toolOutput, e decide se chiamare uno strumento, quale e con quali argomenti.
5. Il vostro backend/MCP esegue la tool‑call e restituisce il toolOutput.
6. ChatGPT mostra la nuova risposta: magari di nuovo un widget (con nuovi dati), magari del testo, oppure una combinazione.

È importante che quasi mai vogliate richiamare direttamente dal widget lo stesso strumento invocato dal modello, aggirando questo ciclo. Altrimenti il modello «perde» un passaggio: in cronologia non c’è la richiesta che ha innescato la nuova chiamata. Più avanti, con scenari lunghi, questo si traduce in contesti confusi.

Possiamo ridurlo a una breve formula:

User Click → useSendMessage("...") → ChatGPT (LLM) → Tool Call → New toolOutput → Widget rerender

4. Tipi di follow‑up e chi li inventa

Abbiamo capito cosa succede «sotto il cofano» dopo un clic su un follow‑up. Ora vediamo quali follow‑up abbia senso offrire all’utente e quali ruoli possono svolgere nello scenario.

In un’App reale esistono diverse «famiglie» di follow‑up. Li divido lungo assi differenti: statici vs dinamici, per ruolo (drill‑down, pivot, commit ecc.).

Per la pratica è comoda una tabella.

Dal punto di vista della fonte delle idee ci sono due grandi gruppi.

Primo, i follow‑up che propone la stessa applicazione. Sono i nostri pulsanti nel widget, legati alla logica della UI e ai dati: ad esempio «Mostra simili a [Titolo del regalo]» oppure «Filtra solo per l’interesse travel». Tali suggerimenti possono essere codificati rigidamente (static) oppure formati dinamicamente in base al toolOutput (dynamic).

Secondo, i suggerimenti «nativi» di ChatGPT — piccoli chip sotto il messaggio che il modello inventa da sé. Non li controllate direttamente; trattateli come un bonus gratuito, non come un meccanismo affidabile. La vostra app deve funzionare comunque anche senza di essi.

In questa lezione ci interessa di più il primo gruppo: pulsanti e suggerimenti che disegnate nel vostro componente React e che, al clic, inviano sendFollowUpMessage.

5. Implementazione dei follow‑up in React: GiftGenius come esempio

Proseguiamo con la nostra ipotetica App GiftGenius, che seleziona regali. Dopo la chiamata allo strumento get_gift_ideas il widget riceve il toolOutput con l’elenco dei regali. Nelle lezioni precedenti abbiamo già creato la griglia di schede. Ora aggiungiamo la sezione dei follow‑up.

Supponiamo che nell’SDK abbiamo le hook useWidgetProps e useSendMessage. I nomi qui sono indicativi, ma il concetto coincide con quello della realizzazione di riferimento:

import { useWidgetProps, useSendMessage } from '@/openai-apps';

export const GiftSuggestions: React.FC = () => {
  const { toolOutput } = useWidgetProps();
  const sendMessage = useSendMessage();

  const gifts = toolOutput?.data?.gifts ?? [];

  if (gifts.length === 0) {
    return <div>Nessun regalo trovato. Prova a modificare la richiesta.</div>;
  }

  const handleCheaper = () => {
    sendMessage('Mostra regali più economici, fino a 50$');
  };

  const handleDigital = () => {
    sendMessage('Mostra solo regali digitali: voucher, abbonamenti, ecc.');
  };

  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-2 gap-2">
        {gifts.map((gift: any) => (
          <GiftCard key={gift.id} item={gift} />
        ))}
      </div>

      <div className="border-t pt-3 text-sm">
        <div className="text-xs text-gray-500 mb-2">Cosa fare dopo?</div>
        <div className="flex flex-wrap gap-2">
          <button
            onClick={handleCheaper}
            className="px-3 py-1 rounded-full bg-gray-100 hover:bg-gray-200"
          >
            Più economici
          </button>
          <button
            onClick={handleDigital}
            className="px-3 py-1 rounded-full bg-gray-100 hover:bg-gray-200"
          >
            Solo digitali
          </button>
        </div>
      </div>
    </div>
  );
};

Qui sono importanti alcuni punti.

Primo, sendMessage riceve una stringa — questo testo apparirà in chat come se fosse stato inserito dall’utente. La vostra App non deve imitare un «protocollo interno» di sistema; formulate semplicemente frasi tali che il modello le capisca.

Secondo, la sezione dei follow‑up è visivamente separata (bordo superiore, testo piccolo «Cosa fare dopo?»), così l’utente capisce che si tratta della prosecuzione del dialogo più che di elementi della scheda stessa.

Terzo, pochi pulsanti — due. Le raccomandazioni UX suggeriscono di restare nell’intervallo di circa due‑quattro opzioni: abbastanza per aiutare, non abbastanza per sovraccaricare.

Follow‑up dinamico basato sui dati

Poniamo di voler permettere all’utente di approfondire un regalo specifico: «Mostra simili a questo». Allora il testo del follow‑up deve menzionare l’oggetto in questione, e potete generarlo al volo.

const handleShowSimilar = (giftTitle: string) => {
  sendMessage(
    `Mostra regali simili a "${giftTitle}", nello stesso budget o leggermente più cari`
  );
};

E nella scheda:

<button
  onClick={() => handleShowSimilar(gift.title)}
  className="mt-2 text-xs text-blue-600 underline"
>
  Mostra simili
</button>

Così realizzate un follow‑up dinamico, legato a dati specifici dal toolOutput. Proprio questi pulsanti rendono il dialogo «intelligente», non solo un insieme di «Avanti / Indietro» universali.

6. Perché inviamo testo invece di chiamare direttamente il tool

Il pensiero tipico di uno sviluppatore frontend: «Dato che ho useCallTool, perché dovrei inviare testo? Posso chiamare subito get_gift_ideas con altri parametri». A volte serve davvero (ne parleremo nel modulo sulla chiamata dei tools dal widget), ma di default è meglio passare da un follow‑up testuale. Le ragioni sono molto pratiche.

Primo, la cronologia della chat resta coerente. All’esterno sembra che l’utente abbia scritto: «Mostra regali più economici». Tra una settimana riaprirà la cronologia e capirà cosa è successo. Se aveste fatto tutto con chiamate dirette ai tool, tra i messaggi dell’utente comparirebbero all’improvviso vari widget senza causes visibili.

Secondo, il modello può prendere decisioni aggiuntive. Per esempio, capire che invece di richiamare lo stesso strumento conviene prima chiarire il budget: «Sei sicuro di voler ridurre il budget a 5 $? Magari lasciamo almeno 20 $?» Scenari flessibili così diventano impossibili se codificate rigidamente «clic → stesso tool con parametri diversi».

Terzo, il modello può chiamare un altro strumento. Supponiamo che l’utente prema «Contatta il supporto», e il vostro system‑prompt istruisca il modello che in tal caso va invocato create_support_ticket, non get_gift_ideas. Il follow‑up come testo dà al modello la libertà di passare a un altro strumento.

Perciò la regola pratica del modulo 3 è: al clic nella UI nella maggior parte dei casi inviamo un follow‑up testuale, non chiamiamo direttamente un tool. Le chiamate dirette ai tool dal widget lasciatele ai casi specifici, quando sicuramente non vi serve un nuovo passaggio utente in cronologia.

7. Collegare i follow‑up allo stato: evitare che UI e testo vadano fuori sincrono

Un problema interessante: la UI «vive» di vita propria e il testo in chat della sua. Poniamo che al clic cambiate un filtro dentro il widget e contemporaneamente inviate un follow‑up. Se aggiornate solo la UI ma non fissate il nuovo stato tramite widgetState, al prossimo render ChatGPT ripristinerà il vecchio widgetState. Di conseguenza il widget mostrerà di nuovo i filtri vecchi, sebbene in cronologia ci sia già il passaggio «più economici». È un’esperienza piuttosto strana.

Quindi un buon pattern è: al clic su un follow‑up contemporaneamente:

1. aggiornare il widgetState,
2. inviare il messaggio di follow‑up.

Esempio:

import { useWidgetState, useSendMessage } from '@/openai-apps';

type GiftWidgetState = {
  priceFilter?: 'any' | 'cheap' | 'premium';
};

export const GiftFollowups: React.FC = () => {
  const [widgetState, setWidgetState] = useWidgetState<GiftWidgetState>();
  const sendMessage = useSendMessage();

  const handleCheaper = () => {
    setWidgetState({ ...widgetState, priceFilter: 'cheap' });
    sendMessage('Mostra regali più economici, circa fino a 50$');
  };

  // ...
};

Ora sia ChatGPT sia la vostra UI sanno che il filtro è cambiato. Se il modello ricostruirà il widget più tardi, vedrà il widgetState aggiornato e potrà, per esempio, formare un nuovo pre‑testo del tipo «Ecco idee in una fascia più economica».

8. Progettare buoni follow‑up

Un buon follow‑up è metà del successo di UX. Non è solo «bello», fa risparmiare energia mentale all’utente.

Ci sono alcuni principi pratici che varrebbe la pena appendersi sopra il monitor.

Primo, la brevità. Il follow‑up non è il posto per poemi. Una frase breve, comprensibile anche senza il contesto della UI, è in genere ideale: «Più economici», «Solo premium», «Cambia destinatario». Se serve qualcosa di più lungo, valutate se non debba essere testo normale di GPT, non un pulsante.

Secondo, orientamento all’azione. Formulate in modo che sia chiaro cosa accadrà. «Altre idee» — va bene. «Approfondisci il punto 2» — meglio sostituirlo con «Raccontami di più sulla seconda opzione» (così il modello capirà di cosa si parla anche senza UI).

Terzo, proseguire lo scenario, non ripeterlo. Invece di «Seleziona di nuovo il regalo» meglio «Modifica budget» o «Cambia hobby del destinatario». Il follow‑up deve spingere l’utente avanti o di lato, non riportarlo al punto di partenza senza necessità.

Quarto, quantità limitata. Due‑quattro pulsanti in fondo al widget — quasi sempre sufficienti. Una placca con dieci opzioni si trasforma in un esame di scelte: l’utente si perde e non preme nulla.

Infine, considerate la tonalità. Se tutta l’app comunica in modo amichevole, è strano infilare un pulsante «CONFERMA ORDINE» in caps. Il follow‑up è parte dello stesso dialogo del testo del modello; lo stile deve coincidere.

9. «Dialoghi intorno al widget» nel complesso: chi fa cosa

È importante non percepire il widget come il «protagonista» e ChatGPT come la «cornice attorno». È il contrario: il modello continua a condurre il dialogo, e il widget è solo uno dei modi per mostrare e correggere i dati.

Uno scenario tipico per GiftGenius è questo:

1. Utente: «Serve un regalo per una sorella che lavora nell’IT entro 100 $».
2. Modello: introduzione testuale (pre‑testo) — spiega che ora aprirà GiftGenius e che cosa fa.
3. Widget: mostra una selezione di idee e offre follow‑up.
4. Utente: o scrive un messaggio, o preme un pulsante di follow‑up (per esempio «Mostra solo regali digitali»).
5. Modello: interpreta questo come testo, chiama il tool necessario, se serve commenta il risultato (post‑testo) o mostra di nuovo il widget.
6. E così in ciclo, finché il compito non è risolto — fino alla conferma della scelta, all’ordine ecc.

I follow‑up qui sono la colla che lega ogni giro di questo ciclo. Senza di essi, dopo il widget l’utente rimane sospeso: tutto è bello, ma «e adesso?» non è chiaro.

In scenari più complessi (workflow, agenti) i follow‑up aiutano a modellare funnel multi‑step: «Prima scegli il destinatario», «Ora specifica il budget», «Ora confermiamo la scelta». Ma in questo modulo ci basta vedere che anche la più semplice App a uno step trae grande vantaggio da un paio di suggerimenti ben pensati.

10. Pratica: cosa conviene fare subito

Un buon esercizio di consolidamento è migliorare il vostro widget didattico attuale.

Se avete già un elenco di risultati (per esempio gli stessi regali, hotel o documenti), aggiungete sotto un piccolo blocco «Cosa fare dopo?» con due‑tre pulsanti. Cercate di fare in modo che corrispondano ai tipi della tabella sopra: uno dovrebbe essere di approfondimento (drill‑down, per esempio «Più economici»), un altro — un cambio di rotta (pivot, «Cambia destinatario»), un terzo — se serve — di navigazione (navigation, «Passa al checkout»).

Dentro i gestori di clic chiamate useSendMessage con un testo sensato in linguaggio naturale; non dimenticate di aggiornare il widgetState se necessario. Poi riavviate lo scenario in ChatGPT e guardate com’è il dialogo: quanto è diventato più chiaro cosa fare dopo il widget.

Provate anche a creare intenzionalmente follow‑up «cattivi»: lunghi, vaghi, con una decina di opzioni — e confrontate le sensazioni. È un modo rapido per sentire la differenza su di voi.

11. Errori tipici nel lavoro con i follow‑up

Errore n. 1: widget «muto».
Lo sviluppatore crea un’ottima UI, ma non fornisce affatto follow‑up. L’utente vede le schede, pensa «ok, carino», e poi deve intuire da solo che può, per esempio, chiedere: «Mostra più economici» o «Cambia destinatario». La maggior parte delle persone semplicemente non ci pensa e se ne va. Almeno uno‑due suggerimenti «cosa fare dopo» sotto il widget risolvono il problema.

Errore n. 2: troppi pulsanti.
L’estremo opposto — sommergere l’utente con una decina di opzioni: «Modifica budget», «Modifica interessi», «Cambia valuta», «Salva selezione», «Condividi con un amico», «Mostra simili», «Chiedi al supporto» e così via. Ne esce un «buffet» psicologico in cui è difficile scegliere. Meglio partire da due‑tre azioni più frequenti e lasciare il resto al modello e al testo normale.

Errore n. 3: logica del dialogo solo nel frontend.
A volte si prova a «ottimizzare» e, invece di inviare il follow‑up tramite useSendMessage (o il più basso livello sendFollowUpMessage), si richiama direttamente lo stesso tool dal widget, aggiornando la UI. In cronologia non c’è una riga su ciò che è accaduto. Dopo un paio di passaggi il modello inizia a confondersi, e voi con lui. La via giusta: mantenere la logica del dialogo a livello di testo e strumenti, e il widget come sottile strato di UI.

Errore n. 4: formulazioni poco chiare o ambigue.
Un pulsante «Altro» fuori contesto può significare di tutto: più regali, più testo, più denaro? Allo stesso modo formulazioni come «Ricalcola» o «Ricostruisci» non sono chiare né per il modello né per l’utente. I migliori follow‑up sono concreti: «Mostra più opzioni in questo budget», «Mostra solo regali digitali».

Errore n. 5: UI e testo non sincronizzati.
Classico: al clic su «Più economici» avete aggiornato il filtro della UI, ma non avete inviato il follow‑up in chat o non avete aggiornato il widgetState. Di conseguenza, in cronologia non ci sono passaggi sul cambiamento del budget e, al successivo render del widget, il filtro «torna indietro». Resta la sensazione di un’interfaccia «rotta». Usate la combinazione setWidgetState + sendMessage affinché testo e UI camminino di pari passo.

Errore n. 6: tentativo di controllare i suggerimenti «nativi» di ChatGPT.
Talvolta gli sviluppatori contano sul fatto che ChatGPT generi da sé i chip di follow‑up sotto il messaggio e non aggiungono i propri. Ma quei suggerimenti non sono garantiti e non sono gestiti dall’app. Trattateli come un piacevole bonus, ma fornite sempre i vostri pulsanti di follow‑up critici nel widget.