Interfacce web: creare esperienze interattive

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

Come funziona

L'Agente può eseguire azioni all'interno di una pagina web tramite l'uso di snippet di codice.

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

Implementazione con i contenuti

Per consentire a un Agente di eseguire azioni su una pagina web:

1. Vai al pannello di gestione del tuo Agente;

2. Vai alla sezione Contenuti dalla barra laterale;

3. Seleziona un contenuto specifico e premi il pulsante modifica -> ad esempio, un contenuto con "iniziamo" come domanda e un messaggio di benvenuto come risposta;

4. Scorri fino alla sezione "Avanzate: testo preformattato" e fai clic su + Nuovo snippet:

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

   2. Seleziona il linguaggio;

   3. Seleziona la casella Command per attivarla, rendendo eseguibile lo snippet.

   4. Assegna allo snippet un titolo descrittivo e dettagliato -> in questo modo, anche l'IA generativa potrà richiamarlo quando lo riterrà opportuno;

5. Conferma tutte le modifiche -> da questo momento, ogni volta che invierai la "domanda" di quel contenuto, verrà eseguito lo snippet di codice.

Implementazione con le istruzioni

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

Per farlo:

1. Vai a Impostazioni > IA del tuo Agente;

2. Nel campo istruzioni, spiega all'IA come generare codice Markdown oppure HTML e CSS e quando farlo.

Markdown

Per azioni più semplici, come creare una tabella, puoi usare il codice Markdown standard:

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

HTML e CSS

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

When asked to compare products, create a markdown table with the collected data. Use the following format:

| Feature | Starting product | Alternative 1 | Alternative 2 | Alternative 3 |
|---------|-----------------|---------------|---------------|---------------|
| [Feature 1] | [Value] | [Value] | [Value] | [Value] |
| [Feature 2] | [Value] | [Value] | [Value] | [Value] |

Highlight differences from the starting product using the following HTML:
<span style="background-color: #FFEBEE;">[different value]</span>

Casi d'uso avanzati

Combinazione con gli snippet di codice

Puoi usare la capacità del tuo Agente di visualizzare HTML anche per attivare azioni utente più complesse.

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

When you see the user is interested in a product,
suggest adding it to the cart and show them
the "Add to cart" button. Always change
the product code depending on the item
they're considering.

<button onclick="add_to_cart([PRODUCT_CODE])">Add to cart</button>

Dopo averlo fatto, devi solo attivare uno snippet di codice all'interno della tua domanda iniziale:

function add_to_cart(productId) {
  alert('Product ' + productId + ' added to cart!');
  console.log('Added product:', productId);
}

Ricorda che il modello linguistico non può eseguire codice JavaScript al di fuori degli snippet di codice (nemmeno usando il tag HTML <script>).

Puoi insegnare al tuo Agente a usare HTML e CSS nelle risposte (oppure inserirli direttamente nei contenuti se il codice è statico), ma per eseguire azioni devi sempre usare 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;

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

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

Combinazione con il Gruppo di Esperti

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

• Il messaggio di benvenuto attiva uno snippet di codice che inietta il codice CSS di una libreria utile per visualizzare grafici accattivanti;

• Un Agente recupera i dati necessari e chiede all'utente se desidera vedere un grafico;

• L'utente risponde di sì: un secondo Agente analizza i dati raccolti e crea un grafico usando solo HTML.

Visualizzazione di 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 del tuo Agente nelle istruzioni.

✅ Fatto! Ora il tuo Agente sa come creare grafici personalizzati.

Guida interattiva

Puoi 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()">Show settings</button>

Utilizzo di typeMessageHidden()

La funzione typeMessageHidden ti consente di inviare messaggi nascosti nella chat, come se fossero inviati dall'utente.

Questo può essere molto utile per attivare azioni specifiche dall'IA generativa:

typeMessageHidden("The user has just accessed their private area.", 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 capacità di AIsuru, puoi creare applicazioni web altamente interattive e intelligenti.