Fala, Devs! Tudo certo? Neste breve tutorial, vou explicar passo a passo como utilizar a API do OpenAI em projetos React de forma bem simples.

Este tutorial é uma introdução voltada para pessoas iniciantes, podendo ser um ponto de partida inicial para se aprofundar mais sobre o tema.

Criando um projeto React.

Primeiramente, vamos criar um projeto utilizando Vite.

Para isso, execute o seguinte script no terminal:

 npm create vite@latest

Depois de inserido o nome da aplicação, você será solicitado a escolher o framework e o tipo de linguagem. No nosso caso, vamos escolher o framework React e a linguagem TypeScript.

Para isso, pressione Enter para aceitar o padrão (React) e, em seguida, escolha typescript quando for questionado sobre a linguagem.

Feito isso, será criada a estrutura de pastas e arquivos necessários para o projeto. Em seguida, podemos prosseguir com a instalação das dependências e a execução do projeto.

Para isso, execute os seguintes comandos no terminal:

  cd nomedaaplicacao
  npm install
  npm run dev

Substitua nomedaaplicacao pelo nome da aplicação que você escolheu anteriormente.

Acesse pelo seu navegador o seguinte link :
http://localhost:5173/

Teremos uma página inicial que já iremos remove-la

Extrutura de pastas e removendo coisas

O Vite cria uma estrutura de pastas conforme mostrado abaixo. Nós vamos trabalhar com essa estrutura, fazendo modificações e adições conforme necessário. Este tutorial não abordará detalhes extensos para evitar torná-lo muito longo.

Limpando as coisas

Primeiramente, vamos limpar o arquivo App.tsx.

/src/App.tsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

Vamos deixá-lo assim:

function App() {

  return (
    <>

    </>
  )
}

export default App

Deletando arquivos não usados

Agora, vamos dar uma limpada nos arquivos que não iremos utilizar. Os arquivos que podemos excluir são:

Adicionar Suporte ao Tailwind .

Para instalar o Tailwind CSS usando o npm, siga estas instruções:

npm install -D tailwindcss postcss autoprefixer

Depois de instalar as dependências, você precisará inicializar o Tailwind CSS. Para fazer isso, execute:

npx tailwindcss init -p

Esses comandos irão criar um arquivo tailwind.config.js na raiz do seu projeto, onde você poderá configurar o Tailwind conforme necessário.

Adicione os caminhos a todos os arquivos de modelo em seu tailwind.config.js arquivo.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

No arquivo index.css, substitua todo o código existente pelas seguintes importações do Tailwind CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Vamos adicionar algumas classes no nosso arquivo App.tsx

function App() {

  return (
    <h1 className="text-3xl font-bold underline">
        Hello world!
    </h1>
  )
}

export default App

Sinta-se à vontade para adicionar mais classes do Tailwind CSS conforme necessário para estilizar o seu aplicativo React.

Depois de adicionar as classes ao arquivo App.tsx, você pode rodar a aplicação React. Para fazer isso, no terminal, execute o seguinte comando:

npm run dev 

Isso irá iniciar o servidor de desenvolvimento, e você poderá visualizar a sua aplicação no navegador.

Acesse pelo seu navegador o seguinte link :
http://localhost:5173/

Pronto! teremos esse resultado:

Perfeito agora já temos nosso ambiente pronto pra de divertir.

Instalando a dependencia do openAi

no terminal rode

npm i openai 

Com o OpenAI instalado, agora na pasta src, crie uma nova pasta chamada config e um arquivo chamado openai.ts.

Neste arquivo, vamos criar uma instância de configurações do plugin do OpenAI, permitindo que usemos o OpenAI sempre que necessário sem a necessidade de repetir código.

Agora, no arquivo ** openai.ts**, insira o código abaixo.

import { OpenAI } from 'openai'
  export const openai = new OpenAI({
    apiKey: `${import.meta.env.VITE_OPENAI}`,
    dangerouslyAllowBrowser: true
  });

Agora, sempre que precisarmos, podemos importar nosso método desta maneira:

import { openai } from './config/openai'

Criando uma chave de api do OpenAI

Para podermos utilizar os serviços de Inteligência Artificial do OpenAI, é necessário criar uma chave de API. Você pode fazer isso seguindo estes passos:

1. Crie uma conta no OpenAI acessando o seguinte link: https://openai.com/.

2. Após criar a conta, vá para a página de configurações da conta.

3. Crie uma nova chave de API clicando em "Criar nova chave de API" e siga as instruções na tela.

A chave de API é essencial para acessar os serviços do OpenAI e usar a inteligência artificial em seus projetos.

Criando estado inicial da nossa frase .

Uma das coisas que faz o React ser bastante interessante são os estados e os hooks, e agora iremos utilizar o useState.

No arquivo App.tsx, faça a importação do hook como na linha 1 e na 5 criamos um array. No primeiro índice, você define um valor para um objeto, e no segundo índice, você define um método que atualiza o primeiro índice.

import { useState } from "react";

function App() {

  const [setence , setSetence] = useState<string>('sua frase motivacional irá aparecer aqui !')

  return (
    <main className="container mx-auto flex flex-col justify-center items-center h-screen ">
      <div className="rounded-lg lg:w-96 border-2 border-sky-500 p-8 mb-8">
        {setence}
      </div>
      <button className="w-16 h-16 rounded-full bg-sky-400 text-white  font-semibold uppercase flex justify-center items-center cursor-pointer">
        gerar
      </button>
    </main>
  );
}

export default App;

perceba que onde tinhamos a frase

> (sua frase motivacional irá aparecer aqui!)

