Créer un chatbot intelligent avec OpenAI et l’intégrer à un site web

Par Niane Le 12 Mar 2025

Créer un chatbot intelligent avec OpenAI et l'intégrer à un site web

Introduction

Les chatbots intelligents sont devenus un outil essentiel pour améliorer l’expérience utilisateur sur les sites web. Grâce à des modèles de langage comme GPT d’OpenAI, il est désormais possible de créer des chatbots capables de comprendre et de répondre de manière naturelle aux requêtes des utilisateurs. Dans ce tutoriel, nous allons créer un chatbot simple en utilisant l’API OpenAI et l’intégrer à un site web.

Étape 1 : Prérequis

Compte OpenAI : Inscrivez-vous sur OpenAI pour obtenir une clé API.
Connaissances de base : HTML, JavaScript et Node.js.
Outils :
- Un éditeur de code (VS Code, Sublime Text, etc.).
- Node.js installé sur votre machine.
- Un compte sur un service d’hébergement comme Heroku ou Vercel (optionnel).

Étape 2 : Configurer l’environnement de développement

Créez un dossier pour votre projet, par exemple chatbot-openai.
Ouvrez un terminal dans ce dossier et initialisez un projet Node.js :
bash

Copy
```
npm init -y
```
Installez les dépendances nécessaires :
bash

Copy
```
npm install express openai dotenv
```
- express : Pour créer un serveur web.
- openai : Le SDK officiel d’OpenAI.
- dotenv : Pour gérer les variables d’environnement.

Étape 3 : Configurer l’API OpenAI

Créez un fichier .env à la racine du projet et ajoutez votre clé API OpenAI :
env

Copy
```
OPENAI_API_KEY=votre_clé_api_ici
```

Créez un fichier server.js et configurez le serveur Express et l’API OpenAI :

const express = require('express'); const { OpenAI } = require('openai'); require('dotenv').config(); const app = express(); const port = 3000; const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }); app.use(express.json()); app.post('/chat', async (req, res) => { const { message } = req.body; try { const response = await openai.chat.completions.create({ model: 'gpt-4', // ou 'gpt-3.5-turbo' messages: [{ role: 'user', content: message }], }); res.json({ reply: response.choices[0].message.content }); } catch (error) { res.status(500).json({ error: 'Erreur lors de la génération de la réponse' }); } }); app.listen(port, () => { console.log(`Serveur en écoute sur http://localhost:${port}`); });

Dans la même catégorie

Découvrez comment créer une page web en HTML/CSS

10 Mar 2025

Apprenez a installer et configurer Python sur…

10 Mar 2025

Étape 4 : Créer l’interface utilisateur

Créez un fichier index.html dans un dossier public :

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chatbot OpenAI</title> <style> body { font-family: Arial, sans-serif; } #chatbox { width: 300px; height: 400px; border: 1px solid #ccc; padding: 10px; overflow-y: scroll; } #userInput { width: 80%; padding: 10px; } button { padding: 10px; } </style> </head> <body> <h1>Chatbot Intelligent</h1> <div id="chatbox"></div> <input type="text" id="userInput" placeholder="Posez votre question..."> <button onclick="sendMessage()">Envoyer</button> <script> async function sendMessage() { const userInput = document.getElementById('userInput').value; const chatbox = document.getElementById('chatbox'); chatbox.innerHTML += `<p><strong>Vous :</strong> ${userInput}</p>`; const response = await fetch('/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: userInput }), }); const data = await response.json(); chatbox.innerHTML += `<p><strong>Chatbot :</strong> ${data.reply}</p>`; document.getElementById('userInput').value = ''; } </script> </body> </html>

Run HTML

Ajoutez la ligne suivante dans server.js pour servir les fichiers statiques :
javascript

Copy
```
app.use(express.static('public'));
```

Étape 5 : Tester et déployer

Démarrez le serveur :
bash

Copy
```
node server.js
```
Ouvrez votre navigateur et accédez à http://localhost:3000.
Testez votre chatbot en posant des questions dans la boîte de dialogue.
Déploiement (optionnel) :
- Utilisez un service comme Heroku ou Vercel pour déployer votre chatbot en ligne.
- Assurez-vous de configurer les variables d’environnement sur la plateforme d’hébergement.

Conclusion

Vous avez maintenant un chatbot intelligent intégré à un site web, capable de répondre aux questions des utilisateurs grâce à l’API OpenAI. Ce projet peut être étendu en ajoutant des fonctionnalités comme la gestion de l’historique des conversations, l’intégration avec d’autres services, ou l’utilisation de modèles plus avancés comme GPT-4.

N’hésitez pas à explorer la documentation d’OpenAI pour découvrir d’autres possibilités : OpenAI Documentation.

Ce tutoriel est un excellent point de départ pour explorer les possibilités des chatbots intelligents dans le domaine du digital. Si vous avez des questions ou des idées d’amélioration, n’hésitez pas à les partager via les commentaires ! 😊