Como construir e implantar um aplicativo clone do ChatGPT com a API React e OpenAI

À medida que o uso de chatbots e assistentes virtuais continua a crescer, muitas empresas e desenvolvedores estão procurando maneiras de criar seus próprios chatbots com inteligência artificial. O ChatGPT é um desses chatbots, criado pela OpenAI, capaz de se envolver em conversas semelhantes às humanas e responder a uma ampla gama de perguntas.

O que você vai construir

Neste tutorial, você aprenderá como criar um aplicativo clone do ChatGPT usando React e a API OpenAI. Se você quiser experimentar um projeto divertido e envolvente no fim de semana, esta é uma ótima oportunidade para mergulhar no React e no OpenAI.

Você também aprenderá como implantar diretamente de seu repositório GitHub para a plataforma de hospedagem de aplicativos Kinsta, que fornece um domínio .kinsta.app gratuito para fazer seu projeto entrar no ar rapidamente. E com a avaliação gratuita de Kinsta e o nível Hobby, você pode começar facilmente sem nenhum custo.

Aqui está uma demonstração ao vivo do aplicativo clone do ChatGPT.

Se você quiser inspecionar este projeto mais de perto, você pode acessar seu repositório GitHub.

Como alternativa, você também pode clonar o projeto inicial do aplicativo React, que vem com elementos fundamentais, como estilos, link Font Awesome CDN, pacote OpenAI e estrutura básica, para ajudá-lo a começar.

Requisitos/Pré-requisitos

Este tutorial foi desenvolvido para ser uma experiência de “acompanhamento”. Portanto, é recomendável que você tenha o seguinte para codificar com facilidade:

• Compreensão fundamental de HTML, CSS e JavaScript
• Alguma familiaridade com React
• Node.js e npm (Node Package Manager) ou yarn instalados em seu computador

O que é OpenAI API?

A OpenAI API é uma plataforma baseada em nuvem que concede aos desenvolvedores acesso aos modelos de linguagem da OpenAI, como GPT-3, por meio de uma API. Ele permite que os desenvolvedores adicionem recursos de processamento de linguagem natural, como conclusão de texto, análise de sentimento, resumo e tradução a seus aplicativos sem desenvolver e treinar seus modelos.

Para usar a API OpenAI, os desenvolvedores devem criar uma conta no site da OpenAI e obter uma chave de API. A chave de API é usada para autenticar solicitações de API e rastrear o uso.

Depois que a chave da API é obtida, os desenvolvedores podem usar a API para enviar texto ao modelo de idioma e receber respostas.

Por que reagir?

React é uma biblioteca JavaScript popular para construir interfaces de usuário. De acordo com a pesquisa de desenvolvedores do Stack Overflow de 2022, é a segunda tecnologia da Web mais usada, com 42,62% de participação no mercado.

O React permite que os desenvolvedores criem componentes declarativos que representam diferentes partes da interface do usuário. Esses componentes são definidos usando uma sintaxe chamada JSX, que é uma combinação de JavaScript e HTML.

Graças ao seu grande ecossistema de bibliotecas e kits de componentes, os desenvolvedores podem facilmente trabalhar e integrar APIs, como a API OpenAI, para criar interfaces de bate-papo complexas e é isso que o torna uma excelente opção para criar um aplicativo clone do ChatGPT.

Como configurar seu ambiente de desenvolvimento React

A melhor maneira de instalar o React ou criar um projeto React é instalá-lo com create-react-app. Um pré-requisito é ter o Node.js instalado em sua máquina. Para confirmar que você tem o Node instalado, execute o seguinte comando em seu terminal.

 node -v

Se ele traz uma versão, então ela existe. Para usar o npx, você precisará certificar-se de que sua versão do Node não seja inferior à v14.0.0 e sua versão do NPM não seja inferior à v5.6; caso contrário, você pode precisar atualizá-lo executando npm update -g . Depois de descobrir o npm, agora você pode configurar um projeto React executando o comando abaixo:

 npx create-react-app chatgpt-clone

Observação: “chatgpt-clone” é o nome do aplicativo que estamos criando, mas você pode alterá-lo para qualquer nome de sua escolha.

O processo de instalação pode demorar alguns minutos. Uma vez bem-sucedido, você pode navegar até o diretório e instalar o pacote Node.js OpenAI, que fornece acesso conveniente à API OpenAI do Node.js usando o comando abaixo:

 npm install openai

