MAISON CODE .
/ Tech · AI · React · Generative UI · Vercel AI SDK

UI generativa: quando l'interfaccia si disegna da sola

L’era dei dashboard statici è finita. L'interfaccia utente generativa consente all'intelligenza artificiale di eseguire il rendering dei componenti React al volo, creando un'interfaccia personalizzata per ogni query dell'utente.

AB
Alex B.
UI generativa: quando l'interfaccia si disegna da sola

Il Web statico è morto

Dall’invenzione dell’HTML, il paradigma è stato:

  1. Lo sviluppatore progetta un layout (intestazione, contenuto, piè di pagina).
  2. Lo sviluppatore scrive il codice.
  3. L’utente visita la pagina.
  4. L’utente vede esattamente ciò che lo sviluppatore ha progettato.

Questa è l’interfaccia utente statica. Idealmente, si adatta all’80% degli utenti. Il restante 20% se ne occupa e basta. Se un utente chiede “Mostrami voli per Parigi”, mostriamo un elenco. Se un utente chiede “Confronta il tempo a Parigi e Londra”, mostriamo una risposta testuale. Perché? Perché non abbiamo progettato un “Widget di confronto meteo”. Abbiamo progettato solo un “Widget Elenco voli”. Siamo limitati da ciò che prevediamo che l’utente vorrebbe.

IU generativa supera questo limite. L’intelligenza artificiale decide in fase di esecuzione quali componenti eseguire il rendering. Utente: “Confronta meteo”. AI: Decide di eseguire il rendering di due componenti <WeatherCard /> fianco a fianco. Utente: “Prenota un volo”. AI: Decide di eseguire il rendering di un <FlightBookingForm />. L’interfaccia si adatta all’intento.

Perché Maison Code ne parla

Noi di Maison Code siamo ossessionati dal futuro della “Zero UI”. Crediamo che il massimo del lusso sia un’interfaccia che anticipa le tue esigenze. Per i nostri clienti concierge di fascia alta, una dashboard statica non è sufficiente. Se un cliente VIP chiede “Un itinerario del fine settimana a Kyto”, non dovrebbe ricevere un blocco di testo. Dovrebbero ricevere una mappa, un elenco di prenotazioni alberghiere e un widget meteo, generati immediatamente. Implementiamo Vercel AI SDK e React Server Components (RSC) per creare queste esperienze adattive. Ne parliamo perché questo è il più grande cambiamento nel Frontend Engineering dai tempi di React stesso.

La tecnologia: Vercel AI SDK (RSC)

L’SDK Vercel AI (in particolare la modalità “allow-rsc”) consente a LLM di eseguire lo streaming dei componenti React come parte della risposta.

Come funziona (The Flow)

  1. Query utente: “Mostrami il prezzo delle azioni Apple.”
  2. Azione server: invia un messaggio a GPT-4.
  3. Chiamata di funzione: forniamo strumenti a GPT-4. 
    strumenti: {
  mostra_stock: {
    descrizione: "Mostra un grafico del titolo azionario",
    parametri: z.object({ simbolo: z.string() })
  }
}
  4. Decisione LLM: GPT-4 dice “Chiama show_stock con il simbolo AAPL”.
  5. Esecuzione del server: il server esegue la funzione. Ma invece di restituire JSON, restituisce un React Component. 
    // server/azioni.tsx
funzione asincrona show_stock({ simbolo }) {
  dati const = attendono fetchStock(simbolo);
  return <StockChart data={data} color="green" />;
}
  6. Streaming: l’interfaccia utente trasmette "" al client. Il client lo esegue immediatamente.

Esempio di codice: creazione di una chat generativa

“tsx // app/azione.tsx import {creaAI, getMutableAIState, render} da “ai/rsc”; importa { z } da “zod”;

const ai = creaAI({ azioni: { sendUserMessage: asincrono (contenuto: stringa) => { “usa server”; const aiState = getMutableAIState();

  const ui = attendi il rendering({
    modello: "gpt-4-turbo",
    fornitore: openai,
    messaggi: [{ ruolo: "utente", contenuto }],
    strumenti: {
      get_crypto_price: {
        descrizione: "Ottieni il prezzo di una criptovaluta",
        parametri: z.object({ coin: z.string() }),
        render: funzione asincrona* ({ moneta }) {
          rendimento <Spinner />; // Stato di caricamento istantaneo
          prezzo const = attendi fetchPrice(moneta);
          return <CryptoCard moneta={moneta} prezzo={prezzo} />; // Interfaccia utente finale
        }
      }
    }
  });
  
  return { id: Date.now(), display: ui };
}

} });