Dentro das chaves {} colocamos a variável sentence, que indica que ali teremos código JavaScript. E o valor dessa variável é igual ao que tínhamos de forma estática, servindo agora como o estado inicial da variável sentence.

 <div className="rounded-lg lg:w-96 border-2 border-sky-500 p-8 mb-8">
        {setence}
 </div>

  const [setence , setSetence] = useState<string>('sua frase motivacional irá aparecer aqui !')

o resultado será o mesmo :

Utilizando OpenIa para gerar frases motivacionais

No nosso arquivo App.tsx, vamos criar um método assíncrono e importar nossa configuração que criamos.
Aqui está um exemplo de como pode ser feito:

import {openai} from "./config/openai";

Dentro do nosso componente App, vamos criar o seguinte método:

  const handleSetence = async () => {
      try {
          const newSetence = await openai.completions.create({
            model: 'gpt-3.5-turbo-instruct',
            prompt : `gere uma frase motivacional com o tema sucesso`,
            max_tokens: 100,
            temperature: 0.3,
            n : 1
          })
          const setenceGenearate = newSetence.choices.map((setence) : string => setence.text.trim())
          setSetence(setenceGenearate.toString())

      } catch (error) {
        setSetence("Rate limit reached 3 times per min ,  Please try again in 20s ")

      }

Vamos falar um pouco desse metodo:

Quando estamos lidando com operações assíncronas, é importante estar preparado para tratar erros que podem ocorrer durante a execução do código. O bloco try...catch é uma maneira de fazer isso.

Quando utilizamos try, estamos dizendo ao JavaScript para tentar executar o código dentro do bloco e, se ocorrer um erro, o controle será transferido para o bloco catch. Isso nos permite capturar e tratar o erro de uma maneira mais controlada.

No caso do nosso método newSetence, estamos fazendo uma chamada assíncrona para a API do OpenAI. Se tudo correr bem, a resposta será capturada no bloco try e a variável sentence será atualizada com o resultado da chamada. Se algo der errado durante a chamada, o erro será capturado no bloco catch e podemos tratá-lo de acordo (por exemplo, exibindo uma mensagem de erro para o usuário).

Em resumo, o bloco try...catch é uma maneira de lidar com erros em operações assíncronas de uma maneira mais controlada, permitindo-nos tratar erros de forma mais eficiente e fornecer uma melhor experiência para o usuário.

Sugiro aprender mais sobre promisses e assincronismo .

reference

Agora como a frase é gerada utilizamos o completions.create que recebe um objeto que vou falar de cada um deles :

const newSetence = await openai.completions.create({
            model: 'gpt-3.5-turbo-instruct',
            prompt : `gere uma frase motivacional com o tema sucesso`,
            max_tokens: 100,
            temperature: 0.3,
            n : 1
          })

1. Model: é o motor que a IA irá utilizar para gerar seu pedido

2. Prompt: E a instrução que passa para IA

3. Max_tokens : Quantidade maximo de caracteres

4. temperature : Qual temperatura de amostragem usar, entre 0 e 2. Valores mais altos como 0,8 tornarão a saída mais
   aleatória, enquanto valores mais baixos como 0,2 a tornarão mais focada e determinística.

5. n : quantidade de frases que deseja nesse caso queremos só uma.

o metodo newSetence retorna um array e por isso para atualizar o estado setence precismos percorrer esse array e pegar apenas a string do retorno pois nosso setence está tipado para receber string

          const setenceGenearate = newSetence.choices.map((setence) : string => setence.text.trim())

e utilizamos o trim() pra remover espaços em branco no inicio e no fim da frase para evitar quebras .

depois atualizaremos o estado de setence para nossa resposta da IA

 setSetence(setenceGenearate.toString())

E Por fim envocamos no metodo handleSetence no atributo onClick do elemento button

 <button className="w-16 h-16 rounded-full bg-sky-400 text-white  font-semibold uppercase flex justify-center items-center cursor-pointer"
        onClick={handleSetence}
      >

O Código final da nossa aplicação ficou assim :

import { useState } from "react";
import {openai} from "./config/openai";

function App() {

  const [setence , setSetence] = useState<string>('sua frase motivacional irá aparecer aqui !')

  const handleSetence = async () => {
      try {
          const newSetence = await openai.completions.create({
            model: 'gpt-3.5-turbo-instruct',
            prompt : `gere uma frase motivacional com o tema sucesso`,
            max_tokens: 100,
            temperature: 0.3,
            n : 1
          })
          const setenceGenearate = newSetence.choices.map((setence) : string => setence.text.trim())
          setSetence(setenceGenearate.toString())

      } catch (error) {
        setSetence("Rate limit reached 3 times per min ,  Please try again in 20s ")

      }
    }
  return (
    <main className="container mx-auto flex flex-col justify-center items-center h-screen ">
      <div className="rounded-lg lg:w-96 border-2 border-sky-500 p-8 mb-8">
        {setence}
      </div>
      <button className="w-16 h-16 rounded-full bg-sky-400 text-white  font-semibold uppercase flex justify-center items-center cursor-pointer"
        onClick={handleSetence}
      >
        gerar
      </button>
    </main>
  );
}

export default App;

Agora quando clicamos no botão Gerar temos esse Resultado:

Conclusão:

"Neste artigo, exploramos como usar o OpenAI com React para criar aplicativos incríveis que aproveitam o poder da inteligência artificial. Com o OpenAI configurado e integrado em nosso projeto React, podemos criar aplicativos que geram frases, resumos e muito mais com apenas algumas linhas de código. Espero que você tenha achado este artigo útil e que ele o inspire a explorar o OpenAI ainda mais em seus próprios projetos."

Repositorio do artigo:

https://github.com/rogeriorioli/openia-react/

FIM!