wie verwende ich chatgpt4o in next.js?

wie verwende ich chatgpt4o in next.js?

Um ChatGPT-4 in einer Next.js-Anwendung zu verwenden, müssen Sie die OpenAI-API integrieren. Hier sind die grundlegenden Schritte, um dies zu erreichen:

1. API-Schlüssel von OpenAI erhalten:

   • Registrieren Sie sich bei OpenAI und erhalten Sie einen API-Schlüssel.

2. Next.js-Projekt einrichten:

   • Erstellen Sie ein neues Next.js-Projekt oder verwenden Sie ein bestehendes Projekt.

3. Umgebungsvariablen konfigurieren:

   • Erstellen Sie eine .env.local-Datei im Stammverzeichnis Ihres Projekts und fügen Sie Ihren OpenAI-API-Schlüssel hinzu:

     NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key
     

4. API-Routen in Next.js erstellen:

   • Erstellen Sie eine API-Route, um Anfragen an die OpenAI-API zu senden. Erstellen Sie eine Datei unter pages/api/chat.js:

     // pages/api/chat.js
     import { Configuration, OpenAIApi } from 'openai';
     
     export default async function handler(req, res) {
       const configuration = new Configuration({
         apiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY,
       });
       const openai = new OpenAIApi(configuration);
     
       if (req.method === 'POST') {
         const { prompt } = req.body;
     
         try {
           const response = await openai.createCompletion({
             model: 'text-davinci-003', // oder 'gpt-4', wenn verfügbar
             prompt: prompt,
             max_tokens: 150,
           });
     
           res.status(200).json({ result: response.data.choices[0].text });
         } catch (error) {
           res.status(500).json({ error: error.message });
         }
       } else {
         res.status(405).json({ error: 'Method not allowed' });
       }
     }
     

5. Client-seitige Anfrage erstellen:

   • Erstellen Sie eine Komponente, die eine Anfrage an die API-Route sendet und die Antwort anzeigt. Zum Beispiel in pages/index.js:

     import { useState } from 'react';
     
     export default function Home() {
       const [prompt, setPrompt] = useState('');
       const [response, setResponse] = useState('');
     
       const handleSubmit = async (e) => {
         e.preventDefault();
     
         const res = await fetch('/api/chat', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
           },
           body: JSON.stringify({ prompt }),
         });
     
         const data = await res.json();
         setResponse(data.result);
       };
     
       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"
             />
             <button type="submit">Senden</button>
           </form>
           <div>
             <h2>Antwort:</h2>
             <p>{response}</p>
           </div>
         </div>
       );
     }
     

6. Projekt starten:

   • Starten Sie Ihr Next.js-Projekt mit npm run dev oder yarn dev und öffnen Sie es in Ihrem Browser.

Jetzt haben Sie eine einfache Next.js-Anwendung, die mit ChatGPT-4 interagiert. Sie können die API-Route und die Benutzeroberfläche weiter anpassen, um zusätzliche Funktionen hinzuzufügen oder das Benutzererlebnis zu verbessern.