Openai

Integrando as Poderosas APIs GPT-4 e GPT-3.5 da OpenAI: Um Guia Completo com Node.js e Azure Serverless

Xavier

02 Jun 2025 • 7 min read

A inteligência artificial (IA) generativa e os modelos de linguagem de grande escala (LLMs) estão transformando a maneira como interagimos com a tecnologia. As APIs GPT-4 e GPT-3.5 da OpenAI estão na vanguarda dessa revolução, permitindo que desenvolvedores criem aplicações incrivelmente inteligentes e conversacionais. Este artigo oferece um guia detalhado, inspirado em tutoriais práticos, para integrar essas poderosas APIs em suas próprias aplicações, desde o desenvolvimento local com Node.js e Express.js até o deployment em nuvem usando Microsoft Azure Functions, uma solução serverless robusta.

Desvendando as APIs de Chat GPT-4 e GPT-3.5 da OpenAI

As APIs de Chat da OpenAI fornecem acesso programático aos seus modelos de linguagem mais avançados, incluindo o GPT-3.5-turbo e o mais recente GPT-4. Esses modelos são otimizados para conversação, mas também são extremamente competentes em uma variedade de outras tarefas de processamento de linguagem natural. Enquanto o GPT-3.5-turbo oferece um excelente equilíbrio entre desempenho e custo, o GPT-4 representa o estado da arte em termos de capacidade de raciocínio, criatividade e compreensão de nuances. A API de Chat permite que você envie uma série de mensagens (incluindo instruções de sistema, exemplos do usuário e respostas do assistente) e receba uma resposta gerada pelo modelo, possibilitando a criação de chatbots, assistentes virtuais e outras interfaces conversacionais personalizadas.

Preparando seu Ambiente de Desenvolvimento para a Integração com a API GPT

Antes de começar a codificar, é crucial configurar seu ambiente de desenvolvimento corretamente.

Criando uma Conta na OpenAI e Gerenciando Chaves de API

O primeiro passo é criar uma conta no site oficial da OpenAI (`openai.com`). Após o registro, você terá acesso ao painel da OpenAI, que inclui:

Documentação: Informações detalhadas sobre os modelos e APIs.
Referência da API: Especificações técnicas para interagir com as APIs.
Exemplos: Casos de uso e trechos de código para inspirar seus projetos.
Playground: Uma interface interativa para testar os modelos (GPT-3.5-turbo, GPT-4, etc.) e prompts sem escrever código. É altamente recomendável usar o Playground para experimentar e refinar suas ideias antes da implementação.

Você precisará gerar uma chave de API secreta e obter seu ID da Organização. Esses dados são essenciais para autenticar suas requisições à API da OpenAI. Lembre-se de que sua chave de API é confidencial e deve ser protegida.

Ferramentas Essenciais para o Desenvolvimento com a API GPT

Para este guia, utilizaremos as seguintes ferramentas:

Node.js: Um ambiente de execução JavaScript server-side. Recomenda-se a versão LTS (Long Term Support), como a 18.15.0 mencionada em tutoriais de referência.
VS Code (Visual Studio Code): Um editor de código popular e poderoso, com excelente suporte para JavaScript e extensões úteis.

Certifique-se de ter ambos instalados em seu sistema antes de prosseguir.

Construindo sua Aplicação Localmente com Node.js e a API GPT

Vamos começar desenvolvendo uma aplicação de chat simples localmente.

Desenvolvendo o Backend com Node.js e Express para a API GPT

Inicialização do Projeto: Crie uma pasta para seu projeto (ex: gpt4-chat-api) e, dentro dela, execute npm init -y no terminal para criar um arquivo package.json.
Instalação de Pacotes: Instale as bibliotecas necessárias:
```
npm install express openai body-parser cors
```
- express: Framework web para Node.js.
- openai: Biblioteca oficial da OpenAI para Node.js.
- body-parser: Middleware para analisar corpos de requisição.
- cors: Middleware para habilitar Cross-Origin Resource Sharing.
Configuração do index.js: Crie um arquivo index.js. Para usar as declarações import, adicione "type": "module" ao seu package.json.

Código do Backend:

import { Configuration, OpenAIApi } from "openai";
import express from "express";
import bodyParser from "body-parser";
import cors from "cors";

const configuration = new Configuration({
    organization: "SEU_ORGANIZATION_ID", // Substitua pelo seu ID da Organização
    apiKey: "SUA_API_KEY", // Substitua pela sua Chave de API
});
const openai = new OpenAIApi(configuration);

