¿Cómo usar chatgpt4o en next.js?

Respuesta:

Para usar ChatGPT-4 en una aplicación Next.js, necesitarás interactuar con la API de OpenAI. Aquí te dejo una guía paso a paso para integrar ChatGPT-4 en tu proyecto Next.js:

1. Configura tu proyecto Next.js

Si aún no tienes un proyecto Next.js, puedes crear uno nuevo con el siguiente comando:

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

2. Instala Axios

Usaremos Axios para hacer solicitudes HTTP a la API de OpenAI. Instálalo con el siguiente comando:

npm install axios

3. Configura las variables de entorno

Crea un archivo .env.local en la raíz de tu proyecto y agrega tu clave API de OpenAI:

NEXT_PUBLIC_OPENAI_API_KEY=tu_clave_api_de_openai

4. Crea una función para interactuar con la API de OpenAI

Crea un archivo en lib/openai.js y define una función para hacer solicitudes a la API de OpenAI:

// lib/openai.js
import axios from 'axios';

const apiKey = process.env.NEXT_PUBLIC_OPENAI_API_KEY;

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

  return response.data.choices[0].text.trim();
};

5. Crea una API route en Next.js

Crea un archivo en pages/api/chat.js para manejar las solicitudes desde el frontend:

// pages/api/chat.js
import { getChatGPTResponse } from '../../lib/openai';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { prompt } = req.body;

    try {
      const response = await getChatGPTResponse(prompt);
      res.status(200).json({ response });
    } catch (error) {
      res.status(500).json({ error: 'Error al obtener respuesta de ChatGPT' });
    }
  } else {
    res.status(405).json({ error: 'Método no permitido' });
  }
}

6. Crea una interfaz de usuario en Next.js

Edita el archivo pages/index.js para agregar un formulario que permita a los usuarios enviar preguntas y recibir respuestas de ChatGPT:

// 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.response);
    } catch (error) {
      console.error('Error al obtener respuesta de ChatGPT:', error);
    }
  };

  return (
    <div>
      <h1>Chat con GPT-4</h1>
      <form onSubmit={handleSubmit}>
        <textarea
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          rows="4"
          cols="50"
        />
        <br />
        <button type="submit">Enviar</button>
      </form>
      {response && (
        <div>
          <h2>Respuesta:</h2>
          <p>{response}</p>
        </div>
      )}
    </div>
  );
}

7. Ejecuta tu aplicación

Finalmente, ejecuta tu aplicación Next.js:

npm run dev

Ahora deberías tener una aplicación Next.js que interactúa con ChatGPT-4. Puedes enviar preguntas a través del formulario y recibir respuestas generadas por el modelo de OpenAI