ChatGPT en JavaScript con API

✅ 1. Obtener una API Key de OpenAI

1. Regístrate o inicia sesión en OpenAI:
   🔗 https://platform.openai.com/signup/
2. Ve a la sección «API Keys» en tu cuenta.
3. Genera una nueva clave secreta (API Key).
4. Guarda la API Key porque la necesitaremos en el código.

✅ 2. Hacer una llamada a ChatGPT con JavaScript (Frontend – Fetch API)

Si quieres probar desde el navegador o en un proyecto frontend, usa fetch() para llamar a la API:

const API_KEY = "TU_API_KEY_AQUI"; // Reemplaza con tu API Key

async function chatGPT(prompt) {
    const url = "https://api.openai.com/v1/chat/completions";

    const response = await fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${API_KEY}`
        },
        body: JSON.stringify({
            model: "gpt-3.5-turbo", // También puedes usar "gpt-4"
            messages: [{ role: "user", content: prompt }],
            temperature: 0.7
        })
    });

    const data = await response.json();
    console.log("Respuesta de ChatGPT:", data.choices[0].message.content);
}

// Probar la función
chatGPT("Hola ChatGPT, ¿cómo estás?");

🔹 Explicación:

• Se hace una petición POST a la API de OpenAI con fetch().
• messages contiene la conversación (el prompt que envías).
• temperature controla la creatividad de la respuesta (0.7 es equilibrado).
• Se obtiene la respuesta y se imprime en la consola.

✅ 3. Llamar a ChatGPT desde un Servidor Node.js (Backend – Express.js)

Si estás trabajando en un proyecto full stack con Node.js, usa axios:

1️⃣ Instala Axios en tu proyecto (si no lo tienes):

npm install axios dotenv express cors

2️⃣ Crea un archivo .env para tu clave API:

OPENAI_API_KEY=TU_API_KEY_AQUI

3️⃣ Crea server.js con el código:

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

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

const API_KEY = process.env.OPENAI_API_KEY;

app.post("/chat", async (req, res) => {
    try {
        const { prompt } = req.body;

        const response = await axios.post("https://api.openai.com/v1/chat/completions", {
            model: "gpt-3.5-turbo",
            messages: [{ role: "user", content: prompt }],
            temperature: 0.7
        }, {
            headers: {
                "Authorization": `Bearer ${API_KEY}`,
                "Content-Type": "application/json"
            }
        });

        res.json({ respuesta: response.data.choices[0].message.content });
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// Iniciar el servidor
app.listen(3000, () => console.log("Servidor corriendo en http://localhost:3000"));

🔹 Explicación:

• Crea un servidor con Express.js.
• Recibe peticiones POST con un prompt del usuario.
• Usa axios para hacer la llamada a OpenAI.
• Devuelve la respuesta en formato JSON.
• Escucha en http://localhost:3000.

4️⃣ Prueba el servidor con una herramienta como Postman o desde el frontend:

fetch("http://localhost:3000/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt: "¿Cuál es la capital de España?" })
})
.then(res => res.json())
.then(data => console.log("Respuesta:", data.respuesta))
.catch(error => console.error("Error:", error));

📌 CONCLUSIÓN

✅ Frontend: Usa fetch() para conectarte directamente a la API de OpenAI.
✅ Backend (Node.js): Usa axios en un servidor Express.js para manejar mejor las peticiones.
✅ Seguridad: Guarda la API Key en .env y nunca la expongas en el frontend.

🚀 ¡Listo! Ya puedes integrar ChatGPT en tu aplicación Full Stack! 😃