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:
Crie uma conta no OpenAI acessando o seguinte link: https://openai.com/.
Após criar a conta, vá para a página de configurações da conta.
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 .
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
})
Model: é o motor que a IA irá utilizar para gerar seu pedido
Prompt: E a instrução que passa para IA
Max_tokens : Quantidade maximo de caracteres
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.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/
Top comments (2)
ótimo conteúdo, eu só tive dificuldade na parte do config/openai.ts
pois como ele ira saber minha Apikey do openai para pode fazer a comunicação com a api? vir que em nem um momento você usou este exemplo. apenas informou que ao criar a Apikey eu seguiria as instruções na tela, porém ele Não me informa nada rs.
opa claro vamos la .
vc precisara criar na raiz do projeto um arquivo env com o nome *.env *
esse arquivo e responsavel pelas variaveis de ambiente .
criando ele vc pode inserir os dados conforme abaixo
com isso seu config.ts conseguira ler a chave de api
Desculpas , espero ter te ajudado