Notare il `rendimento <Spinner />`.
Questo è sorprendente. L'intelligenza artificiale riconosce l'intento ("sto ottenendo il prezzo") e mostra un'interfaccia utente *prima* che i dati siano pronti.
Quindi sostituisce lo spinner con la carta.
Questa è l'**interfaccia utente in streaming**.

## Casi d'uso per l'e-commerce

1. **Confronto prodotti**:
    Utente: "Quale è meglio per correre, l'Air Max o il Pegasus?"
    AI: genera una `<ComparisonTableproducts={[A, B]} />` evidenziando peso e ammortizzazione.
2. **Guida alle taglie**:
    Utente: "Sono alto 6 piedi, che taglia?"
    AI: esegue il rendering di un `<SizeChart highlight="L" />` personalizzato.
3. **Creatore di pacchetti**:
    Utente: "Ho bisogno di un vestito per un gala."
    AI: visualizza un `<Articoli LookBook={[Abito, Cravatta, Scarpe]} />` con un pulsante "Aggiungi tutto al carrello".

## La sfida progettuale

L’interfaccia utente generativa è un incubo per i designer.
Non è possibile progettare "La Pagina". Non c'è nessuna pagina.
È necessario progettare un **Sistema di componenti**.
Tu disegni gli "Atomi" (Carte, Grafici, Tabelle, Liste).
L'intelligenza artificiale funge da "costruttore di pagine".
Ciò richiede un rigoroso **Sistema di progettazione** (vedi [Progettazione atomica](/it/blog/tech-atomic-design-it)) per garantire che qualunque cosa assembla l'intelligenza artificiale sembri coerente.
Se non vengono applicati margini e tipografia perfettamente standardizzati, il layout generato dall'intelligenza artificiale sembrerà rotto.

## Il punto di vista dello scettico

"Questo è un eccesso di ingegneria. Mostrami solo il testo."
**Contropunto**: il testo è difficile da analizzare.
"Apple è in rialzo del 5% a 150 dollari" è più difficile da leggere di un grafico verde in rialzo.
Il cervello elabora le immagini 60.000 volte più velocemente del testo.
L'interfaccia utente generativa riguarda la **densità delle informazioni**.
Ci consente di trasmettere dati complessi (tabelle, grafici) in un'interfaccia conversazionale senza sovraccaricare l'utente.

## Domande frequenti

**D: È lento?**
R: Sì, GPT-4 è lento. Ecco perché utilizziamo lo **Streaming**. Il testo/la casella di selezione viene visualizzato immediatamente. Il componente pesante dell'interfaccia utente viene caricato 1 secondo dopo. Sembra reattivo.

**D: Può avere allucinazioni sull'interfaccia utente?**
R: Può avere allucinazioni durante gli argomenti (ad esempio, passare una stringa a un oggetto che necessita di un numero).
Tuttavia, l'implementazione della convalida dello schema **Zod** previene arresti anomali del runtime. Se l'intelligenza artificiale restituisce dati errati, li rileviamo e mostriamo un messaggio di errore invece di mandare in crash l'interfaccia utente.

## Conclusione

Stiamo passando dal "punta e clicca" al "descrivi e ricevi".
L'interfaccia utente generativa è il ponte.
Combina la flessibilità della chat con l'usabilità della GUI.
È il futuro dell'interazione software.

## Pronti a costruire il futuro?

Se desideri integrare l'interfaccia utente generativa nella tua applicazione utilizzando Vercel AI SDK, **Maison Code** è il partner esperto di cui hai bisogno.
Costruiamo interfacce intelligenti che si adattano ai tuoi utenti.

---


<hr style="margin: 1rem 0" />

### Interfaccia utente che si disegna da sola?
Realizziamo esperienze di interfaccia utente generativa utilizzando Vercel AI SDK e React Server Components.
**[Assumi i nostri architetti](/contact)**.