comment utiliser chatgpt4o dans next.js ?

comment utiliser chatgpt4o dans next.js ?

Pour utiliser ChatGPT-4 dans une application Next.js, vous devez suivre plusieurs étapes. Voici un guide détaillé pour vous aider à intégrer ChatGPT-4 dans votre projet Next.js :

1. Créez un nouveau projet Next.js

Si vous n'avez pas encore de projet Next.js, vous pouvez en créer un en utilisant create-next-app :

npx create-next-app@latest my-chatgpt-app
cd my-chatgpt-app

2. Installez les dépendances nécessaires

Vous aurez besoin d'installer axios ou une autre bibliothèque HTTP pour faire des requêtes à l'API OpenAI. Dans cet exemple, nous utiliserons axios :

npm install axios

3. Obtenez votre clé API OpenAI

Assurez-vous d'avoir une clé API OpenAI. Vous pouvez l'obtenir en vous inscrivant sur le site d'OpenAI et en créant une nouvelle clé API.

4. Créez un fichier d'environnement

Créez un fichier .env.local à la racine de votre projet pour stocker votre clé API en toute sécurité :

NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key_here

5. Créez une API route dans Next.js

Créez un fichier pages/api/chat.js pour gérer les requêtes à l'API OpenAI :

// pages/api/chat.js
import axios from 'axios';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }

  const { prompt } = req.body;

  try {
    const response = await axios.post(
      'https://api.openai.com/v1/engines/davinci-codex/completions',
      {
        prompt,
        max_tokens: 150,
        n: 1,
        stop: null,
        temperature: 0.7,
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,
        },
      }
    );

    const completion = response.data.choices[0].text;
    res.status(200).json({ completion });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

6. Créez une interface utilisateur pour interagir avec l'API

Modifiez le fichier pages/index.js pour ajouter un formulaire permettant aux utilisateurs de soumettre des requêtes à ChatGPT-4 :

// pages/index.js
import { useState } from 'react';
import axios from 'axios';

export default function Home() {
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const res = await axios.post('/api/chat', { prompt });
      setResponse(res.data.completion);
    } catch (error) {
      console.error(error);
      setResponse('An error occurred while fetching the response.');
    }
  };

  return (
    <div>
      <h1>ChatGPT-4 in Next.js</h1>
      <form onSubmit={handleSubmit}>
        <textarea
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          rows="4"
          cols="50"
          placeholder="Enter your prompt here..."
        />
        <br />
        <button type="submit">Submit</button>
      </form>
      <div>
        <h2>Response:</h2>
        <p>{response}</p>
      </div>
    </div>
  );
}

7. Démarrez votre application

Lancez votre application Next.js :

npm run dev

Ouvrez votre navigateur et allez à http://localhost:3000. Vous devriez voir un formulaire où vous pouvez entrer un prompt et obtenir une réponse de ChatGPT-4.

Remarques

1. Sécurité : Ne jamais exposer directement votre clé API dans le code côté client. Utilisez toujours des API routes ou des fonctions serverless pour gérer les requêtes à l'API OpenAI.
2. Limites d'utilisation : Assurez-vous de respecter les limites d'utilisation de l'API OpenAI pour éviter des frais inattendus.
3. Gestion des erreurs : Ajoutez une gestion des erreurs plus robuste pour améliorer l'expérience utilisateur.

En suivant ces étapes, vous devriez être en mesure d'intégrer ChatGPT-