# 6 blocchi per una pagina prodotto AI

Una pagina di prodotto AI deve far partire una prova, non spiegare come funziona un modello. Sei categorie, l'ordine tra chat e prezzi, i guasti dello streaming e i conteggi reali del catalogo.

> Pagina: https://ui.eneawork.it/blog/blocchi-per-prodotto-ai
> Markdown: https://ui.eneawork.it/blog/blocchi-per-prodotto-ai.md

*2026-10-31*

Una pagina di prodotto AI deve far partire una prova, non spiegare come funziona un modello. Il catalogo indicizza 51 blocchi hero, 53 feature, 6 chat, 41 pricing, 24 faq e 27 cta, letti il 2026-11-01: sei categorie per una pagina di prodotto AI.

I conteggi sono quelli delle pagine categoria, misurati lo stesso giorno. La sproporzione utile è tra 53 feature e 6 chat: il catalogo sa mostrare una funzione, molto meno un'interazione. La chat è la parte che il visitatore vuole provare, ed è la meno coperta.

## Cosa deve fare la pagina

Chi valuta un prodotto AI ha due paure: che non capisca il suo caso e che costi troppo. La pagina deve mostrare un input reale con l'output che ne esce, dire in una riga su quali dati è stato addestrato o collegato, e spiegare come si misura il consumo. Una demo che risponde a una domanda vera convince più di dieci screenshot di risposte perfette.

## L'ordine dei blocchi

Hero, feature, chat, pricing, faq, cta. La chat sta prima del pricing perché il visitatore deve capire cosa fa il prodotto prima di leggere quanto costa: invertire l'ordine porta a un preventivo chiesto senza aver visto nulla. Le FAQ vengono dopo il prezzo, perché le obiezioni vere nascono leggendo i numeri, non prima.

## I blocchi da cui partire

Le tabelle riportano blocco, registry, file e categoria. La chat da 7 file include bolle, input e lista: è la più completa del catalogo e va letta come interfaccia, non come integrazione. Il pricing da 2 file non conosce crediti né consumo: il costo a token o a richieste lo aggiungi tu.

## Blocchi hero

## Blocchi feature

## Blocchi chat

## Blocchi pricing

## Cosa si rompe in produzione

Il primo guasto è lo streaming: il blocco chat presume una risposta che arriva intera e riceve token a pezzi, quindi l'altezza del messaggio cambia a ogni chunk e la pagina scrolla da sola. Il secondo è il costo: il pricing mostra un prezzo mensile e il prodotto fattura a consumo, quindi il cliente scopre la differenza a fine mese. Il terzo è l'input che perde il testo se arriva un errore.

curl "https://ui.eneawork.it/api/blocks/category/chat?limit=5"

La risposta elenca le chat disponibili con fonte e file: leggila per capire quali hanno un componente separato per il messaggio e quali tengono tutto in un file. Con sei blocchi la scelta è breve, e la differenza che conta è dove finisce la logica di invio.

Un blocco chat entra solo se mostra lo stato di errore e quello di attesa: senza i due stati il visitatore vede un prodotto che sembra rotto al primo timeout, e non c'è modo di recuperarlo.

## Un limite da dichiarare

Nessuno dei 6 blocchi chat è collegato a un provider: sono interfacce con messaggi di esempio. Streaming, cancellazione della richiesta, retry e conteggio dei token restano da scrivere. Chi sceglie il blocco pensando di risparmiare l'integrazione sta comprando solo la parte visibile.

Nel catalogo: blocco chat, blocco pricing e componenti. Le guide: hook in un Server Component, hydration failed e tabelle prezzi in 10 minuti.

## FAQ

### La chat va prima o dopo il pricing?

Prima. Chi legge il prezzo senza aver visto il prodotto confronta solo cifre e lo trova caro. Chi ha appena visto una risposta utile legge la stessa cifra come il costo di una cosa che sa fare, e la domanda cambia da «quanto costa» a «quanto mi serve».

### Come spiego il costo a token senza spaventare?

Con un caso concreto: «un documento di dieci pagine costa circa otto centesimi». La cifra per milione di token è corretta e illeggibile; il confronto con un'unità che il cliente conosce, come una pagina o una richiesta, rende il prezzo valutabile.

### Serve una demo senza registrazione?

Sì, se il prodotto si spiega in una risposta. Un campo con tre esempi pronti fa provare in dieci secondi e riduce le iscrizioni vuote. Se ogni risposta costa denaro, metti un limite per sessione e dichiaralo accanto al campo.

### Come dichiaro i limiti del modello?

Con una riga vicino alla demo, non in fondo alla pagina: cosa non fa, su quali dati risponde e quando conviene controllare a mano. Un limite scritto prima evita l'email di rimborso; lo stesso limite scritto nei termini non lo legge nessuno.

### Quante sezioni regge una pagina di prodotto AI?

Sei, poi la pagina diventa un saggio. Oltre le sei, ogni sezione aggiunta sposta la prova più in basso e aumenta il tempo prima del primo input. Se hai molto da dire, usa le FAQ e lascia il resto alla documentazione.