Agora você pode executar npm start para ver seu aplicativo ativo em localhost:3000 .

Quando um projeto React é criado usando o comando create-react-app , ele cria automaticamente uma estrutura de pastas. A pasta principal que diz respeito a você é a pasta src , que é onde o desenvolvimento ocorre. Esta pasta contém muitos arquivos por padrão, mas você deve se preocupar apenas com os arquivos App.js , index.js e index.css .

1. App.js : O arquivo App.js é o componente principal em um aplicativo React. Ele normalmente representa o componente de nível superior que renderiza todos os outros componentes no aplicativo.
2. index.js : Este arquivo é o ponto de entrada do seu aplicativo React. É o primeiro arquivo carregado quando o aplicativo é aberto e é responsável por renderizar o componente App.js para o navegador.
3. index.css : Este arquivo é responsável por definir o estilo geral e o layout do seu aplicativo React.

Como construir um clone ChatGPT com API React e OpenAI

O aplicativo clone do ChatGPT consistirá em dois componentes para tornar o aplicativo mais fácil de entender e manter. Esses dois componentes são:

1. Seção de formulário : este componente inclui um campo de área de texto e um botão para os usuários interagirem com o chatbot.
2. Seção de Resposta : As perguntas e respostas correspondentes serão armazenadas em uma matriz e exibidas nesta seção. Você percorrerá o array cronologicamente, mostrando o mais recente primeiro.

Configurando o aplicativo clone do ChatGPT

Neste tutorial, vamos começar construindo a interface do aplicativo e, em seguida, você pode implementar a funcionalidade para que seu aplicativo interaja com a API OpenAI. Comece criando os dois componentes que você usará neste tutorial. Para uma organização adequada, você criará uma pasta de componentes na pasta src onde todos os componentes serão armazenados.

O componente da seção de formulário

Este é um formulário simples que consiste em uma textarea e um button de envio.

 // components/FormSection.jsx const FormSection = () => { return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." ></textarea> <button className="btn"> Generate Response </button> </div> ) } export default FormSection;

Espera-se que o formulário fique assim quando você o importar para o arquivo App.js :

O componente da seção de respostas

Esta seção é onde todas as perguntas e respostas serão exibidas. É assim que esta seção ficará quando você também a importar para o arquivo App.js.

Você buscará essas perguntas e respostas de uma matriz e um loop para facilitar a leitura e a manutenção do seu código.

 // components/AnswerSection.jsx const AnswerSection = () => { return ( <> <hr className="hr-line" /> <div className="answer-container"> <div className="answer-section"> <p className="question">Who is the founder of OpenAi?</p> <p className="answer">OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> </div> </> ) } export default AnswerSection;

A página inicial

Agora você tem ambos os componentes criados, mas nada aparecerá quando você executar seu aplicativo porque você precisa importá-los para seu arquivo App.js. Para este aplicativo, você não implementará nenhuma forma de roteamento, o que significa que o arquivo App.js servirá como componente/página inicial do seu aplicativo.

Você pode adicionar algum conteúdo, como o título e a descrição do seu aplicativo, antes de importar os componentes.

 // App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection /> <AnswerSection /> </div> ); }; export default App;

No código acima, os dois componentes são importados e adicionados ao aplicativo. Quando você executar seu aplicativo, é assim que seu aplicativo se parecerá:

Adicionando funcionalidade e integrando a API OpenAI

Agora você tem a interface do usuário do seu aplicativo. A próxima etapa é tornar o aplicativo funcional para que ele possa interagir com a API OpenAI e obter respostas. Primeiro, você precisa obter o valor do seu formulário quando enviado porque ele será usado para consultar a API OpenAI.

Obtendo dados do formulário

No React, a melhor maneira de armazenar e atualizar dados é usar estados. Em componentes funcionais, o gancho useState() é usado para trabalhar com estados. Você pode criar um estado, atribuir o valor do seu formulário ao estado e atualizá-lo sempre que seu valor mudar. Vamos começar importando o gancho useState() para o componente FormSection.jsx e, em seguida, criando um estado para armazenar e atualizar newQuestions .

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( // Form to submit a new question ) } export default FormSection;

Em seguida, você pode atribuir o valor do campo textarea ao estado e criar um evento onChange() para atualizar o estado sempre que o valor de entrada mudar:

 <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea>

Finalmente, você pode criar um evento onClick() , para carregar uma função sempre que o botão enviar for clicado. Esse método será criado no arquivo App.js e passado como props para o componente FormSection.jsx com os valores newQuestion e setNewQuestion como argumentos.

 <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button>

Agora você criou um estado para armazenar e atualizar o valor do formulário, adicionou um método que é passado como props do arquivo App.js e tratou do evento click. É assim que o código final ficará:

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea> <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button> </div> ) } export default FormSection;