const app = express();
const port = 3000;

app.use(bodyParser.json());
app.use(cors());

app.post("/", async (req, res) => {
    const { messages } = req.body;
    console.log(messages);

    const systemMessage = {
        role: "system",
        content: "You are DesignGPT, a helpful assistant graphics design chatbot."
    };

    try {
        const completion = await openai.createChatCompletion({
            model: "gpt-3.5-turbo",
            messages: [systemMessage, ...messages],
        });
        res.json({
            completion: completion.data.choices.message
        });
    } catch (error) {
        console.error(error.response ? error.response.data : error.message);
        res.status(500).json({ error: "Failed to fetch completion from OpenAI" });
    }
});

app.listen(port, () => {
    console.log(`App ouvindo na porta http://localhost:${port}`);
});

Este código configura um servidor Express que escuta na porta 3000. Ele tem um endpoint POST (/) que recebe um array de messages, adiciona uma mensagem de sistema para definir o comportamento do chatbot e, em seguida, chama a API createChatCompletion da OpenAI. A resposta da OpenAI é então enviada de volta ao cliente.

Criando o Frontend em HTML e JavaScript para a API GPT

Estrutura do index.html: Crie um arquivo index.html básico com um título, um cabeçalho <h1>, um formulário com um campo de texto para a mensagem e um botão de envio, e uma <div> para exibir o log do chat.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat com API GPT-4</title>
    <!-- Adicione CSS básico aqui, se desejar -->
</head>
<body>
    <h1>Chatbot com API GPT-4</h1>
    <div id="chat-log"></div>
    <form id="chat-form">
        <input type="text" id="message-input" placeholder="Digite sua mensagem..." required>
        <button type="submit">Enviar</button>
    </form>
    <script>
        // Código JavaScript abaixo
    </script>
</body>
</html>

Lógica em JavaScript (dentro da tag <script>):

const chatLog = document.getElementById('chat-log');
const messageInput = document.getElementById('message-input');
const chatForm = document.getElementById('chat-form');

let messages = []; // Array para armazenar o histórico da conversa

chatForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const userMessageText = messageInput.value.trim();
    if (!userMessageText) return;

    appendMessage('user', userMessageText);
    messages.push({ role: 'user', content: userMessageText });
    messageInput.value = '';

    try {
        const response = await fetch('http://localhost:3000/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ messages }),
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        const assistantMessage = data.completion.content;
        appendMessage('assistant', assistantMessage);
        messages.push({ role: 'assistant', content: assistantMessage });

    } catch (error) {
        console.error('Erro ao buscar resposta:', error);
        appendMessage('error', 'Desculpe, ocorreu um erro.');
    }
});

function appendMessage(sender, text) {
    const messageElement = document.createElement('div');
    messageElement.classList.add('message', `${sender}-message`);
    messageElement.innerHTML = `<strong>${sender.charAt(0).toUpperCase() + sender.slice(1)}:</strong> ${text.replace(/\n/g, '<br>')}`;
    chatLog.appendChild(messageElement);
    chatLog.scrollTop = chatLog.scrollHeight; // Auto-scroll
}

Este script manipula o envio do formulário, envia a mensagem do usuário e o histórico para o backend, recebe a resposta do modelo de IA e atualiza o chat log e o histórico de mensagens.

Publicando sua Aplicação GPT na Nuvem com Microsoft Azure Serverless Functions

Para tornar sua aplicação acessível publicamente, vamos implantá-la usando Microsoft Azure Functions.

Por que Utilizar Funções Serverless do Microsoft Azure para sua Aplicação GPT?

A arquitetura serverless, como a oferecida pelo Microsoft Azure Functions, elimina a necessidade de gerenciar servidores. Você paga apenas pelo tempo de execução do seu código, o que pode ser muito econômico. Além disso, oferece escalabilidade automática e simplifica o processo de deployment.

Configurando uma Azure Function App para sua Aplicação GPT

Conta no Azure: Se ainda não tiver, crie uma conta gratuita no Microsoft Azure.
Extensão Azure Functions no VS Code: Instale a extensão "Azure Functions" no VS Code.
Login no Azure: Faça login na sua conta do Azure através da extensão no VS Code.
Criar Function App:
- Na aba Azure da extensão, clique no ícone de raio com "+" para criar um novo projeto de função.
- Selecione a pasta do seu projeto local (onde está o index.js do backend).
- Escolha JavaScript como linguagem.
- Selecione o modelo de programação Node.js v4 (ou a mais recente estável).
- Escolha "HTTP trigger" como template.
- Dê um nome para sua função (ex: `gptfunction`).
- Escolha o nível de autorização "Anonymous" para facilitar os testes iniciais.
- Em seguida, crie uma nova Function App no Azure. Dê um nome globalmente único (ex: adrianazuregpt), selecione Node.js 18 LTS (ou a versão compatível) como runtime stack, e escolha uma região (ex: East US).

