Usando OpenAI com React
Tags: ai, react, typescript, vite
Published: 2024-02-25 04:16:01


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
```

![ npm create vite@latest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8n0xa3kmo8qip9ufat6.png)

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.

![react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xocboxp91gdv180ty8yv.png)


![typescript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vvqko4wv59zdjr8971i.png)

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/](http://localhost:5173/)

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

![pagina scaffold](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5iz50bob0hx5mnkvoam1.png)

## 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.

![extrutura de pastas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92dh6x8tqubwabzw3zac.png)

## 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:

![delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1t81o6cxqr05qn1iznu.png)


##  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.

![tauilwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gd321ul0t0mi91r80ddy.png)

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/](http://localhost:5173/)


Pronto! teremos esse resultado: 

![Hello world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6icy7kyst0aw42zuypc.png)


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.**


![openai](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbmgx9a02sigerjruklj.png)


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 :

![interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/355h9lxs9zmmgn40aknu.png)

## 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](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/await)

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: 


![resulado final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8jhjeuq57jhsui4059z.png)

## 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/](https://github.com/rogeriorioli/openia-react/)


# FIM!