Interface do usuário básica em React com a API do OpenAI

Neste tutorial, você aprenderá como criar uma interface de usuário básica (UI) com React que permitirá que você se comunique com a API do OpenAI. Em vez de conversar via URL no navegador, criaremos uma aplicação simples onde o usuário pode digitar texto e receber a resposta correspondente do AI. Abordaremos tanto o código frontend quanto a lógica para processar as entradas e se comunicar com a API do OpenAI.

Principais conclusões

• Você irá entender como criar um campo de entrada e um botão em React para enviar solicitações de usuário.
• Também aprenderá como fazer solicitações de busca assíncronas para a API do OpenAI e armazenar e exibir as respostas recebidas em seu estado React.

Guia passo a passo

Comece criando um novo aplicativo React ou navegando até seu aplicativo existente. No arquivo index.jsx, você configurará os componentes básicos para a interação.

Primeiro, adicione um campo de entrada onde o usuário possa digitar mensagens. Isso permitirá aos usuários interagir com a IA. Portanto, adicione um campo de entrada e um botão para enviar a solicitação.

Agora, quando o usuário digitar texto no campo de entrada e clicar no botão de Envio, você deve ser capaz de processar essa entrada. Você pode usar o Hook useState para gerenciar o valor atual do campo de entrada e a resposta da API.

Agora você precisa lidar com o evento de clique do botão. Quando o botão for pressionado, você deseja criar uma função assíncrona que faz uma solicitação de busca para o servidor. Essa função será declarada com a palavra-chave async, permitindo que você use await para esperar a resposta do servidor.

Aqui está o próximo passo: você deseja chamar a função de busca para se comunicar com a API. A URL é fornecida no formato API/Chat?MSG={userInput}, onde {userInput} é substituído pela entrada do usuário. Você pode começar usando uma string fixa para garantir que a solicitação à API funcione corretamente.

Depois de enviar a solicitação, você receberá uma resposta que precisa ser processada. Primeiro, converta a resposta em um formato JSON para facilitar o trabalho. Para isso, chame response.json().

Verifique se você pode verificar a saída no console para garantir que tudo está funcionando conforme o esperado. Após verificar a resposta, o próximo passo é armazenar a resposta em um estado que você declara mais acima.

Para melhorar ainda mais a experiência do usuário, certifique-se de que a entrada do usuário não seja sempre um valor fixo (como "hello"), mas sim a mensagem inserida. Use o Hook useRef para acessar o valor atual do campo de entrada quando o usuário clicar no botão.

Agora que você pode capturar corretamente as entradas do usuário, faça um teste da sua aplicação para verificar se as entradas são enviadas para a API e exibidas corretamente.

Se tudo estiver funcionando, você verá que a resposta do AI será exibida no DIV designado. Agora você pode continuar a aprimorar sua interface do usuário ou otimizar seu código.

No momento, trata-se apenas de um aplicativo simples de pergunta e resposta, pois o histórico do chat não é salvo. Para criar um aplicativo de chat completo, seria necessário salvar o histórico do chat e enviá-lo para a API, a fim de fornecer contexto para as respostas.

No entanto, é impressionante que já sejas capaz de usar a API da OpenAI e desenvolver a tua própria aplicação com base nesta tecnologia. Em passos futuros, podes ampliar a funcionalidade para permitir uma conversação real.

Resumo

Neste tutorial, aprendeste os passos para criar uma interface de usuário básica em React que permite a comunicação com a API da OpenAI. Desde o tratamento das entradas do usuário até a exibição das respostas, tudo foi abordado para criar uma aplicação funcional.