Transformons un site en assistant IA : API ChatGPT en JavaScript

Pourquoi votre site a-t-il besoin d'un cerveau ? API ChatGPT + JavaScript

Imaginez : un utilisateur arrive sur votre site, et au lieu d'une page statique, il trouve un assistant vivant. Il écrit du code, traduit du texte, génère des idées ou simplement dialogue. Cela ressemble à de la science-fiction ? En réalité, ce sont quelques dizaines de lignes en JavaScript et une seule requête API à ChatGPT.

Dans cet article, nous allons voir comment intégrer l'API ChatGPT en JavaScript — de l'enregistrement de la clé à un chatbot complet. Vous apprendrez à envoyer des requêtes, à gérer les erreurs et à tirer le meilleur parti du réseau de neurones. C'est parti !

Qu'est-ce que l'API ChatGPT et pourquoi en avez-vous besoin

L'API OpenAI est le pont entre votre code et un modèle linguistique géant (GPT-4, GPT-3.5). Vous envoyez du texte (un prompt), et le modèle renvoie une réponse générée. Simple, mais aux possibilités illimitées.

L'intégration en JavaScript est particulièrement pratique : vous pouvez utiliser fetch dans le navigateur ou axios / node-fetch côté serveur (Node.js). Pas de bibliothèques complexes, seulement HTTP et JSON.

Où cela peut-il être utile sur un site éducatif comme PythonLib :

\n
• Assistant interactif — répond aux questions sur Python.
\n
• Générateur de code — écrit des exemples à la demande de l'utilisateur.
\n
• Vérification des devoirs — analyse le code de l'élève.
\n
• Chatbot pour le support technique — répond 24h/24 et 7j/7.
\n

Étape 1. Obtenir la clé API OpenAI

Pas de clé, pas d'accès. Rendez-vous sur platform.openai.com, inscrivez-vous et allez dans la section API Keys. Cliquez sur Create new secret key — copiez-la immédiatement. Gardez la clé secrète, ne l'insérez pas dans le code côté client !

Pour les tests, le crédit gratuit (généralement 5 à 18 $) suffit. Mais rappelez-vous : les requêtes au modèle coûtent de l'argent, même si ce sont des sommes modiques.

Étape 2. Requête la plus simple en JavaScript (Node.js)

Le moyen le plus rapide d'essayer est d'écrire un script en Node.js. Installez node-fetch (ou utilisez le fetch intégré dans Node 18+).

// chatgpt.js\nimport fetch from 'node-fetch';\n\nconst API_KEY = 'votre_clé_secrète';\nconst API_URL = 'https://api.openai.com/v1/chat/completions';\n\nasync function askChatGPT(prompt) {\n  const response = 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 data = await response.json();\n  return data.choices[0].message.content;\n}\n\n// Utilisation\nconst answer = await askChatGPT('Écris une fonction en Python pour trier une liste');\nconsole.log(answer);

Exécutez node chatgpt.js — et le réseau de neurones vous répondra avec du code. Magique !

Analyse de la structure de la requête

Dans le corps de la requête, nous envoyons :

\n
• model — quelle version de GPT (gpt-3.5-turbo plus rapide et moins cher, gpt-4 plus intelligent).
\n
• messages — un tableau de messages. On peut ajouter system (instruction du modèle), assistant (contexte) et user.
\n
• temperature — la créativité de la réponse (0 — faits stricts, 1 — créativité).
\n
• max_tokens — la longueur maximale de la réponse en tokens (1 token ≈ 0,75 mot).
\n

Étape 3. Intégration de l'API ChatGPT en JavaScript dans le navigateur

Il y a une nuance : ne jamais envoyer la clé API depuis le code client — elle serait volée. Utilisez un proxy serveur (Node.js, Python) ou des Edge Functions.

Mais pour une démon