Grunnleggende UI i React med OpenAI API

I denne veiledningen vil du lære hvordan du kan lage et grunnleggende brukergrensesnitt (UI) med React som lar deg kommunisere med OpenAI API. I stedet for å chatte via URL i nettleseren, vil vi lage en enkel applikasjon der brukeren kan skrive inn tekst og få tilsvarende svar fra AI. Vi vil håndtere både frontend-koden og logikken for å behandle inndata og kommunisere med OpenAI API.

Viktigste innsikter

• Du vil forstå hvordan du kan lage et inndatafelt og en knapp i React for å sende brukerforespørsler.
• Du vil også lære hvordan du utfører asynkrone Fetch-forespørsler til OpenAI API og lagrer og viser de mottatte svarene i React-tilstanden din.

Trinn-for-trinn-veiledning

Start med å opprette en ny React-applikasjon eller naviger til den eksisterende applikasjonen din. I index.jsx-filen vil du opprette grunnleggende komponenter for interaksjonen.

Først vil du legge til et inndatafelt der brukeren kan skrive inn meldinger. Dette gjør at brukerne kan interagere med AI-en. Legg derfor til et inndatafelt og en knapp for å sende forespørselen.

Når brukeren skriver tekst i inndatafeltet og klikker på Send-knappen, må du være i stand til å behandle denne inndataen. Du kan bruke useState-hooken til å administrere den nåværende verdien av inndataet og svaret fra API-en.

Nå må du håndtere klikkhendelsen til knappen. Når knappen trykkes, vil du opprette en asynkron funksjon som sender en Fetch-forespørsel til serveren. Denne funksjonen vil bli deklarert med nøkkelordet async, som lar deg bruke awaitempty til svaret fra serveren.

Her er neste steg: Du vil kalle Fetch-funksjonen for å kommunisere med API-en. URL-en blir gitt i formatet API/Chat?MSG={userInput}, der {userInput} blir erstattet med brukerens inndata. Du kan først bruke en statisk streng for å sikre at API-forespørselen fungerer korrekt.

Etter å ha sendt forespørselen, vil du motta et svar som må behandles. Du kan først konvertere svaret til JSON-format for å jobbe enklere med det. Dette gjøres ved å kalle response.json().

Sørg for at du kan sjekke utdataen på konsollen for å forsikre deg om at alt fungerer som forventet. Etter å ha sjekket svaret, vil det neste du vil gjøre være å lagre svaret i en tilstand du har deklarert tidligere.

For å forbedre brukeropplevelsen ytterligere, bør du sørge for at brukerens inndata ikke alltid sendes som en fast verdi (som "hello"), men den faktisk innskrevne meldingen. Bruk useRef-hooket for å få tilgang til den nåværende verdien av inndatafeltet når brukeren klikker på knappen.

Nå som du kan fange opp brukerens inndata riktig, bør du kjøre en test på applikasjonen din for å sjekke at inndataene sendes til API-en og vises riktig.

Hvis alt fungerer som det skal, vil du se at svaret fra AI-en vises på det angitte DIV-et. Nå kan du fortsette å designe brukergrensesnittet ditt eller optimalisere koden.

Foreløpig er dette bare en enkel spørsmål-svar-applikasjon, siden chatloggen ikke lagres. For å lage en fullstendig chat-applikasjon, må du lagre chatloggen selv og sende den til API-en, slik at den har kontekst for svarene.

Likevel er det imponerende at du allerede er i stand til å bruke OpenAI API-en og dermed utvikle din egen applikasjon basert på denne teknologien. I fremtidige trinn kan du utvide funksjonaliteten for å muliggjøre en ekte chatlogg.

Sammendrag

I denne opplæringen har du lært stegene for å opprette et grunnleggende grensesnitt i React som tillater kommunikasjon med OpenAI API-en. Alt fra håndtering av brukerinput til visning av svar ble dekket for å opprette en funksjonell applikasjon.