{"id":58073,"date":"2023-03-16T06:35:53","date_gmt":"2023-03-16T09:35:53","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=58073&#038;preview=true&#038;preview_id=58073"},"modified":"2025-01-31T11:18:30","modified_gmt":"2025-01-31T14:18:30","slug":"aplicativo-clone-chatgpt-react-e-api-openai","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/","title":{"rendered":"Como Construir e Implantar um Aplicativo Clone do ChatGPT com React e a API da OpenAI"},"content":{"rendered":"<p>\u00c0 medida que o uso de chatbots e assistentes virtuais continua a crescer, muitas empresas e desenvolvedores est\u00e3o procurando maneiras de criar seus pr\u00f3prios chatbots alimentados por intelig\u00eancia artificial. O ChatGPT \u00e9 um desses chatbots, criado pela OpenAI, capaz de se envolver em conversas humanas e responder a uma ampla variedade de perguntas.<\/p>\n<h2>Como construir um chatbot com React e OpenAI<\/h2>\n<p>Neste tutorial, voc\u00ea aprender\u00e1 como construir um aplicativo clone do ChatGPT usando <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a> e a API da OpenAI. Se voc\u00ea quiser experimentar um projeto divertido e envolvente durante o fim de semana, esta \u00e9 uma grande oportunidade para explorar o React e OpenAI.<\/p>\n<p>Voc\u00ea tamb\u00e9m aprender\u00e1 como implantar diretamente do seu reposit\u00f3rio GitHub na plataforma de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hospedagem de Aplicativos<\/a> da Kinsta, que fornece um dom\u00ednio <em>.kinsta.app<\/em> gratuito para fazer seu projeto entrar em funcionamento rapidamente. E com o teste gratuito e o <a href=\"https:\/\/sevalla.com\/pricing\/\">Hobby Tier<\/a>, voc\u00ea pode facilmente come\u00e7ar sem nenhum custo.<\/p>\n<p>Aqui est\u00e1 uma demonstra\u00e7\u00e3o do <a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">aplicativo clone do ChatGPT<\/a>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/chatgpt-clone-application.jpg\" alt=\"Aplicativo clone do ChatGPT\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Aplicativo clone do ChatGPT<\/figcaption><\/figure>\n<p>Se voc\u00ea gostaria de inspecionar este projeto mais de perto, voc\u00ea pode acessar seu <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\" target=\"_blank\" rel=\"noopener noreferrer\">reposit\u00f3rio GitHub<\/a>.<\/p>\n<p>Alternativamente, usando <a href=\"https:\/\/github.com\/olawanlejoel\/chatgpt-clone\/tree\/starter-code\">este\u00a0modelo de projeto inicial<\/a>, voc\u00ea pode selecionar <strong>Use this template &gt; Create a new repository<\/strong>\u00a0&#8211; isso copiar\u00e1 o c\u00f3digo inicial para um novo reposit\u00f3rio. Este projeto inicial vem com elementos fundamentais, como estilos, link do Font Awesome CDN,\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/openai\">pacote OpenAI<\/a>\u00a0e estrutura b\u00e1sica para ajud\u00e1-lo a come\u00e7ar.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>O cr\u00e9dito gratuito para o uso da API da OpenAI \u00e9 limitado a $18. Se voc\u00ea estiver testando <a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\">este aplicativo de demonstra\u00e7\u00e3o<\/a> e ele parar de funcionar, isso significa que o cr\u00e9dito pode ter acabado. Para continuar usando a API da OpenAI, voc\u00ea precisar\u00e1 atualizar seu plano.<\/p>\n<\/aside>\n\n<h3>Requisitos\/Pr\u00e9-requisitos<\/h3>\n<p>Este tutorial foi criado para que voc\u00ea possa acompanhar passo a passo. Por isso, \u00e9 recomend\u00e1vel que voc\u00ea tenha o seguinte para poder codificar facilmente junto:<\/p>\n<ul>\n<li>Entendimento fundamental de <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a>, e <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a><\/li>\n<li>Alguma familiaridade com <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a><\/li>\n<li>Node.js e npm (<a href=\"https:\/\/kinsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">Gerenciador de Pacotes Node<\/a>) ou Yarn instalados em seu computador.<\/li>\n<\/ul>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>O que \u00e9 OpenAI API?<\/h2>\n<p>O <a href=\"https:\/\/platform.openai.com\/overview\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI API<\/a> \u00e9 uma plataforma baseada em nuvem que concede aos desenvolvedores acesso aos modelos de linguagem do OpenAI, como o GPT-3, atrav\u00e9s de uma API. Ela permite que os desenvolvedores adicionem recursos de processamento de linguagem natural, como conclus\u00e3o de texto, an\u00e1lise de sentimentos, resumo e tradu\u00e7\u00e3o aos seus aplicativos, sem desenvolver e treinar seus pr\u00f3prios modelos de IA.<\/p>\n<p>Para usar a API da OpenAI, os desenvolvedores devem criar uma conta no <a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">site OpenAI<\/a> e obter uma chave da API. A chave da API \u00e9 usada para autenticar as solicita\u00e7\u00f5es da API e rastrear o uso.<\/p>\n<p>Uma vez obtida a chave da API, os desenvolvedores podem usar a API para enviar texto para o modelo de linguagem e receber respostas.<\/p>\n\n<h2>Por que React?<\/h2>\n<p>React \u00e9 uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/\">popular biblioteca JavaScript<\/a> para a constru\u00e7\u00e3o de interfaces de usu\u00e1rio. De acordo com a <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#section-most-popular-technologies-web-frameworks-and-technologies\" target=\"_blank\" rel=\"noopener noreferrer\">pesquisa de desenvolvedores Stack Overflow 2022<\/a>, ela \u00e9 a segunda tecnologia web mais usada, com 42,62% de participa\u00e7\u00e3o de mercado.<\/p>\n<p>React permite que os desenvolvedores criem componentes declarativos representando diferentes partes da interface do usu\u00e1rio. Estes componentes s\u00e3o definidos usando uma sintaxe chamada JSX, que \u00e9 uma combina\u00e7\u00e3o de JavaScript e HTML.<\/p>\n<p>Gra\u00e7as ao seu grande <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-de-componentes-react\/\">ecossistema de bibliotecas de componentes e kits<\/a>, os desenvolvedores podem facilmente trabalhar e integrar APIs como a API OpenAI, para construir interfaces de chat complexas e altamente personaliz\u00e1veis, e isso \u00e9 o que faz dela uma excelente escolha para a constru\u00e7\u00e3o de um aplicativo clone do ChatGPT.<\/p>\n<h3>Como configurar o seu ambiente de desenvolvimento React<\/h3>\n<p>A melhor maneira de <a href=\"https:\/\/kinsta.com\/pt\/blog\/react-no-windows-macos-e-linux\/\">instalar o React<\/a> ou criar um projeto React \u00e9 instal\u00e1-lo com o <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">create-react-app<\/a>. Um pr\u00e9-requisito \u00e9 ter o <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-o-node-js\/\">Node.js instalado em sua m\u00e1quina<\/a>. Para confirmar que voc\u00ea tem o Node instalado, execute o seguinte comando em seu terminal.<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Se ele traz uma vers\u00e3o, ent\u00e3o ele existe. Para usar o <a href=\"https:\/\/github.com\/npm\/npm\/releases\/tag\/v5.2.0\" target=\"_blank\" rel=\"noopener noreferrer\">npx<\/a>, voc\u00ea precisar\u00e1 ter certeza de que sua vers\u00e3o do Node n\u00e3o \u00e9 inferior \u00e0 v14.0.0, e sua vers\u00e3o do NPM n\u00e3o \u00e9 inferior \u00e0 v5.6; caso contr\u00e1rio, voc\u00ea pode precisar atualiz\u00e1-la executando <code>npm update -g<\/code>. Uma vez que voc\u00ea tenha descoberto o npm, voc\u00ea pode agora configurar um projeto React executando o comando abaixo:<\/p>\n<pre><code class=\"language-bash\">npx create-react-app chatgpt-clone<\/code><\/pre>\n<p><strong>Nota:<\/strong> \u201cchatgpt-clone\u201d \u00e9 o nome do aplicativo que estamos criando, mas voc\u00ea pode mud\u00e1-lo para qualquer nome da sua escolha.<\/p>\n<p>O processo de instala\u00e7\u00e3o pode demorar alguns minutos. Uma vez bem-sucedido, voc\u00ea pode navegar at\u00e9 o diret\u00f3rio e instalar o pacote Node.js OpenAI, que fornece acesso conveniente \u00e0 OpenAI API a partir do Node.js usando o comando abaixo:<\/p>\n<pre><code class=\"language-bash\">npm install openai<\/code><\/pre>\n<p>Agora voc\u00ea pode executar <code>npm start<\/code> para ver seu aplicativo em tempo real no <strong>localhost:3000<\/strong>.<\/p>\n<p>Quando um projeto React \u00e9 criado usando o comando <code>create-react-app<\/code>, ele automaticamente gera uma estrutura de pastas. A pasta principal que lhe diz respeito \u00e9 a pasta <code>src<\/code>, que \u00e9 onde o desenvolvimento acontece. Esta pasta cont\u00e9m muitos arquivos por padr\u00e3o, mas voc\u00ea s\u00f3 deve se preocupar com os arquivos <strong>App.js<\/strong>, <strong>index.js<\/strong> e <strong>index.css<\/strong>.<\/p>\n<ol>\n<li><strong>App.js<\/strong>: O arquivo <strong>App.js<\/strong> \u00e9 o componente principal em um aplicativo React. Normalmente, ele representa o componente de n\u00edvel superior que renderiza todos os outros componentes no aplicativo.<\/li>\n<li><strong>index.js<\/strong>: Este arquivo \u00e9 o ponto de entrada do seu aplicativo React. \u00c9 o primeiro arquivo carregado quando o aplicativo \u00e9 aberto e \u00e9 respons\u00e1vel por renderizar o componente <strong>App.js<\/strong> para o navegador.<\/li>\n<li><strong>index.css<\/strong>: Este arquivo \u00e9 respons\u00e1vel por definir o estilo geral e o layout do seu aplicativo React.<\/li>\n<\/ol>\n<h2>Como construir um clone do ChatGPT com React e OpenAI API<\/h2>\n<p>O aplicativo clone do ChatGPT consistir\u00e1 de dois componentes para tornar o aplicativo mais f\u00e1cil de entender e manter. Estes dois componentes s\u00e3o:<\/p>\n<ol>\n<li><strong>Se\u00e7\u00e3o de Formul\u00e1rio<\/strong>: Este componente inclui um campo de \u00e1rea de texto e um bot\u00e3o para os usu\u00e1rios interagirem com o chatbot.<\/li>\n<li><strong>Se\u00e7\u00e3o de Resposta<\/strong>: As perguntas e respostas correspondentes ser\u00e3o armazenadas em um array e exibidas nesta se\u00e7\u00e3o. Voc\u00ea ir\u00e1 percorrer o array cronologicamente, mostrando o mais recente primeiro.<\/li>\n<\/ol>\n<h3>Configurando o aplicativo clone do ChatGPT<\/h3>\n<p>Neste tutorial, come\u00e7aremos por construir primeiro a interface do aplicativo e depois voc\u00ea pode implementar funcionalidades para que seu aplicativo interaja com a API da OpenAI. Comece criando os dois componentes que voc\u00ea ir\u00e1 usar neste tutorial. Para uma organiza\u00e7\u00e3o adequada, voc\u00ea criar\u00e1 uma pasta de <strong>componentes<\/strong> na pasta <strong>src<\/strong> onde todos os componentes ser\u00e3o armazenados.<\/p>\n<h4>O componente da se\u00e7\u00e3o de formul\u00e1rio<\/h4>\n<p>Esta \u00e9 uma forma simples que consiste em um <code>textarea<\/code> e uma submiss\u00e3o <code>button<\/code>.<\/p>\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\/\/ components\/FormSection.jsx\n\nconst FormSection = () =&gt; {\n\n    return (\n        &lt;div className=\"form-section\"&gt;\n            &lt;textarea\n                rows=\"5\"\n                className=\"form-control\"\n                placeholder=\"Ask me anything...\"\n            &gt;&lt;\/textarea&gt;\n            &lt;button className=\"btn\"&gt;\n                Generate Response \ud83e\udd16\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    )\n}\n\nexport default FormSection;<\/code><\/pre>\n<p>Aqui est\u00e1 como o formul\u00e1rio deve parecer quando voc\u00ea o importa para o arquivo <strong>App.js<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/form-section-component.jpg\" alt=\"Componente da se\u00e7\u00e3o de formul\u00e1rio\" width=\"1600\" height=\"360\"><figcaption class=\"wp-caption-text\">Componente da se\u00e7\u00e3o de formul\u00e1rio<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>O foco deste tutorial \u00e9 mais na constru\u00e7\u00e3o e implanta\u00e7\u00e3o do seu aplicativo. Portanto, voc\u00ea pode copiar os estilos do arquivo <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">src\/index.css<\/a> para o seu pr\u00f3prio projeto para obter o mesmo resultado\/aplicativo.<\/p>\n<\/aside>\n\n<h4>O componente da se\u00e7\u00e3o de resposta<\/h4>\n<p>Esta se\u00e7\u00e3o \u00e9 onde todas as perguntas e respostas ser\u00e3o exibidas. Isso \u00e9 o que esta se\u00e7\u00e3o parecer\u00e1 quando voc\u00ea tamb\u00e9m a importar para o seu arquivo <strong>App.js<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/answer-section-component.jpg\" alt=\"Componente da se\u00e7\u00e3o de resposta\" width=\"1600\" height=\"347\"><figcaption class=\"wp-caption-text\">Componente da se\u00e7\u00e3o de resposta<\/figcaption><\/figure>\n<p>Voc\u00ea ir\u00e1 buscar essas perguntas e respostas de um array e loop para tornar seu c\u00f3digo mais f\u00e1cil de ler e manter.<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/AnswerSection.jsx\n\nconst AnswerSection = () =&gt; {\n    return (\n        &lt;&gt;\n            &lt;hr className=\"hr-line\" \/&gt;\n            &lt;div className=\"answer-container\"&gt;\n                &lt;div className=\"answer-section\"&gt;\n                    &lt;p className=\"question\"&gt;Who is the founder of OpenAi?&lt;\/p&gt;\n                    &lt;p className=\"answer\"&gt;OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.&lt;\/p&gt;\n                    &lt;div className=\"copy-icon\"&gt;\n                        &lt;i className=\"fa-solid fa-copy\"&gt;&lt;\/i&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    )\n}\n\nexport default AnswerSection;<\/code><\/pre>\n<h4>A p\u00e1gina principal<\/h4>\n<p>Agora voc\u00ea tem os dois componentes criados, mas nada aparecer\u00e1 quando voc\u00ea executar o seu aplicativo, pois voc\u00ea precisa import\u00e1-los para o seu arquivo <strong style=\"font-size: 1rem\">App.js<\/strong>. Para este aplicativo, voc\u00ea n\u00e3o implementar\u00e1 nenhum tipo de roteamento, o que significa que o arquivo <strong style=\"font-size: 1rem\">App.js<\/strong> ser\u00e1 o componente\/p\u00e1gina inicial do seu aplicativo.<\/p>\n<p>Voc\u00ea pode adicionar algum conte\u00fado, como o t\u00edtulo e descri\u00e7\u00e3o do seu aplicativo, antes de importar os componentes.<\/p>\n<pre><code class=\"language-jsx\">\/\/ App.js\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    return (\n        &lt;div&gt;\n            &lt;div className=\"header-section\"&gt;\n                &lt;h1&gt;ChatGPT CLONE \ud83e\udd16&lt;\/h1&gt;\n                &lt;p&gt;\n                    I am an automated question and answer system, designed to assist you\n                    in finding relevant information. You are welcome to ask me any queries\n                    you may have, and I will do my utmost to offer you a reliable\n                    response. Kindly keep in mind that I am a machine and operate solely\n                    based on programmed algorithms.\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n\n            &lt;FormSection \/&gt;\n            &lt;AnswerSection \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>No c\u00f3digo acima, os dois componentes s\u00e3o importados e adicionados ao aplicativo. Quando voc\u00ea executar seu aplicativo, esta ser\u00e1 a apar\u00eancia:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/chatgpt-clone-application-1.jpg\" alt=\"Aplicativo clone do ChatGPT\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Aplicativo clone do ChatGPT<\/figcaption><\/figure>\n<h3>Adicionando funcionalidade e integrando a API da OpenAI<\/h3>\n<p>Agora voc\u00ea tem a interface do usu\u00e1rio do seu aplicativo. O pr\u00f3ximo passo \u00e9 tornar o aplicativo funcional para que ela possa interagir com a API da OpenAI e obter respostas. Primeiro, voc\u00ea precisa obter o valor do seu formul\u00e1rio quando enviado, pois ele ser\u00e1 usado para consultar a API da OpenAI.<\/p>\n<h4>Obtendo dados do formul\u00e1rio<\/h4>\n<p>Em React, a melhor maneira de armazenar e atualizar dados \u00e9 usar os estados. Em componentes funcionais, o hook <code>useState()<\/code> \u00e9 usado para trabalhar com estados. Voc\u00ea pode criar um estado, atribuir o valor do seu formul\u00e1rio ao estado e atualiz\u00e1-lo sempre que o seu valor mudar. Come\u00e7aremos importando o hook <code>useState()<\/code> para o componente <strong>FormSection.jsx<\/strong> e depois criar um estado para armazenar e atualizar <code>newQuestions<\/code>.<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/FormSection.jsx\n\nimport { useState } from 'react';\n\nconst FormSection = ({ generateResponse }) =&gt; {\n    const [newQuestion, setNewQuestion] = useState('');\n\n    return (\n        \/\/ Form to submit a new question\n    )\n}\n\nexport default FormSection;<\/code><\/pre>\n<p>Em seguida, voc\u00ea pode atribuir o valor do campo <code>textarea<\/code> ao estado e criar um evento <code>onChange()<\/code> para atualizar o estado sempre que o valor de entrada mudar:<\/p>\n<pre><code class=\"language-html\">&lt;textarea\n    rows=\"5\"\n    className=\"form-control\"\n    placeholder=\"Ask me anything...\"\n    value={newQuestion}\n    onChange={(e) =&gt; setNewQuestion(e.target.value)}\n&gt;&lt;\/textarea&gt;<\/code><\/pre>\n<p>Finalmente, voc\u00ea pode criar um evento <code>onClick()<\/code>, para carregar uma fun\u00e7\u00e3o sempre que o bot\u00e3o de envio for clicado. Este m\u00e9todo ser\u00e1 criado no arquivo <strong>App.js<\/strong> e ser\u00e1 passado como um suporte no componente <strong>FormSection.jsx<\/strong> com os valores <code>newQuestion<\/code> e <code>setNewQuestion<\/code> como argumentos.<\/p>\n<pre><code class=\"language-html\">&lt;button className=\"btn\" onClick={() =&gt; generateResponse(newQuestion, setNewQuestion)}&gt;\n    Generate Response \ud83e\udd16\n&lt;\/button&gt;<\/code><\/pre>\n<p>Agora voc\u00ea criou um estado para armazenar e atualizar o valor do formul\u00e1rio, adicionou um m\u00e9todo passado como uma propriedade do arquivo <strong>App.js<\/strong> e manipulou o evento de clique. \u00c9 assim que o c\u00f3digo final ficar\u00e1:<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/FormSection.jsx\n\nimport { useState } from 'react';\n\nconst FormSection = ({ generateResponse }) =&gt; {\n    const [newQuestion, setNewQuestion] = useState('');\n\n    return (\n        &lt;div className=\"form-section\"&gt;\n            &lt;textarea\n                rows=\"5\"\n                className=\"form-control\"\n                placeholder=\"Ask me anything...\"\n                value={newQuestion}\n                onChange={(e) =&gt; setNewQuestion(e.target.value)}\n            &gt;&lt;\/textarea&gt;\n            &lt;button className=\"btn\" onClick={() =&gt; generateResponse(newQuestion, setNewQuestion)}&gt;\n                Generate Response \ud83e\udd16\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    )\n}\n\nexport default FormSection;<\/code><\/pre>\n<p>O pr\u00f3ximo passo ser\u00e1 criar um m\u00e9todo no arquivo <strong>App.js<\/strong> para lidar com todo o processo de intera\u00e7\u00e3o com a API da OpenAI.<\/p>\n<h4>Interagindo com a OpenAI API<\/h4>\n<p>Para interagir com o OpenAI API e obter chaves API em um aplicativo React, voc\u00ea deve criar uma conta OpenAI API. Voc\u00ea pode se inscrever em uma conta no site do OpenAI usando sua conta no Google ou e-mail. Para gerar uma chave API, clique em <strong>Personal<\/strong> no canto superior direito do site; algumas op\u00e7\u00f5es aparecer\u00e3o; clique em <strong>View API keys<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/view-openai-api-keys.jpg\" alt=\"Acesse as teclas API do OpenAI.\" width=\"1600\" height=\"977\"><figcaption class=\"wp-caption-text\">Acesse as teclas API do OpenAI.<\/figcaption><\/figure>\n<p>Clique no bot\u00e3o <strong>Create new secret key<\/strong>, copie a chave em algum lugar como voc\u00ea a usaria neste aplicativo para interagir com o OpenAI. Agora voc\u00ea pode proceder para inicializar o OpenAI importando o pacote openAI (voc\u00ea j\u00e1 instalou) com o m\u00e9todo de configura\u00e7\u00e3o. Ent\u00e3o crie uma configura\u00e7\u00e3o com sua chave gerada e use-a para inicializar o OpenAI.<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport { Configuration, OpenAIApi } from 'openai';\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    return (\n        \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>No c\u00f3digo acima, a chave API do OpenAI \u00e9 armazenada como uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-sao-variaveis-de-ambiente\/\">vari\u00e1vel de ambiente<\/a> no arquivo <strong>.env.<\/strong> Voc\u00ea pode criar um arquivo <strong>.env<\/strong> na pasta raiz do seu aplicativo e armazenar a chave para a vari\u00e1vel <code>REACT_APP_OPENAI_API_KEY<\/code>.<\/p>\n<pre><code>\/\/ .env\nREACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx\u2026<\/code><\/pre>\n<p>Voc\u00ea pode agora proceder para criar o m\u00e9todo <code>generateResponse<\/code> no arquivo <strong>App.js<\/strong>, e passar nos dois par\u00e2metros esperados do formul\u00e1rio que voc\u00ea j\u00e1 criou para lidar com a solicita\u00e7\u00e3o e obter resposta da API.<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    const generateResponse = (newQuestion, setNewQuestion) =&gt; {\n        \/\/ Set up OpenAI API and handle response\n    };\n\n    return (\n        \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Agora voc\u00ea pode enviar uma solicita\u00e7\u00e3o para a API da OpenAI. A OpenAI API pode realizar muitas opera\u00e7\u00f5es, como perguntas e respostas (Q&#038;A), corre\u00e7\u00e3o gramatical, tradu\u00e7\u00e3o e muito mais. Para cada uma destas opera\u00e7\u00f5es, as op\u00e7\u00f5es s\u00e3o diferentes. Por exemplo, o valor do mecanismo para perguntas e respostas \u00e9 <code>text-davinci-00<\/code>, enquanto para a tradu\u00e7\u00e3o SQL \u00e9 <code>code-davinci-002<\/code>. Sinta-se livre para verificar a <a href=\"https:\/\/platform.openai.com\/examples\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o de exemplo da OpenAI<\/a> para os v\u00e1rios exemplos e suas op\u00e7\u00f5es.<\/p>\n<p>Para este tutorial, estamos trabalhando apenas com as <a href=\"https:\/\/platform.openai.com\/examples\/default-qa\" target=\"_blank\" rel=\"noopener noreferrer\">perguntas e respostas,<\/a> esta \u00e9 a op\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-json\">{\n  model: \"text-davinci-003\",\n  prompt: \"Who is Obama?\",\n  temperature: 0,\n  max_tokens: 100,\n  top_p: 1,\n  frequency_penalty: 0.0,\n  presence_penalty: 0.0,\n  stop: [\"\"],\n}<\/code><\/pre>\n<p><strong>Nota:<\/strong> Mudei o valor do prompt.<\/p>\n<p>A prompt \u00e9 a pergunta enviada pelo formul\u00e1rio. Isso significa que voc\u00ea precisar\u00e1 receb\u00ea-la a partir da entrada do formul\u00e1rio que est\u00e1 passando para o m\u00e9todo <code>generateResponse<\/code> como um par\u00e2metro. Para fazer isso, voc\u00ea definir\u00e1 as op\u00e7\u00f5es e usar\u00e1 o <a href=\"https:\/\/kinsta.com\/pt\/blog\/operador-spread-javascript\/\">operador spread<\/a> para criar uma op\u00e7\u00e3o completa que inclua o prompt:<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport { Configuration, OpenAIApi } from 'openai';\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    const generateResponse = async (newQuestion, setNewQuestion) =&gt; {\n        let options = {\n            model: 'text-davinci-003',\n            temperature: 0,\n            max_tokens: 100,\n            top_p: 1,\n            frequency_penalty: 0.0,\n            presence_penalty: 0.0,\n            stop: ['\/'],\n        };\n\n        let completeOptions = {\n            ...options,\n            prompt: newQuestion,\n        };\n\n    };\n\n    return (\n         \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Neste ponto, o que resta \u00e9 enviar um pedido atrav\u00e9s do m\u00e9todo <code>createCompletion<\/code> para a OpenAI para obter uma resposta.<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport { Configuration, OpenAIApi } from 'openai';\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nimport { useState } from 'react';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    const [storedValues, setStoredValues] = useState([]);\n\n    const generateResponse = async (newQuestion, setNewQuestion) =&gt; {\n        let options = {\n            model: 'text-davinci-003',\n            temperature: 0,\n            max_tokens: 100,\n            top_p: 1,\n            frequency_penalty: 0.0,\n            presence_penalty: 0.0,\n            stop: ['\/'],\n        };\n\n        let completeOptions = {\n            ...options,\n            prompt: newQuestion,\n        };\n\n        const response = await openai.createCompletion(completeOptions);\n\n        console.log(response.data.choices[0].text);\n    };\n\n    return (\n        \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>No c\u00f3digo acima, o texto da resposta ser\u00e1 exibido no seu console. Sinta-se \u00e0 vontade para testar seu aplicativo fazendo qualquer pergunta. O passo final seria criar um estado que ir\u00e1 armazenar a array de perguntas e respostas e ent\u00e3o enviar essa array como uma propriedade para o componente <strong>AnswerSection<\/strong>. \u00c9 assim que o c\u00f3digo final do <strong>App.js<\/strong> ficar\u00e1:<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\nimport { Configuration, OpenAIApi } from 'openai';\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nimport { useState } from 'react';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    const [storedValues, setStoredValues] = useState([]);\n\n    const generateResponse = async (newQuestion, setNewQuestion) =&gt; {\n        let options = {\n            model: 'text-davinci-003',\n            temperature: 0,\n            max_tokens: 100,\n            top_p: 1,\n            frequency_penalty: 0.0,\n            presence_penalty: 0.0,\n            stop: ['\/'],\n        };\n\n        let completeOptions = {\n            ...options,\n            prompt: newQuestion,\n        };\n\n        const response = await openai.createCompletion(completeOptions);\n\n        if (response.data.choices) {\n            setStoredValues([\n                {\n                    question: newQuestion,\n                    answer: response.data.choices[0].text,\n                },\n                ...storedValues,\n            ]);\n            setNewQuestion('');\n        }\n    };\n\n    return (\n        &lt;div&gt;\n            &lt;div className=\"header-section\"&gt;\n                &lt;h1&gt;ChatGPT CLONE \ud83e\udd16&lt;\/h1&gt;\n                    &lt;p&gt;\n                        I am an automated question and answer system, designed to assist you\n                        in finding relevant information. You are welcome to ask me any\n                        queries you may have, and I will do my utmost to offer you a\n                        reliable response. Kindly keep in mind that I am a machine and\n                        operate solely based on programmed algorithms.\n                    &lt;\/p&gt;\n            &lt;\/div&gt;\n\n            &lt;FormSection generateResponse={generateResponse} \/&gt;\n\n            &lt;AnswerSection storedValues={storedValues} \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Agora voc\u00ea pode editar o componente <strong>AnswerSection<\/strong>, para que ele recebe o valor das propriedades do <strong>App.js<\/strong> e utilize o m\u00e9todo JavaScript <code>Map()<\/code> para procurar no array <code>storedValues<\/code>:<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/AnswerSection.jsx\n\nconst AnswerSection = ({ storedValues }) =&gt; {\n    return (\n        &lt;&gt;\n            &lt;hr className=\"hr-line\" \/&gt;\n            &lt;div className=\"answer-container\"&gt;\n                {storedValues.map((value, index) =&gt; {\n                    return (\n                        &lt;div className=\"answer-section\" key={index}&gt;\n                            &lt;p className=\"question\"&gt;{value.question}&lt;\/p&gt;\n                            &lt;p className=\"answer\"&gt;{value.answer}&lt;\/p&gt;\n                            &lt;div className=\"copy-icon\"&gt;\n                                &lt;i className=\"fa-solid fa-copy\"&gt;&lt;\/i&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    );\n                })}\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    )\n}\n\nexport default AnswerSection;<\/code><\/pre>\n<p>Quando voc\u00ea executar seu aplicativo e test\u00e1-la fazendo perguntas, a resposta ser\u00e1 exibida abaixo. Mas voc\u00ea notar\u00e1 que o bot\u00e3o de c\u00f3pia n\u00e3o funciona. Voc\u00ea precisar\u00e1 adicionar um evento <code>onClick()<\/code> ao bot\u00e3o, ent\u00e3o ele aciona um m\u00e9todo para lidar com a funcionalidade. Voc\u00ea pode usar o m\u00e9todo <code>navigator.clipboard.writeText()<\/code> para lidar com a funcionalidade. \u00c9 assim que o componente <strong>AnswerSection<\/strong> ficar\u00e1:<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/AnswerSection.jsx\n\nconst AnswerSection = ({ storedValues }) =&gt; {\n    const copyText = (text) =&gt; {\n        navigator.clipboard.writeText(text);\n    };\n\n    return (\n        &lt;&gt;\n            &lt;hr className=\"hr-line\" \/&gt;\n            &lt;div className=\"answer-container\"&gt;\n                {storedValues.map((value, index) =&gt; {\n                    return (\n                        &lt;div className=\"answer-section\" key={index}&gt;\n                            &lt;p className=\"question\"&gt;{value.question}&lt;\/p&gt;\n                            &lt;p className=\"answer\"&gt;{value.answer}&lt;\/p&gt;\n                            &lt;div\n                                className=\"copy-icon\"\n                                onClick={() =&gt; copyText(value.answer)}\n                            &gt;\n                                &lt;i className=\"fa-solid fa-copy\"&gt;&lt;\/i&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    );\n                })}\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    )\n}\n\nexport default AnswerSection;<\/code><\/pre>\n<p>Quando voc\u00ea executar seu aplicativo, seu aplicativo clone do ChatGPT funcionar\u00e1 perfeitamente. Agora voc\u00ea pode implantar seu aplicativo para acess\u00e1-la on-line e compartilh\u00e1-lo com seus amigos.<\/p>\n<h2>Como implementar seu aplicativo React na Kinsta<\/h2>\n<p>N\u00e3o \u00e9 suficiente construir este aplicativo e deix\u00e1-lo apenas em seus computadores locais. \u00c9 importante que voc\u00ea o compartilhe on-line, para outras pessoas poderem acess\u00e1-lo. Para isso, mostraremos como utilizar o <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-github\/\">GitHub<\/a> e <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinsta<\/a>.<\/p>\n<h3>Enviando seu c\u00f3digo para o GitHub<\/h3>\n<p>Para <a href=\"https:\/\/kinsta.com\/pt\/blog\/push-codigo-github\/\">enviar seu c\u00f3digo<\/a> para o GitHub, voc\u00ea pode usar os comandos <a href=\"https:\/\/kinsta.com\/pt\/blog\/git-para-desenvolvimento-web\/\">Git<\/a>, uma maneira confi\u00e1vel e eficiente de gerenciar altera\u00e7\u00f5es de c\u00f3digo, colaborar em projetos e manter o hist\u00f3rico de vers\u00f5es.<\/p>\n<p>O primeiro passo para enviar seus c\u00f3digos ser\u00e1 criar um novo reposit\u00f3rio fazendo login na sua conta GitHub, clicando no bot\u00e3o <strong>+<\/strong> no canto superior direito da tela, e selecionando <strong>New Repository<\/strong> no menu suspenso.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Create-a-new-repository-on-GitHub-1.jpg\" alt=\"Criando um novo reposit\u00f3rio no GitHub\" width=\"1600\" height=\"770\"><figcaption class=\"wp-caption-text\">Criando um novo reposit\u00f3rio no GitHub<\/figcaption><\/figure>\n<p>D\u00ea um nome ao seu reposit\u00f3rio, adicione uma descri\u00e7\u00e3o (opcional) e escolha se voc\u00ea quer que ele seja p\u00fablico ou privado. Clique em <strong>Create repository<\/strong>\u00a0para cri\u00e1-lo.<\/p>\n<p>Assim que seu reposit\u00f3rio estiver criado, certifique-se de obter a URL do reposit\u00f3rio na p\u00e1gina principal do seu reposit\u00f3rio, pois voc\u00ea precisar\u00e1 dela para enviar seu c\u00f3digo para o GitHub.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/how-to-get-repository-URL-1.jpg\" alt=\"Acesse a URL do seu reposit\u00f3rio\" width=\"1600\" height=\"738\"><figcaption class=\"wp-caption-text\">Acesse a URL do seu reposit\u00f3rio<\/figcaption><\/figure>\n<p>Abra seu terminal ou prompt de comando e navegue at\u00e9 o diret\u00f3rio que cont\u00e9m o seu projeto. Execute os seguintes comandos um a um para enviar seu c\u00f3digo para o seu reposit\u00f3rio GitHub:<\/p>\n<pre><code class=\"language-bash\">git init\ngit add .\ngit commit -m \"my first commit\"\ngit remote add origin [repository URL]\ngit push -u origin master<\/code><\/pre>\n<p><code>git init<\/code> inicializa um reposit\u00f3rio Git local, <code>git add .<\/code> adiciona todos os arquivos no diret\u00f3rio atual e seus subdiret\u00f3rios ao novo reposit\u00f3rio Git. <code>git commit -m \"my first commit\"<\/code> submete as altera\u00e7\u00f5es ao reposit\u00f3rio com uma breve mensagem. <code>git remote add origin [repository URL]<\/code> define a URL do reposit\u00f3rio como o reposit\u00f3rio remoto e <code>git push -u origin master<\/code> envia o c\u00f3digo para o reposit\u00f3rio remoto (origem) no branch master.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Voc\u00ea pode substituir &#8220;my first commit&#8221; por uma breve mensagem descrevendo as altera\u00e7\u00f5es que voc\u00ea fez e &#8220;[repository URL]&#8221; pela URL do seu reposit\u00f3rio do GitHub. Depois que o c\u00f3digo for enviado para o GitHub, voc\u00ea poder\u00e1 implantar seu reposit\u00f3rio na Kinsta.<\/p>\n<\/aside>\n\n<h3>Implante seu aplicativo clone do ChatGPT React na Kinsta<\/h3>\n<p>Para implantar seu reposit\u00f3rio na Kinsta, siga estes passos:<\/p>\n<ol>\n<li>Acesse ou crie sua conta Kinsta no painel <a href=\"https:\/\/my.kinsta.com\/?lang=pt\">MyKinsta<\/a>.<\/li>\n<li>Clique em <strong>Aplicativos<\/strong> na barra lateral esquerda e depois clique em <strong>Adicionar servi\u00e7o<\/strong>.<\/li>\n<li>Selecione <strong>Aplicativo<\/strong> no menu suspenso para implantar um aplicativo React na Kinsta.<\/li>\n<li>Selecione o reposit\u00f3rio que voc\u00ea deseja implantar a partir do modal que aparece. Se voc\u00ea tiver v\u00e1rias branches, voc\u00ea pode escolher aquela que voc\u00ea deseja implantar e atribuir um nome para o aplicativo. Selecione um <a href=\"https:\/\/kinsta.com\/pt\/docs\/informacoes-de-servico\/localizacoes-de-centro-de-dados\/#application-and-database-hosting-data-centers\">local do centro de dados<\/a> entre os 24 dispon\u00edveis, e Kinsta detectar\u00e1 automaticamente um comando start.<\/li>\n<li>Finalmente, n\u00e3o \u00e9 seguro enviar as chaves API para hosts p\u00fablicos como o GitHub, ele foi adicionado como uma vari\u00e1vel de ambiente localmente. Ao hospedar, voc\u00ea tamb\u00e9m pode adicion\u00e1-la como uma <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">vari\u00e1vel de ambiente<\/a> usando o mesmo nome de vari\u00e1vel e a chave como seu valor.<\/li>\n<\/ol>\n<figure style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploy_react_app_with_environment_variable.gif\" alt=\"Implantando o clone do ChatGPT na Kinsta.\" width=\"1440\" height=\"788\"><figcaption class=\"wp-caption-text\">Implantando o clone do ChatGPT na Kinsta.<\/figcaption><\/figure>\n<p>Seu aplicativo come\u00e7ar\u00e1 a ser implantado, e dentro de alguns minutos, um link ser\u00e1 fornecido para acessar a vers\u00e3o implantada do seu aplicativo. Neste caso, ser\u00e1 <strong>https:\/\/chatgpt-clone-g9q10.kinsta.app\/<\/strong><\/p>\n<p><strong>Note:<\/strong> Voc\u00ea pode habilitar a implanta\u00e7\u00e3o autom\u00e1tica, ent\u00e3o Kinsta ir\u00e1 re-implantar seu aplicativo sempre que voc\u00ea mudar sua base de c\u00f3digo e envi\u00e1-la para o GitHub.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Neste artigo, voc\u00ea aprendeu como implantar seu site com a Hospedagem de Aplicativos da Kinsta. Alternativamente, se voc\u00ea est\u00e1 construindo um aplicativo\/site b\u00e1sico que n\u00e3o requer renderiza\u00e7\u00e3o din\u00e2mica e n\u00e3o est\u00e1 sujeito a picos de tr\u00e1fego, voc\u00ea pode optar por hospedar seu site com a <a href=\"https:\/\/kinsta.com\/static-site-hosting\">Hospedagem de Site Est\u00e1tico<\/a> da Kinsta.<\/p>\n<\/aside>\n\n\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=vmNem6wxfSQ\"><\/kinsta-video>\n<h2>Resumo<\/h2>\n<p>OpenAI API pode ser usado para construir uma ampla gama de aplicativos potenciais, desde suporte ao cliente e assistentes pessoais at\u00e9 tradu\u00e7\u00e3o de idiomas e cria\u00e7\u00e3o de conte\u00fado.<\/p>\n<p>Neste tutorial, voc\u00ea aprendeu como construir um aplicativo clone do ChatGPT com React e OpenAI. Voc\u00ea pode integrar este aplicativo\/funcionalidade em outros aplicativos para fornecer experi\u00eancias de conversa\u00e7\u00e3o de tipo humano aos usu\u00e1rios.<\/p>\n<p>Existem outras possibilidades sobre o que pode ser feito com o OpenAI API e como melhorar este aplicativo clone. Por exemplo, voc\u00ea pode implementar armazenamento local para que as perguntas e respostas anteriores n\u00e3o desapare\u00e7am mesmo ap\u00f3s atualizar o seu navegador.<\/p>\n<p>Com o teste gratuito e o plano <a href=\"https:\/\/sevalla.com\/pricing\/\">Hobby Tier<\/a> da Kinsta, voc\u00ea pode come\u00e7ar a hospedar seu aplicativo sem custo algum. Ent\u00e3o, por que n\u00e3o experimentar e ver o que voc\u00ea pode criar?<\/p>\n<p>Compartilhe seu projeto e experi\u00eancias nos coment\u00e1rios abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00c0 medida que o uso de chatbots e assistentes virtuais continua a crescer, muitas empresas e desenvolvedores est\u00e3o procurando maneiras de criar seus pr\u00f3prios chatbots alimentados &#8230;<\/p>\n","protected":false},"author":287,"featured_media":58074,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[951,977,1002],"class_list":["post-58073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-frameworks-javascript","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Construir e Implantar um Aplicativo Clone do ChatGPT com React e a API da OpenAI - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprenda como criar um aplicativo clone do ChatGPT usando React e a API da OpenAI e depois implant\u00e1-lo na Kinsta neste tutorial interativo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Construir e Implantar um Aplicativo Clone do ChatGPT com React e a API da OpenAI\" \/>\n<meta property=\"og:description\" content=\"Aprenda como criar um aplicativo clone do ChatGPT usando React e a API da OpenAI e depois implant\u00e1-lo na Kinsta neste tutorial interativo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-16T09:35:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-31T14:18:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprenda como criar um aplicativo clone do ChatGPT usando React e a API da OpenAI e depois implant\u00e1-lo na Kinsta neste tutorial interativo.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Como Construir e Implantar um Aplicativo Clone do ChatGPT com React e a API da OpenAI\",\"datePublished\":\"2023-03-16T09:35:53+00:00\",\"dateModified\":\"2025-01-31T14:18:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/\"},\"wordCount\":3154,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/\",\"name\":\"Como Construir e Implantar um Aplicativo Clone do ChatGPT com React e a API da OpenAI - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg\",\"datePublished\":\"2023-03-16T09:35:53+00:00\",\"dateModified\":\"2025-01-31T14:18:30+00:00\",\"description\":\"Aprenda como criar um aplicativo clone do ChatGPT usando React e a API da OpenAI e depois implant\u00e1-lo na Kinsta neste tutorial interativo.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Construir e Implantar um Aplicativo Clone do ChatGPT com React e a API da OpenAI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Construir e Implantar um Aplicativo Clone do ChatGPT com React e a API da OpenAI - Kinsta\u00ae","description":"Aprenda como criar um aplicativo clone do ChatGPT usando React e a API da OpenAI e depois implant\u00e1-lo na Kinsta neste tutorial interativo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Construir e Implantar um Aplicativo Clone do ChatGPT com React e a API da OpenAI","og_description":"Aprenda como criar um aplicativo clone do ChatGPT usando React e a API da OpenAI e depois implant\u00e1-lo na Kinsta neste tutorial interativo.","og_url":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-03-16T09:35:53+00:00","article_modified_time":"2025-01-31T14:18:30+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprenda como criar um aplicativo clone do ChatGPT usando React e a API da OpenAI e depois implant\u00e1-lo na Kinsta neste tutorial interativo.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"18 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Como Construir e Implantar um Aplicativo Clone do ChatGPT com React e a API da OpenAI","datePublished":"2023-03-16T09:35:53+00:00","dateModified":"2025-01-31T14:18:30+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/"},"wordCount":3154,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/","url":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/","name":"Como Construir e Implantar um Aplicativo Clone do ChatGPT com React e a API da OpenAI - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg","datePublished":"2023-03-16T09:35:53+00:00","dateModified":"2025-01-31T14:18:30+00:00","description":"Aprenda como criar um aplicativo clone do ChatGPT usando React e a API da OpenAI e depois implant\u00e1-lo na Kinsta neste tutorial interativo.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api-4.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/pt\/topicos\/react\/"},{"@type":"ListItem","position":3,"name":"Como Construir e Implantar um Aplicativo Clone do ChatGPT com React e a API da OpenAI"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/58073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=58073"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/58073\/revisions"}],"predecessor-version":[{"id":64111,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/58073\/revisions\/64111"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58073\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58073\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58073\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58073\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58073\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58073\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58073\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58073\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58073\/translations\/dk"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58073\/translations\/pt"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/58073\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/58074"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=58073"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=58073"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=58073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}