Transforme seu site em um assistente de IA: ChatGPT API com JavaScript

Por que seu site precisa de um cérebro? ChatGPT API + JavaScript

Imagine: um usuário entra no seu site e encontra, não uma página estática, mas um assistente vivo. Ele escreve código, traduz textos, gera ideias ou simplesmente mantém uma conversa. Parece ficção científica? Na verdade, são apenas algumas dezenas de linhas de JavaScript e uma única chamada de API para o ChatGPT.

Neste artigo, vamos explorar como integrar a API do ChatGPT com JavaScript — desde a obtenção da chave até a criação de um chatbot completo. Você aprenderá a enviar requisições, tratar erros e extrair o máximo da inteligência artificial. Vamos nessa!

O que é a API do ChatGPT e por que você precisa dela

A API da OpenAI é a ponte entre seu código e o gigantesco modelo de linguagem (GPT-4, GPT-3.5). Você envia um texto (prompt) e o modelo retorna uma resposta gerada. Simples, mas com possibilidades ilimitadas.

Com JavaScript, a integração é especialmente prática: você pode usar fetch no navegador ou axios / node-fetch no servidor (Node.js). Nada de bibliotecas complexas — apenas HTTP e JSON.

Onde isso pode ser útil em um site educacional como o PythonLib:

\n
• Assistente interativo — responde perguntas sobre Python.
\n
• Gerador de código — cria exemplos sob demanda.
\n
• Corretor de exercícios — analisa o código do aluno.
\n
• Chatbot de suporte — disponível 24 horas por dia.
\n

Passo 1: Obtenha sua chave de API da OpenAI

Sem a chave, nada feito. Acesse platform.openai.com, cadastre-se e vá até a seção API Keys. Clique em Create new secret key e copie-a imediatamente. Mantenha a chave em segredo, nunca a insira no código do lado do cliente!

Para testes, o saldo gratuito inicial (geralmente US$ 5 a US$ 18) é suficiente. Mas lembre-se: as requisições ao modelo têm custo, embora sejam bem baratas.

Passo 2: Requisição simples com JavaScript (Node.js)

A maneira mais rápida de testar é escrever um script em Node.js. Instale o node-fetch (ou use o fetch nativo no Node 18+).

// chatgpt.js\nimport fetch from 'node-fetch';\n\nconst API_KEY = 'sua_chave_secreta';\nconst API_URL = 'https://api.openai.com/v1/chat/completions';\n\nasync function perguntarChatGPT(prompt) {\n  const resposta = await fetch(API_URL, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      'Authorization': `Bearer ${API_KEY}`\n    },\n    body: JSON.stringify({\n      model: 'gpt-3.5-turbo', // ou gpt-4\n      messages: [\n        { role: 'user', content: prompt }\n      ],\n      temperature: 0.7,\n      max_tokens: 500\n    })\n  });\n\n  const dados = await resposta.json();\n  return dados.choices[0].message.content;\n}\n\n// Uso\nconst resposta = await perguntarChatGPT('Escreva uma função em Python para ordenar uma lista');\nconsole.log(resposta);

Execute node chatgpt.js — e a inteligência artificial responderá com código. Mágica!

Entendendo a estrutura da requisição

No corpo da requisição, enviamos:

\n
• model — qual versão do GPT (gpt-3.5-turbo é mais rápida e barata, gpt-4 é mais inteligente).
\n
• messages — um array de mensagens. Podemos incluir system (instrução para o modelo), assistant (contexto) e user.
\n
• temperature — criatividade da resposta (0 — fatos estritos, 1 — criatividade máxima).
\n
• max_tokens — tamanho máximo da resposta em tokens (1 token ≈ 0,75 palavra).
\n

Passo 3: Integração da API do ChatGPT com JavaScript no navegador

Aqui vai uma dica importante: nunca envie a chave da API a partir do código do lado do cliente — ela será roubada. Use um proxy no servidor (Node.js, Python) ou Edge Functions.

Mas para uma demonstração