Interfaccia utente di base in React con API di OpenAI

In questo tutorial imparerai come creare un'interfaccia utente di base (UI) con React che ti permetta di comunicare con l'API di OpenAI. Invece di chattare tramite l'URL nel browser, creeremo un'applicazione semplice in cui l'utente può inserire del testo e ricevere la risposta corrispondente dall'IA. Affronteremo sia il codice frontend che la logica per elaborare gli input e comunicare con l'API di OpenAI.

Punti principali

• Imparerai come creare un campo di input e un pulsante in React per inviare richieste degli utenti.
• Inoltre, imparerai come effettuare richieste Fetch asincrone all'API di OpenAI e salvare e visualizzare le risposte ricevute nello stato di React.

Istruzioni passo dopo passo

Inizia creando una nuova applicazione React o naviga nella tua applicazione esistente. Nel file index.jsx imposterai componenti di base per l'interazione.

Prima di tutto, aggiungi un campo di input in cui l'utente possa inserire i messaggi. Questo consente agli utenti di interagire con l'IA. Aggiungi quindi un campo di input e un pulsante per inviare la richiesta.

Quando l'utente inserisce del testo nel campo di input e fa clic sul pulsante Invia, devi essere in grado di elaborare quell'input. Puoi utilizzare il useState-Hook per gestire il valore attuale dell'input e la risposta dall'API.

Ora devi gestire l'evento di clic del pulsante. Quando viene premuto il pulsante, desideri creare una funzione asincrona che invii una richiesta Fetch al server. Questa funzione viene dichiarata con la parola chiave async, il che ti consente di utilizzare await per attendere la risposta dal server.

Ecco il prossimo passo: devi chiamare la funzione Fetch per comunicare con l'API. L'URL è fornito nel formato API/Chat?MSG={userInput}, dove {userInput} è sostituito dall'input dell'utente. Inizialmente puoi utilizzare una stringa fissa per assicurarti che la richiesta API funzioni correttamente.

Dopo aver inviato la richiesta, riceverai una risposta che devi elaborare. Puoi convertire la risposta inizialmente in un formato JSON per lavorarci più agevolmente. Per fare ciò, chiama response.json().

Assicurati di poter controllare l'output nella console per verificare che tutto funzioni come previsto. Dopo aver controllato la risposta, il prossimo passo sarà salvare la risposta in uno stato che hai dichiarato in precedenza.

Per migliorare ulteriormente l'esperienza dell'utente, assicurati che l'input dell'utente non venga sempre inviato con un valore fisso (come "ciao"), ma con il messaggio effettivamente inserito. Utilizza il useRef-Hook per accedere al valore attuale del campo di input quando l'utente fa clic sul pulsante.

Ora che sei in grado di catturare correttamente gli input dell'utente, effettua una prova della tua applicazione per verificare che gli input vengano inviati all'API e visualizzati correttamente.

Se tutto funziona, vedrai che la risposta dell'IA viene visualizzata nel DIV previsto. Ora puoi continuare a personalizzare la tua interfaccia utente o a ottimizzare il codice.

Attualmente si tratta solo di un'applicazione semplice domanda-risposta, poiché la cronologia della chat non viene salvata. Per creare un'applicazione di chat completa, sarebbe necessario salvare la cronologia della chat e inviarla all'API in modo che abbia un contesto per le risposte.

Tuttavia, è impressionante che tu sia già in grado di utilizzare l'API di OpenAI e sviluppare un'applicazione basata su questa tecnologia. Nei passi futuri, potrai espandere la funzionalità per consentire una vera e propria conversazione.

Riepilogo

In questo tutorial hai imparato i passi per creare un'interfaccia utente di base in React che consente la comunicazione con l'API di OpenAI. Dalla gestione degli input utente alla visualizzazione delle risposte, è stato affrontato tutto per creare un'applicazione funzionale.