APAndrea Pellizzari
Tutti i lavori
Chatbot / AI applicata

Chatbot "Rolando": assistente di vendita multilingua con product extraction inline, prompt caching Claude e contesto dinamico di pagina

Un chatbot conversazionale live dentro l'ecommerce B2B/B2C della PMI ferramenta, con la voce e il tono del fondatore storico dell'azienda. Widget React che parla in nove lingue, estrae in real-time i codici prodotto dalle risposte e genera schede card inline con immagine e prezzo, segue l'utente tra brand diversi e tra catalogo shop e flipbook PDF, ottimizzato via prompt caching Claude per tenere i costi sotto controllo su volume alto. Non un chatbot generico — un commesso AI che conosce il catalogo, il contesto della pagina e cosa l'utente ha nel carrello.

Next.jsTypeScriptClaude Haiku 4.5Anthropic SDKServer-Sent EventsReact+2
Cliente
PMI manifatturiera italiana, settore ferramenta
Ruolo
Architettura, sviluppo frontend e backend, prompt engineering, integrazione con catalogo
Durata
Sviluppato in continuità con l'ecommerce B2B/B2C, iterazione continua
Anno
2026
Stack tecnico
Next.jsTypeScriptClaude Haiku 4.5Anthropic SDKServer-Sent EventsReactFramer MotionsessionStorage

Contesto

L'ecommerce B2B/B2C di una PMI del settore ferramenta ha catalogo molto tecnico: migliaia di articoli divisi su cinque brand, varianti per materiale, dimensione, colore, ambito d'uso, applicazioni specifiche (cardini, cerniere, chiusure per serramenti tecnici). Un dealer professionale che cerca un prodotto specifico ci arriva; un utente B2C che esplora fa fatica — troppi filtri, troppi brand, non sa da dove partire. E spesso quello che manca non è la feature nel sito, è qualcuno con cui parlare — il commesso esperto che in negozio ti dice "per il tuo caso prova questo, non l'altro".

Sfida

Mettere accanto al catalogo un chatbot conversazionale che giocasse quel ruolo di commesso — con tono riconoscibile, voce coerente con il brand, accesso in tempo reale al catalogo, consapevole del contesto della pagina (prodotto corrente, carrello, brand filtrato, lingua) — e che restasse economicamente sostenibile su volume alto: qualche centinaio di conversazioni al giorno non devono costare come un consulente umano.

Approccio

Stack Next.js + Anthropic SDK + Claude Haiku 4.5 + Server-Sent Events. Widget React flottante a destra, backend in App Route che parla direttamente con l'API di Claude in streaming. Sei scelte che fanno la differenza rispetto a un "chatbot OpenAI sul sito".

Persona definita: "Rolando", voce del fondatore

Il chatbot non è generico. Ha nome proprio — Rolando — e prompt di sistema calibrato sulla voce e sul tono del fondatore storico dell'azienda: cordiale, competente, appassionato, orgoglioso del Made in Italy. Quando l'utente scrive in italiano riceve la risposta di Rolando in italiano con un tono specifico; quando scrive in inglese o in una delle altre otto lingue supportate, Rolando risponde lì con lo stesso registro. Dare un nome proprio e una voce riconoscibile trasforma l'interazione — l'utente non parla con "l'intelligenza artificiale del sito", parla con una persona.

Product extraction in tempo reale con schede card inline

Quando Claude nomina un prodotto nella risposta (es. "ti consiglio il cardino FBC00084 se hai un'anta standard"), un regex estrae i codici dal testo e li incrocia con una mappa prodotti in memoria caricata dal catalogo compatto (products_ai.json, circa 50 KB). Per ogni codice matchato, sotto il messaggio compare una card prodotto inline con immagine, nome, prezzo (netto B2B o IVA inclusa B2C in base al profilo utente), link al dettaglio shop. Quando la risposta cita prodotti di brand diversi, le card sono organizzate in un carosello orizzontale "anche negli altri brand". Niente di hardcoded: l'LLM parla naturale, il parser estrae, il rendering costruisce la visualizzazione ricca.

Contesto dinamico di pagina + memoria conversazionale

Il backend riceve con ogni messaggio un pageContext che dichiara: URL corrente, prodotto eventualmente in visualizzazione, brand filtrato, contenuto del carrello, posizione nel flipbook catalogo PDF. Rolando adatta la risposta: se sei in una pagina prodotto, si riferisce a quel prodotto ("visto che stai guardando questo…"); se hai già due articoli nel carrello, suggerisce il complementare; se sei nel catalogo PDF anziché nello shop online, propone pagine del flipbook invece dei link al carrello. La conversazione in sé è persistita in sessionStorage per la durata della visita.

Prompt caching per rendere sostenibile il volume

Il prompt di sistema (istruzioni di Rolando + catalogo compatto) è di circa 15 mila token — su una conversazione libera sarebbe un costo che si moltiplica a ogni messaggio. Ho strutturato la chiamata con ephemeral blocks Anthropic separati: le istruzioni di Rolando come blocco cacheable statico, il catalogo come blocco cacheable con refresh orario, la conversazione corrente come contenuto non cached. Risultato: cache hit sopra il 90% dei messaggi, costo effettivo per conversazione contenuto nell'ordine di pochi centesimi anche a regime di centinaia di interazioni al giorno.

Streaming Server-Sent Events + follow-up chip + verbose toggle

La risposta di Rolando scorre parola per parola nel messaggio (SSE dal backend, parser incrementale nel widget) — percezione di risposta istantanea. In fondo a ogni risposta, estratti dal testo con sintassi [FOLLOWUP:testo], appaiono chip di follow-up cliccabili con domande successive suggerite da Rolando stesso ("Vuoi sapere se c'è la versione in inox?", "Cerchi lo stesso prodotto in un altro colore?"). Un toggle "dettagliato / conciso" in testa al widget modula la lunghezza della risposta (cinquanta vs cento-cinquanta parole) a preferenza dell'utente, con la scelta salvata in localStorage.

Link shop con filtri preformulati e salto dentro al flipbook

Rolando può rispondere con una sintassi speciale [SHOP:Vedi tutti i cardini nero opaco | f_brand=x&f_Colore=nero] che viene resa come pulsante-pillola con icona lente che apre il catalogo filtrato esattamente con i parametri giusti. Nel flipbook catalogo PDF fa l'equivalente con un "salta a pagina 47" che posiziona direttamente dentro il visualizzatore. L'utente non deve imparare i filtri, li riceve già applicati.

Risultato

Il chatbot è in produzione e gira sul traffico reale dell'ecommerce, con nove lingue attive e rate limit di sessanta richieste al minuto per IP. La combinazione di persona chiara, contesto dinamico, product extraction e prompt caching è quello che lo fa funzionare come commesso AI sostenibile economicamente su qualunque volume. La cosa di cui vado più fiero è che non fa finta di essere un umano — dice chiaramente di essere un assistente digitale — ma riesce comunque a dare la sensazione di parlare con qualcuno che conosce davvero il catalogo, perché quel qualcuno esiste (il fondatore) e Rolando ne è la declinazione AI coerente.