Deploy do Código da sua Aplicação GPT na Azure Function

O arquivo principal da sua função Azure estará dentro de uma pasta com o nome que você deu (ex: gptfunction/index.js). Você precisará adaptar o código do seu backend local para este arquivo:

Copie a Lógica do Backend: Transfira a configuração da OpenAI (Configuration, OpenAIApi, sua chave de API e ID da organização) e a lógica de chamada createChatCompletion do seu index.js local para o index.js da Azure Function.
Adapte a Recepção de Requisições: Em Azure Functions, o corpo da requisição POST é geralmente acessado via await req.json() ou req.body dependendo da configuração. No exemplo do vídeo, ele usa const { messages } = await req.json();.

Adapte a Resposta: A resposta em Azure Functions é definida em context.res. Por exemplo:

context.res = {
    status: 200, /* HTTP status */
    body: { completion: completion.data.choices.message }
};

Instale Dependências: Certifique-se de que o package.json na raiz do seu projeto Azure Function (não o do Express local) inclua "openai": "^versao_desejada" nas dependências. Execute npm install nessa pasta se necessário.
Deploy: Use a extensão Azure Functions no VS Code para fazer o deploy do seu projeto local para a Function App que você criou no Azure. Clique no ícone de nuvem com uma seta para cima.

Configuração de CORS na Azure para sua API GPT

Após o deploy, você precisará configurar o CORS (Cross-Origin Resource Sharing) para permitir que seu frontend (hospedado em um domínio diferente, mesmo que seja localhost durante o teste ou um arquivo index.html local) faça requisições para sua Azure Function.

Acesse o Portal do Azure.
Navegue até sua Function App.
Na barra de pesquisa da Function App, procure por "CORS".
Adicione os domínios permitidos. Para testes locais, você pode adicionar http://localhost:PORTA_DO_SEU_FRONTEND_LOCAL (se estiver usando um servidor local para o frontend) ou * para permitir todas as origens (cuidado com isso em produção). O vídeo usa * para simplificar.
Salve as configurações de CORS.

Após configurar o CORS, obtenha a URL da sua função no Azure (na aba Overview da função ou na extensão do VS Code) e atualize o URL do fetch no seu index.html para apontar para esta URL online.

Considerações Importantes e Melhores Práticas para Aplicações com API GPT

Ao desenvolver aplicações com as APIs GPT, tenha em mente:

Segurança das Chaves de API GPT

Nunca exponha suas chaves de API da OpenAI no código do frontend. Elas devem ser mantidas seguras no backend. Para Azure Functions, utilize as Configurações de Aplicativo para armazenar chaves secretas como variáveis de ambiente.

Gerenciamento Avançado do Histórico da Conversa com a API GPT

Para manter o contexto, você envia o histórico da conversa. No entanto, modelos têm limites de tokens. Para conversas longas, implemente estratégias para truncar ou sumarizar o histórico, evitando exceder o limite e otimizando custos.

Otimização de Custos ao Usar a API GPT

Monitore seu uso da API através do painel da OpenAI. Modelos diferentes têm custos diferentes; o GPT-3.5-turbo é mais barato que o GPT-4. Escolha o modelo apropriado para a complexidade da tarefa e seu orçamento.

Tratamento de Erros e Validação na sua Aplicação GPT

Implemente tratamento de erros robusto para chamadas de API (ex: timeouts, erros de rede, erros da API da OpenAI). Valide e sanitize as entradas do usuário para prevenir comportamentos inesperados.

Conclusão: O Futuro das Aplicações com APIs GPT

Integrar as APIs GPT-4 e GPT-3.5 da OpenAI em suas aplicações abre um universo de possibilidades para criar experiências de usuário mais ricas, inteligentes e interativas. Seguindo os passos deste guia, desde a configuração local com Node.js até o deployment serverless no Microsoft Azure, você estará bem equipado para começar a construir a próxima geração de aplicações de Inteligência Artificial. O campo está em constante evolução, então continue explorando, aprendendo e inovando!