Construindo um aplicativo de bate-papo iterativo com React e OpenAI

Você está fascinado pelo mundo dos chatbots de IA e ansioso para criar o seu próprio? Nesta postagem, percorreremos o processo de construção de um aplicativo de bate-papo iterativo usando React JS e integração com os poderosos modelos de IA da OpenAI. Este guia pressupõe que você tenha um conhecimento básico de React e JavaScript.

Etapa 1: configure seu projeto React

Primeiro, você precisará criar um novo projeto React. Você pode fazer isso facilmente usando o aplicativo Create React:

 npx create-react-app my-chat-app
 cd my-chat-app 
npm instalar axios

Axios é um cliente HTTP baseado em promessa que usaremos para nos comunicarmos com a API OpenAI.

Etapa 2: Obtenha a chave da API OpenAI

Para usar os serviços da OpenAI, você precisará se cadastrar em sua plataforma e obter uma chave API. Lembre-se de armazenar esta chave de forma segura, de preferência em variáveis ​​de ambiente.

Etapa 3: crie a interface de bate-papo

Seu aplicativo React deve ter uma interface de chat simples compreendendo:

• Um campo de entrada para o usuário digitar suas mensagens.
• Uma área de exibição para mostrar o histórico da conversa.

Etapa 4: Integrar a API OpenAI

Usando Axios, configure uma função para enviar solicitações à API OpenAI. Você enviará a entrada do usuário para a API e receberá uma resposta.

Função de exemplo:

 import axios from 'axios' ;
 
const openAIRequest = async ( userInput ) => { 
const resposta = aguardar axios . postar ( 'https://api.openai.com/v1/engines/davinci-codex/completions' , {
 prompt : userInput , 
max_tokens : 150
 } , {
 cabeçalhos : { 
'Autorização' : ` Portador ${ processo . ambiente . REACT_APP_OPENAI_API_KEY } `
 } 
} ) ;

 resposta de retorno . dados . escolhas [ 0 ] . texto ;
 } ;

Etapa 5: gerenciar o estado do bate-papo

Mantenha o estado da conversa, incluindo as mensagens do usuário e as respostas da IA. Atualize a interface do chat a cada nova mensagem.

Etapa 6: lidar com a entrada do usuário

Quando o usuário envia uma mensagem, seu aplicativo deve:

1. Envie a mensagem para a API OpenAI.
2. Atualize o estado do chat com a mensagem do usuário e a resposta da IA.

Etapa 7: testar e refinar

Teste exaustivamente seu aplicativo para garantir que ele lide com o fluxo da conversa sem problemas. Implemente o tratamento de erros para obter mais robustez e refine a IU para uma melhor experiência do usuário.

Etapa 8: implantar seu aplicativo

Quando estiver satisfeito com seu aplicativo de bate-papo, considere implantá-lo usando um serviço como Netlify ou Vercel para compartilhá-lo com o mundo.

Exemplo de trecho de código

Aqui está um exemplo básico de como sua lógica de bate-papo pode ser:

 import React , { useState } from 'react' ; 
importar axios de 'axios' ;

 const ChatApp = ( ) => { 
const [ entrada , setInput ] = useState ( '' ) ; 
const [ mensagens , setMessages ] = useState ( [ ] ) ;
 
const sendMessage = async ( ) => {
 const aiResponse = aguarda openAIRequest ( entrada ) ; 
setMessages ( [ ... mensagens , { remetente : 'usuário' , texto : entrada } , { remetente : 'ai' , texto : aiResponse } ] ) ; 
setInput ( '' ) ;
 } ;

 retornar (
 <div>​
 <div>​ 
{ mensagens . mapa ( ( mensagem , idx ) => ( 
< p key = { idx } > < forte > { msg . remetente } : < / strong > { msg . texto } < / p > 
) ) }
 < / div > 
< valor de entrada = { entrada } onChange = { ( e ) => setInput ( e . alvo . valor ) } / > 
< button onClick = { sendMessage } > Enviar < / button >
 < / div >
 ) ;
 } ;
 
exportar ChatApp padrão ;

Lembre-se, este é apenas um ponto de partida. Você pode adicionar mais recursos como estilo, tratamento de sessão e muito mais de acordo com seus requisitos. Boa codificação! 🚀