Comment Utiliser ChatGPT dans une Application Web ?

L’intégration de ChatGPT dans une application web permet d’ajouter des fonctionnalités avancées d’intelligence artificielle, comme un chatbot interactif, une assistance à la rédaction ou une automatisation intelligente. Grâce à l’API d’OpenAI, il est possible d’intégrer ChatGPT dans n’importe quelle application web en quelques étapes.

Dans cet article, nous allons voir comment utiliser ChatGPT dans une application web, en passant par l’inscription à l’API, la configuration d’un backend et la création d’une interface utilisateur en HTML, CSS et JavaScript.

1. S’inscrire et Obtenir une Clé API OpenAI

Avant d’utiliser ChatGPT, vous devez obtenir une clé API fournie par OpenAI.

Étapes :

  1. Créer un compte sur OpenAI → https://platform.openai.com/signup
  2. Accéder à la console API → https://platform.openai.com/
  3. Générer une clé API dans l’onglet « API Keys »
  4. Copier la clé et la conserver précieusement (elle ne sera plus visible après création)

👉 Attention : L’utilisation de l’API est payante après un certain nombre de requêtes gratuites. Pensez à consulter les tarifs d’OpenAI.

2. Configuration du Backend avec Node.js et Express

Nous allons créer un serveur backend pour interagir avec l’API de ChatGPT.

Installation des dépendances

Assurez-vous d’avoir Node.js installé, puis créez un projet :

bashCopierModifiermkdir chatgpt-app
cd chatgpt-app
npm init -y

Ajoutez Express et Axios (pour envoyer des requêtes HTTP) :

bashCopierModifiernpm install express axios dotenv cors

Créez un fichier .env et ajoutez votre clé API OpenAI :

makefileCopierModifierOPENAI_API_KEY=your_openai_api_key_here

Création du serveur Express (server.js)

javascriptCopierModifierrequire('dotenv').config();
const express = require('express');
const axios = require('axios');
const cors = require('cors');

const app = express();
const PORT = 5000;

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

app.post('/chat', async (req, res) => {
    try {
        const { message } = req.body;
        
        const response = await axios.post("https://api.openai.com/v1/chat/completions", {
            model: "gpt-4",
            messages: [{ role: "user", content: message }],
            temperature: 0.7
        }, {
            headers: {
                "Authorization": `Bearer ${process.env.OPENAI_API_KEY}`,
                "Content-Type": "application/json"
            }
        });

        res.json(response.data.choices[0].message);
    } catch (error) {
        res.status(500).json({ error: "Erreur avec l'API OpenAI" });
    }
});

app.listen(PORT, () => console.log(`Serveur démarré sur http://localhost:${PORT}`));

👉 Explication :

  • Express sert de serveur pour recevoir les requêtes.
  • Axios envoie des requêtes à l’API OpenAI.
  • CORS autorise les requêtes depuis le client web.

3. Création de l’Interface Web (HTML, CSS, JavaScript)

Nous allons maintenant créer une interface web simple avec un champ de saisie et une zone de réponse.

Fichier index.html

htmlCopierModifier<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT Web App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="chat-container">
        <h2>ChatGPT</h2>
        <div id="chat-box"></div>
        <input type="text" id="user-input" placeholder="Posez une question...">
        <button onclick="sendMessage()">Envoyer</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

Fichier styles.css

cssCopierModifierbody {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.chat-container {
    width: 400px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#chat-box {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
}

input {
    width: 80%;
    padding: 10px;
}

button {
    padding: 10px;
    cursor: pointer;
}

Fichier script.js

javascriptCopierModifierasync function sendMessage() {
    const userInput = document.getElementById("user-input");
    const chatBox = document.getElementById("chat-box");

    const userMessage = userInput.value;
    if (!userMessage) return;

    chatBox.innerHTML += `<p><strong>Vous :</strong> ${userMessage}</p>`;
    userInput.value = "";

    const response = await fetch("http://localhost:5000/chat", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({ message: userMessage })
    });

    const data = await response.json();
    chatBox.innerHTML += `<p><strong>ChatGPT :</strong> ${data.content}</p>`;
}

4. Exécution de l’Application Web

Démarrez le serveur Node.js avec :

bashCopierModifiernode server.js

Ouvrez le fichier index.html dans un navigateur. Vous pouvez maintenant poser des questions et recevoir des réponses de ChatGPT ! 🚀

5. Améliorations Possibles

✅ Stocker l’historique des conversations pour un chat plus naturel
✅ Améliorer l’interface utilisateur avec React.js ou Vue.js
✅ Ajouter un avatar IA pour une expérience immersive
✅ Intégrer une authentification pour limiter l’accès

Conclusion

Nous avons vu comment intégrer ChatGPT dans une application web avec :

  • Un backend Node.js/Express pour communiquer avec OpenAI
  • Une interface HTML, CSS, JavaScript pour interagir avec l’utilisateur

🚀 Cette base vous permet de créer un chatbot IA performant pour votre projet ! 🔥

Et vous, quelle application souhaitez-vous créer avec ChatGPT ?

carle
carle

Publications similaires

🔥Recommandations

Amazfit T-Rex 2
Withings ScanWatch
Tecno Camon 30 Premier 5G
Tecno Camon 30 5G