Como integrar a API da OpenAI utilizando stream no Next.js

Se você não vive em uma caverna e está por dentro dos assuntos mais comentados dos últimos tempos, provavelmente já ouviu falar do ChatGPT. Este é um sistema de chat que se utiliza do modelo GPT (Generative Pre-trained Transformer) da OpenAI para interagir com usuários de maneira semelhante a uma conversa com uma pessoa real. O funcionamento é simples: o usuário digita o texto, que é então alimentado ao modelo GPT, responsável por gerar respostas contextuais com base no que foi fornecido. Essas respostas podem variar desde a simples resposta a perguntas até a realização de tarefas específicas ou a manutenção de uma conversa casual.

Para contextualizar, os modelos GPT são Modelos de Linguagem de Grande Escala (LLM) desenvolvidos pela OpenAI. Eles se destacam em uma ampla gama de tarefas linguísticas, incluindo a conclusão de texto, a sumarização e até mesmo a escrita criativa. Esses modelos foram projetados para compreender e gerar texto de maneira sofisticada e semelhante à humana, tornando-se extremamente úteis para uma variedade de aplicativos no processamento de linguagem natural (NLP).

E se você já se perguntou como os chatbots são criados, ou quer experimentar a magia do GPT em ação, você está no lugar certo! Vou te mostrar como criar uma aplicação semelhante ao ChatGPT do zero, utilizando Next.js, Vercel AI SDK e a API da OpenAI.

Antes de começar…

Como o intuito desse post é aprender como integrar o GPT em uma aplicação React, vou pular toda a parte de criação da interface, no final desse post vou deixar o repositório com o código completo criado nesse artigo, você vai poder baixar e utilizar a UI como quiser.

O projeto foi criado utilizando a CLI do Next.js com TypeScript, Tailwind e Shadcn UI.

Então vamos ao que importa!

Como eu disse no começo desse post, a ideia não é te ensinar como começar uma aplicação React, então vou seguir direto ao ponto, que é a integração!

Para esse projeto funcionar precisamos instalar algumas libs: pnpm install ai openai

OpenAI: É a SDK para JavaScript oficial da OpenAI, você pode ler mais sobre ela aqui: https://platform.openai.com/docs

AI: É a Vercel AI SDK, uma biblioteca de código aberto projetada para ajudar os desenvolvedores a construir interfaces de usuário de streaming conversacional em JavaScript e TypeScript. Você pode ler mais sobre ela aqui: https://sdk.vercel.ai/docs (Essa SDK funciona perfeitamente no React sem o Next.js)

Depois de instalar as libs, precisamos criar uma variável de ambiente com a OPENAI_API_KEY

Crie um arquivo .env na raiz do seu projeto:

Você consegue gerar essa key pelo portal da OpenAI. Se você já tem uma API_KEY pode pular os passos abaixo

Gerando chave da API

1. Navegue até a seção de API Após fazer o login, no menu a esquerda, clique em “API keys”.

2. Gerar uma nova chave da API Agora que você está na seção de chaves da API, você deverá ver um botão “Create new secret key”. Clique nesse botão para gerar uma nova chave da API.

Um modal irá aparecer solicitando que você dê um nome à sua chave da API. É recomendável ter chaves diferentes para aplicativos e sites distintos, então certifique-se de nomeá-la de uma forma que você se lembre para que serve quando olhar para ela no futuro.

3. Guarde sua chave da API Em seguida, você verá sua chave secreta que foi gerada. Certifique-se de copiar sua chave secreta e colá-la no aplicativo em que você precisa utilizá-la.

É extremamente importante que você copie essa chave e a guarde em um local seguro, pois você não será capaz de recuperá-la novamente por motivos de segurança. Você precisará desta chave para autenticar seus aplicativos com os serviços da OpenAI.

4. Salve no arquivo .env Copie e cole essa chave no arquivo .env que criamos anteriormente:

Agora vamos para a parte legal, fazer isso funcionar!

Integrando a OpenAI com o Next.js

Agora que temos tudo configurado, podemos começar nossa integração, para isso criaremos uma rota usando o API Routes do Next.js:

O projeto foi criado com a nova App Router do Next.js, por isso o arquivo da API está desse jeito. Você pode ler mais sobre isso aqui.

Agora temos uma rota que utiliza a SDK da OpenAI em POST/api/chat.

Criando nossa UI

Para construir a UI, utilizei o shadcn/ui, então os componentes utilizados para construir a tela vem dessa lib, você pode ler a documentação clicando aqui.

O foco é na integração, então vamos ignorar a parte do layout. No arquivo app/page.tsx é onde vamos chamar a rota que criamos no passo anterior utilizando a SDK da Vercel:

Este componente utiliza o hook useChat, usará a rota POST que criamos anteriormente. O hook fornece funções e estado para lidar com a entrada do usuário e a submissão do formulário. O hook useChat fornece várias funções utilitárias e variáveis de estado:

messages — As mensagens de chat atuais, uma matriz de objetos com propriedades id, role e content (entre outras).
input — Este é o valor atual do campo de entrada do usuário.
handleInputChange e handleSubmit — Estas funções lidam com as interações do usuário, como digitar no campo de entrada e enviar o formulário, respectivamente.
isLoading — Este booleano indica se a solicitação à API está em andamento ou não.

Nesse trecho do código é onde vamos renderizar nossas mensagens:

O objeto message segue essa estrutura:

E é isso. Simples assim! 🎉

Esse é o resultado final da nossa aplicação:

E o backend funciona dessa forma:

Brincadeiras a parte, eu criei um repositório no GitHub com a aplicação criada nesse post, se você quiser dar uma olhada mais a fundo é só clicar aqui:

Cuidado! Os robôs vão dominar o mundo… 🤖