Como Integrar React com OpenAI? Um guia rápido e prático

Veja o código e aprenda linha por linha a configurar a API, armazenar chaves com segurança e fazer requisições para criar um chat interativo em React com OpenAI.

Integrar inteligência artificial (IA) em aplicações web é uma habilidade cada vez mais valiosa. Este guia é ideal para desenvolvedores com conhecimento básico em React que querem dar um passo além com IA.

Continue lendo e aprenda a fazer essa integração!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é a integração de React com a API da OpenAI?

A integração de React com a API da OpenAI permite que uma aplicação web interaja com modelos de IA, como o GPT-3.5, para processar textos, responder perguntas ou gerar conteúdo dinamicamente.

Neste tutorial, criamos uma interface com um campo de texto (textarea) e um botão que envia perguntas à API, exibindo as respostas na tela.

• Como funciona: O usuário digita uma pergunta, o React envia a requisição à API da OpenAI via fetch, e a resposta é exibida na interface.
• Exemplo prático: Um chat que responde perguntas sobre um curso ou canal, como "Quais conteúdos são publicados no YouTube?".

Como configurar um projeto React para usar a API da OpenAI?

Para começar, você precisa de um projeto React funcional, baixe os arquivos acima e você terá todos arquivos necessários pra isso.

Dica: Este tutorial vai fazer mais sentido se você já criou um projeto com Vite, uma ferramenta rápida para configurar aplicações React. Se ainda não sabe, veja nosso passo a passo sobre como criar projetos em React com Vite.

• Estrutura do projeto:
  • Um componente principal (App.jsx) com um título, um textarea para entrada de texto, um botão para enviar a pergunta e uma área para exibir a resposta.
  • Estilização básica com CSS para centralizar o layout e formatar os elementos.
• Passos iniciais:
  • Crie o projeto com npm create vite@latest.
  • Limpe os arquivos padrão (como logos e CSS desnecessário).
  • Configure um layout com um contêiner, título, textarea e botão.

Como obter e configurar a chave da API da OpenAI?

Para usar a API da OpenAI, você precisa de uma chave de API. Siga este passo a passo para obtê-la e configurá-la com segurança:

• Criação da chave:
  • Acesse platform.openai.com.
  • Faça login ou crie uma conta (pode usar Google).
  • Vá em "Settings", "API Keys" e clique em "Create New Secret Key".
  • Nomeie a chave (ex.: "React Project") e copie o valor gerado.
• Armazenamento seguro:
  • Crie um arquivo .env na raiz do projeto.
  • Adicione a chave com o formato VITE_OPENAI_API_KEY=sua-chave-aqui.
  • Acesse a chave no código com import.meta.env.VITE_OPENAI_API_KEY.
• Por que usar.env?:
  • Evita expor a chave no código-fonte.
  • Protege contra acesso não autorizado, especialmente em repositórios públicos.

Boas práticas para chaves de API:

• Usar .env: Armazena chaves em variáveis de ambiente para segurança contra vazamentos.
• Prefixo VITE_: Necessário para variáveis no Vite, garantindo compatibilidade.
• Nunca expor chaves: Evitar commit de .env no Git para proteção contra uso indevido.

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

Como fazer a requisição à API da OpenAI no React?

A integração com a API da OpenAI é feita com uma requisição HTTP usando fetch. Abaixo, explicamos a lógica do código para enviar perguntas e exibir respostas.

• Estrutura do código:
  • Estado: Use useState para gerenciar a pergunta (pergunta), a resposta (resposta) e o estado de carregamento (carregando).
  • Função de envio: Uma função assíncrona (enviarPergunta) faz a requisição à API.
  • Interface: Um textarea para entrada, um botão que dispara a função e uma área condicional para mostrar a resposta.
• Exemplo de código (simplificado)

import { useState } from 'react';

function App() {
  const [pergunta, setPergunta] = useState('');
  const [resposta, setResposta] = useState('');
  const [carregando, setCarregando] = useState(false);

  async function enviarPergunta() {
    setCarregando(true);
    setResposta('');
    try {
      const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`
        },
        body: JSON.stringify({
          model: 'gpt-3.5-turbo',
          messages: [{ role: 'user', content: pergunta }]
        })
      });
      const dados = await response.json();
      const conteudo = dados.choices?.[0]?.message?.content || 'Erro ao obter resposta';
      setResposta(conteudo);
    } catch (error) {
      console.error('Erro na requisição:', error);
      setResposta('Ocorreu um erro. Verifique o console.');
    }
    setCarregando(false);
  }

  return (
    <div className="container">
      <h1>Chat com IA</h1>
      <textarea value={pergunta} onChange={(e) => setPergunta(e.target.value)} />
      <button onClick={enviarPergunta} disabled={!pergunta || carregando}>
        {carregando ? 'Enviando...' : 'Enviar'}
      </button>
      {resposta && <div><strong>Resposta:</strong> {resposta}</div>}
    </div>
  );
}
export default App;

• Explicação:
  • A requisição usa o endpoint https://api.openai.com/v1/chat/completions com método POST.
  • O Authorization inclui a chave da API.
  • O corpo da requisição especifica o modelo (gpt-3.5-turbo) e a mensagem do usuário.
  • A resposta é processada para extrair o conteúdo (choices[0].message.content) com verificações para evitar erros (?.).
  • O estado carregando desativa o botão durante a requisição e exibe "Enviando...".

Como depurar e lidar com limites da API da OpenAI?

Ao integrar a API, é comum encontrar erros, como cotas excedidas ou respostas vazias. Aqui estão algumas dicas para depurar e gerenciar o uso:

• Depuração:
  • Use console.log(dados) para inspecionar a resposta da API.
  • Verifique erros no console (F12) para identificar problemas, como chaves inválidas ou cotas excedidas.
  • Acesse dados.choices?.[0]?.message?.content com operadores opcionais (?.) para evitar erros com respostas indefinidas.
• Limites da API:
  • Contas novas podem ter créditos limitados (ex.: US$5 no passado, mas agora requer pagamento).
  • Adicione um cartão na seção "Billing" da OpenAI para desbloquear requisições.
  • Monitore o uso na aba "Usage" para evitar custos inesperados (ex.: 20 tokens por pergunta custam frações de centavo).
• Alternativas:
  • Use APIs de outros provedores, como Claude (Anthropic) ou Gemini (Google), que podem oferecer cotas gratuitas.
  • A lógica de requisição (fetch, headers, body) é semelhante para outras APIs.

Boas práticas para depuração e gerenciamento:

• Console.log: Inspeciona respostas da API para verificar estrutura e erros.
• Operadores opcionais (?.): Evitam erros em objetos indefinidos.
• Monitorar uso: Acompanhe o consumo de tokens na aba "Usage" da OpenAI.

Conclusão: Como levar sua integração com IA ao próximo nível?

Integrar React com a API da OpenAI é uma forma prática de adicionar funcionalidades de IA, como chats interativos, a suas aplicações. Com a configuração correta da chave da API, um código bem estruturado e práticas de depuração, você pode criar experiências dinâmicas para os usuários. E tudo isso você aprendeu aqui!

Se você curtiu o conteúdo, vai gostar também dos nossos outros artigos sobre JavaScript.

E caso prefira esse conteúdo no formato de vídeo, assista aqui embaixo ou acesse o nosso canal do YouTube!