A próxima etapa será criar um método no arquivo App.js para lidar com todo o processo de interação com a API OpenAI.

Interagindo com a API OpenAI

Para interagir com a API OpenAI e obter chaves de API em um aplicativo React, você deve criar uma conta da API OpenAI. Você pode se inscrever para uma conta no site da OpenAI usando sua conta do Google ou e-mail. Para gerar uma chave de API, clique em Pessoal no canto superior direito do site; algumas opções irão aparecer; clique em Exibir chaves de API .

Clique no botão Criar nova chave secreta , copie a chave em algum lugar como você a usaria neste aplicativo para interagir com o OpenAI. Agora você pode prosseguir para inicializar o OpenAI importando o pacote openai (já instalado) junto com o método de configuração. Em seguida, crie uma configuração com sua chave gerada e use-a para inicializar o OpenAI.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); return ( // Render FormSection and AnswerSection ); }; export default App;

No código acima, a chave da API OpenAI é armazenada como uma variável de ambiente no arquivo .env . Você pode criar um arquivo .env na pasta raiz do seu aplicativo e armazenar a chave na variável REACT_APP_OPENAI_API_KEY .

 // .env REACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx…

Agora você pode criar o método generateResponse no arquivo App.js e passar os dois parâmetros esperados do formulário que você já criou para lidar com a solicitação e obter a resposta da API.

 // src/App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const generateResponse = (newQuestion, setNewQuestion) => { // Set up OpenAI API and handle response }; return ( // Render FormSection and AnswerSection ); }; export default App;

Agora você pode enviar uma solicitação para a API OpenAI. A API OpenAI pode realizar muitas operações, como perguntas e respostas (P&R), correção gramatical, tradução e muito mais. Para cada uma dessas operações, as opções são diferentes. Por exemplo, o valor do mecanismo para Q&A é text-davinci-00 , enquanto para SQL translate é code-davinci-002 . Sinta-se à vontade para verificar a documentação de exemplo do OpenAI para ver os vários exemplos e suas opções.

Para este tutorial, estamos trabalhando apenas com o Q&A, é assim que a opção se parece:

 { model: "text-davinci-003", prompt: "Who is Obama?", temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ["\"], }

Nota: mudei o valor do prompt.

O prompt é a pergunta que é enviada do formulário. Isso significa que você precisará recebê-lo da entrada do formulário que está passando para o método generateResponse como um parâmetro. Para fazer isso, você definirá as opções e, em seguida, usará o operador spread para criar uma opção completa que inclua o prompt:

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; }; return ( // Render FormSection and AnswerSection ); }; export default App;

Neste ponto, o que resta é enviar uma solicitação por meio do método createCompletion para OpenAI para obter uma resposta.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); console.log(response.data.choices[0].text); }; return ( // Render FormSection and AnswerSection ); }; export default App;

No código acima, o texto da resposta será exibido em seu console. Sinta-se à vontade para testar seu aplicativo fazendo qualquer pergunta. A etapa final seria criar um estado que conterá a matriz de perguntas e respostas e, em seguida, enviar essa matriz como um suporte para o componente AnswerSection . É assim que o código final do App.js ficará:

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); if (response.data.choices) { setStoredValues([ { question: newQuestion, answer: response.data.choices[0].text, }, ...storedValues, ]); setNewQuestion(''); } }; return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection generateResponse={generateResponse} /> <AnswerSection storedValues={storedValues} /> </div> ); }; export default App;

Agora você pode editar o componente AnswerSection , para que ele receba o valor props de App.js e use o método JavaScript Map() para examinar o array storedValues :

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

