> For the complete documentation index, see [llms.txt](https://docs.aisuru.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aisuru.com/avanzate/interfacce-web-come-creare-esperienze-interattive.md).

# 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](/istruzione-gestione-contenuti-agenti/istruzione-sezione-avanzata/personalizzazione-dei-contenuti/gestione-dei-testi-preformattati-snippet-di-codice.md).

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**](/ai-generativa/prompt-engineering.md), 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:

<pre><code><strong>Quando ti viene chiesto di confrontare prodotti,
</strong><strong>crea una tabella Markdown con i dati raccolti.
</strong></code></pre>

#### 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](/istruzione-gestione-contenuti-agenti/istruzione-sezione-avanzata/personalizzazione-dei-contenuti/gestione-dei-testi-preformattati-snippet-di-codice.md) all'interno della tua [domanda iniziale](broken://pages/dKFXtchoofBRemue3uig):

```javascript
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](/avanzate/integrazioni/funzioni.md) 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](/estensioni/gruppo-di-esperti.md) puoi creare un flusso di lavoro più complesso ed estremamente efficace:

* Il messaggio di benvenuto attiva uno [snippet di codice](/istruzione-gestione-contenuti-agenti/istruzione-sezione-avanzata/personalizzazione-dei-contenuti/gestione-dei-testi-preformattati-snippet-di-codice.md) 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**](broken://pages/ZoKJtxU9NkckDbxq96s2#advanced-parameters);
4. Inserisci il **testo del file Readme del tuo Agente nelle** [**istruzioni**](/ai-generativa/prompt-engineering.md).

✅ 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:

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

```html
<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:

```javascript
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.