Grundläggande UI i React med OpenAI API

I denna handledning kommer du att lära dig hur du kan skapa en grundläggande användargränssnitt (UI) med React, som tillåter dig att kommunicera med OpenAI API. Istället för att chatta via URL i webbläsaren, kommer vi att skapa en enkel applikation där användaren kan skriva in text och få motsvarande svar från AI. Vi kommer att hantera både front-end-koden och logiken för att behandla inmatningar och kommunicera med OpenAI API.

Viktigaste insikter

• Du kommer att förstå hur man skapar ett inmatningsfält och en knapp i React för att skicka användarförfrågningar.
• Dessutom kommer du att lära dig hur man gör asynkrona Fetch-förfrågningar till OpenAI API för att spara och visa de mottagna svaren i din React-state.

Steg-för-steg-guide

Börja med att skapa en ny React-applikation eller navigera till din befintliga applikation. I index.jsx-filen kommer du att konfigurera grundläggande komponenter för interaktionen.

Först vill du lägga till ett inmatningsfält där användaren kan skriva sina meddelanden. Detta möjliggör interaktion med AI. Lägg till ett inmatningsfält och en knapp för att skicka förfrågan.

När användaren skriver in text i inmatningsfältet och klickar på knappen för att skicka, måste du kunna hantera denna inmatning. Du kan använda useState-hook för att hantera det aktuella värdet på inmatningen och svaret från API:en.

Nu måste du hantera knappens klickevenemang. När knappen trycks vill du skapa en asynkron funktion som gör en Fetch-förfrågan till servern. Denna funktion deklareras med nyckelordet async, vilket gör det möjligt för dig att använda await för att vänta på svaret från servern.

Här är nästa steg: Du vill anropa Fetch-funktionen för att kommunicera med API:en. URL:en anges i formatet API/Chat?MSG={userInput}, där {userInput} ersätts med användarinputen. Du kan först använda en fast sträng för att säkerställa att API-förfrågan fungerar korrekt.

Efter att du har skickat förfrågan får du ett svar som du behöver hantera. För att arbeta enklare med svaret kan du konvertera det till JSON-format först. Gör detta genom att anropa response.json().

Se till att du kan kontrollera utmatningen i konsolen för att säkerställa att allt fungerar som förväntat. Efter att du har granskat svaret är nästa steg att spara svaret i en status som du tidigare deklarerat.

För att vidare förbättra användarupplevelsen vill du säkerställa att användarens inmatning inte alltid skickas med ett fast värde (som "hello"), utan med det faktiska meddelandet som matats in. Använd useRef-hooket för att komma åt det aktuella värdet på inmatningsfältet när användaren klickar på knappen.

Nu när du kan fånga användarens inmatningar korrekt bör du köra en test av din applikation för att säkerställa att inmatningar skickas till API:en och visas korrekt.

När allt fungerar som det ska ser du att svaret från AI:en visas i det angivna DIV:et. Nu kan du fortsätta att styla din användargränssnitt eller optimera koden.

För närvarande är det bara en enkel fråga-svar-applikation eftersom chattloggen inte sparas. För att skapa en komplett chattapplikation skulle det vara nödvändigt att spara chattloggen själv och skicka den till API:en så att den har kontext för svaren.

Ändå är det imponerande att du redan kan använda OpenAI API och därmed utveckla en egen applikation baserad på denna teknologi. I framtida steg kan du utöka funktionaliteten för att möjliggöra en verklig chattkonversation.

Sammanfattning

I den här handledningen har du lärt dig stegen för att skapa en grundläggande användargränssnitt i React som möjliggör kommunikation med OpenAI API. Allt från hanteringen av användarinput till visningen av svaren har behandlats för att skapa en funktionsduglig applikation.