Ao executar seu aplicativo e testá-lo fazendo perguntas, a resposta será exibida abaixo. Mas você notará que o botão de cópia não funciona. Você precisará adicionar um evento onClick() ao botão, para que ele acione um método para lidar com a funcionalidade. Você pode usar o método navigator.clipboard.writeText() para lidar com a funcionalidade. É assim que o componente AnswerSection ficará agora:

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { const copyText = (text) => { navigator.clipboard.writeText(text); }; return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon" onClick={() => copyText(value.answer)} > <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

Ao executar seu aplicativo, seu aplicativo clone do ChatGPT funcionará perfeitamente. Agora você pode implantar seu aplicativo para acessá-lo online e compartilhá-lo com amigos.

Como implantar seu aplicativo React em Kinsta

Não basta criar esse aplicativo e deixá-lo em seus computadores locais. Você vai querer compartilhá-lo online, para que outras pessoas possam acessá-lo. Vamos ver como fazer isso usando GitHub e Kinsta.

Envie seu código para o GitHub

Para enviar seu código para o GitHub, você pode usar comandos do Git, que é uma maneira confiável e eficiente de gerenciar alterações de código, colaborar em projetos e manter o histórico de versões.

A primeira etapa para enviar seus códigos será criar um novo repositório fazendo login em sua conta do GitHub, clicando no botão + no canto superior direito da tela e selecionando Novo repositório no menu suspenso.

Dê um nome ao seu repositório, adicione uma descrição (opcional) e escolha se deseja que seja público ou privado. Clique em Criar repositório para criá-lo.

Depois que seu repositório for criado, certifique-se de obter a URL do repositório na página principal de seu repositório, que você precisará para enviar seu código ao GitHub.

Abra seu terminal ou prompt de comando e navegue até o diretório que contém seu projeto. Execute os seguintes comandos, um por um, para enviar seu código para o repositório do GitHub:

 git init git add . git commit -m "my first commit" git remote add origin [repository URL] git push -u origin master

git init inicializa um repositório Git local, git add . adiciona todos os arquivos no diretório atual e seus subdiretórios ao novo repositório Git. git commit -m "my first commit" confirma as alterações no repositório com uma breve mensagem. git remote add origin [repository URL] define a URL do repositório como o repositório remoto e git push -u origin master envia o código para o repositório remoto (origem) na ramificação master.

Implante seu aplicativo ChatGPT Clone React para Kinsta

Para implantar seu repositório em Kinsta, siga estas etapas:

1. Faça login ou crie sua conta Kinsta no painel My Kinsta.
2. Clique em Aplicativos na barra lateral esquerda e clique em Adicionar serviço .
3. Selecione Aplicativo no menu suspenso para implantar um aplicativo React em Kinsta.
4. Selecione o repositório que deseja implantar no modal que aparece. Se você tiver várias filiais, poderá escolher aquela que deseja implantar e atribuir um nome ao aplicativo. Selecione um local de centro de dados entre os 25 disponíveis e Kinsta detectará automaticamente um comando de início.
5. Por fim, não é seguro enviar chaves de API para hosts públicos como o GitHub, ele foi adicionado localmente como uma variável de ambiente. Ao hospedar, você também pode adicioná-lo como uma variável de ambiente usando o mesmo nome de variável e a chave como seu valor.

Seu aplicativo começará a ser implantado e, em alguns minutos, um link será fornecido para acessar a versão implantada de seu aplicativo. Neste caso, é https://chatgpt-clone-g9q10.kinsta.app/ Nota: Você pode habilitar a implantação automática, então Kinsta irá reimplantar seu aplicativo sempre que você alterar sua base de código e enviá-lo para o GitHub.

Resumo

A API OpenAI pode ser usada para criar uma ampla variedade de aplicativos em potencial, desde suporte ao cliente e assistentes pessoais até tradução de idiomas e criação de conteúdo.

Neste tutorial, você aprendeu como criar um aplicativo clone ChatGPT com React e OpenAI. Você pode integrar esse aplicativo/recurso a outros aplicativos para fornecer experiências de conversação semelhantes às humanas aos usuários.

Há mais coisas que podem ser feitas com a API OpenAI e como melhorar esse aplicativo clone. Por exemplo, você pode implementar o armazenamento local para que as perguntas e respostas anteriores não desapareçam mesmo depois de atualizar o navegador.

Com a avaliação gratuita de Kinsta e o nível Hobby, você pode começar facilmente sem nenhum custo em nossa hospedagem de aplicativos. Então, por que não tentar e ver o que você pode criar?

Compartilhe seu projeto e experiências no comentário abaixo.