Interfacce web: come creare esperienze interattive

AIsuru offre la possibilità di integrare gli Agenti IA direttamente nelle pagine web, permettendo loro di eseguire azioni specifiche e interagire con l'interfaccia utente. Questa funzionalità avanzata consente di creare esperienze utente altamente personalizzate e interattive.

Funzionamento di base

L'Agente può eseguire azioni all'interno di una pagina web grazie all'utilizzo degli snippet di codice.

Questo permette all'Agente di manipolare l'interfaccia utente in tempo reale, rispondendo alle interazioni dell'utente o a specifici eventi.

Implementazione con i contenuti

Per abilitare un Agente ad eseguire azioni in una pagina web:

1. Accedi al pannello di gestione del tuo Agente;

2. Vai alla sezione Contenuti dalla barra laterale;

3. Seleziona un contenuto specifico e premi sul tasto di modifica -> ad esempio, un contenuto che abbia come domanda "iniziamo" e come risposta un messaggio di benvenuto;

4. Scorri in fondo fino alla sezione "Avanzate: testi preformattati" e fai clic sul tasto + Nuovo snippet:

   1. Inserisci il codice CSS o JS che vuoi eseguire;

   2. Seleziona il linguaggio;

   3. Premi sulla checkbox Command per attivarla (e, quindi, rendere lo snippet eseguibile);

   4. Dai un titolo descrittivo e dettagliato allo snippet -> in questo modo, anche l'IA generativa sarà in grado di richiamarlo se lo riterrà opportuno.

5. Conferma tutte le modifiche -> d'ora in poi, se invierai la "domanda" di quel contenuto, verrà eseguito lo snippet di codice.

Implementazione con le Istruzioni

Puoi anche decidere di mostrare del codice HTML o Markdown all'interno dei messaggi. Questo è molto utile per creare delle esperienze ancora più interattive e coinvolgenti.

Per farlo:

1. Accedi alle Impostazioni > IA del tuo Agente;
2. Nel campo istruzioni, spiega all'IA come generare il codice Markdown o HTML e CSS e in quali occasioni deve farlo.

Markdown

Per le azioni più semplici, come la creazione di una tabella, è possibile sfruttare il normale codice markdown:

Quando ti viene chiesto di confrontare prodotti,
crea una tabella in markdown con i dati raccolti.

HTML e CSS

Per le visualizzazioni più complesse, puoi guidare il tuo Agente nell'utilizzo di codice HTML e CSS:

Quando ti viene chiesto di confrontare prodotti, crea una tabella in markdown con i dati raccolti. Utilizza il seguente formato:

| Caratteristica | Prodotto di partenza | Alternativa 1 | Alternativa 2 | Alternativa 3 |
|----------------|----------------------|---------------|---------------|---------------|
| [Caratteristica 1] | [Valore] | [Valore] | [Valore] | [Valore] |
| [Caratteristica 2] | [Valore] | [Valore] | [Valore] | [Valore] |

Evidenzia le differenze rispetto al prodotto di partenza utilizzando il seguente codice HTML:
<span style="background-color: #FFEBEE;">[valore diverso]</span>

Casi d'uso avanzati

Combinazione con gli snippet di codice

Puoi sfruttare la capacità del tuo Agente di mostrare codice HTML anche per far eseguire azioni più complesse all'utente.

Ad esempio, all'interno di un Agente per un e-commerce potresti insegnare all'Agente a creare un pulsante "Aggiungi al carrello" per specifici articoli. Sfrutta le Istruzioni:

Quando vedi che l'utente apprezza un prodotto,
suggerisci di aggiungerlo al carrello e mostragli
il pulsante "Aggiungi al carrello". Cambia sempre
il codice prodotto a seconda dell'articolo
che sta considerando.

<button onclick="add_to_cart([CODICE_PRODOTTO])">Aggiugni al carrello</button>

Una volta fatto questo, ti basterà scatenare uno snippet di codice all'interno della tua domanda iniziale:

function add_to_cart(productId) {
  alert('Prodotto ' + productId + ' aggiunto al carrello!');
  console.log('Aggiunto prodotto:', productId);
}

Ricorda che il modello linguistico non ha la capacità di eseguire codice JavaScript al di fuori degli snippet di codice (nemmeno sfruttando il tag HTML <script>).

Puoi insegnare al tuo Agente ad usare codice HTML e CSS nelle risposte (o puoi inserirlo direttamente nei contenuti, se il codice è statico), ma per eseguire azioni è sempre necessario sfruttare i testi preformattati.

Utilizzo con le funzioni

Le funzioni possono essere combinate con le azioni web per creare interazioni più complesse:

• Configura una funzione per recuperare dati specifici;

• Utilizza l'IA generativa per elaborare i dati e creare una tabella in Markdown direttamente nella chat;

• Presenta i risultati all'utente in modo visivamente accattivante.

Combinazione con il Gruppo di esperti

Quando utilizzi il Gruppo di esperti puoi creare un flusso di lavoro più complesso ed estremamente efficace:

• Il messaggio di benvenuto scatena uno snippet di codice che inietta il codice CSS di una libreria utile a mostrare grafici accattivanti;
• Un Agente recupera i dati necessari e chiede all'utente se vuole vedere un grafico su questi dati;

• L'utente risponde di sì: un secondo Agente analizza i dati raccolti e crea un grafico utilizzando solamente il codice HTML.

Mostrare grafici nei messaggi

Per insegnare al tuo Agente a creare grafici:

1. Trova una libreria CSS che puoi scaricare liberamente;

2. Crea un contenuto:

   1. Domanda: "iniziamo";

   2. Risposta: imposta un messaggio di benvenuto personalizzato;

   3. Aggiungi uno snippet CSS eseguibile nella sezione "Avanzate: snippet di codice"

3. Imposta il contenuto "iniziamo" come domanda iniziale nel layout di condivisione;
4. Inserisci il testo del file Readme all'interno delle istruzioni del tuo Agente.

✅ Fine! Ora il tuo Agente sa creare grafici personalizzati.

Guida interattiva

È possibile creare una guida interattiva per l'utente. Ad esempio, quando l'utente chiede "Dove trovo le impostazioni?", l'Agente può evidenziare il pulsante corrispondente nella pagina:

function highlightSettings() {
  const settingsButton = document.getElementById('settingsButton');
  settingsButton.style.boxShadow = '0 0 10px 5px yellow';
  setTimeout(() => {
    settingsButton.style.boxShadow = 'none';
  }, 3000);
}

<button onclick="highlightSettings()">Mostra impostazioni</button>

Utilizzo di typeMessageHidden()

La funzione typeMessageHidden permette di inviare messaggi nascosti in chat, come se fossero stati inviati dall'utente.

Questo può essere molto utile per far eseguire azioni specifiche all'IA generativa:

typeMessageHidden("L'utente ha appena avuto accesso alla sua area riservata.", true)

questa funzione può essere utilizzata per attivare analisi automatiche o per guidare il flusso della conversazione in modo invisibile all'utente.

La capacità di far eseguire azioni all'Agente all'interno di una pagina web apre nuove possibilità per creare esperienze utente dinamiche e personalizzate. Combinando questa funzionalità con altre caratteristiche di AIsuru, è possibile sviluppare applicazioni web altamente interattive e intelligenti.