Convertimos el sitio web en un asistente de IA: ChatGPT API en JavaScript

¿Por qué su sitio web necesita un cerebro? ChatGPT API + JavaScript

Imagine: un usuario entra en su sitio web y no se encuentra con una página estática, sino con un asistente vivo. Escribe código, traduce texto, genera ideas o simplemente mantiene un diálogo. ¿Suena a ciencia ficción? En realidad, son un par de docenas de líneas en JavaScript y una solicitud API a ChatGPT.

En este artículo, analizaremos cómo conectar ChatGPT API en JavaScript, desde el registro de la clave hasta un chatbot completo. Aprenderá a enviar solicitudes, manejar errores y aprovechar al máximo la red neuronal. ¡Vamos allá!

¿Qué es ChatGPT API y para qué sirve?

OpenAI API es el puente entre su código y el gigantesco modelo de lenguaje (GPT-4, GPT-3.5). Usted envía texto (prompt) y el modelo devuelve una respuesta generada. Es simple, pero las posibilidades son ilimitadas.

En JavaScript, la integración es especialmente cómoda: puede usar fetch en el navegador o axios / node-fetch en el servidor (Node.js). Sin bibliotecas complejas, solo HTTP y JSON.

¿Dónde sería útil en un sitio educativo como PythonLib?

\n
• Asistente interactivo — responde preguntas sobre Python.
\n
• Generador de código — escribe ejemplos según la solicitud del usuario.
\n
• Revisión de tareas — analiza el código del estudiante.
\n
• Chatbot de soporte técnico — responde 24/7.
\n

Paso 1. Obtener la clave API de OpenAI

Sin la clave no se puede. Vaya a platform.openai.com, regístrese y vaya a la sección API Keys. Haga clic en Create new secret key — cópiela de inmediato. Guarde la clave en secreto, ¡no la inserte en el código del cliente!

Para las pruebas, el saldo gratuito es suficiente (normalmente $5-18). Pero recuerde: las solicitudes al modelo cuestan dinero, aunque sean centavos.

Paso 2. Solicitud más simple en JavaScript (Node.js)

La forma más rápida de probar es escribir un script en Node.js. Instale node-fetch (o use el fetch incorporado en Node 18+).

// chatgpt.js\nimport fetch from 'node-fetch';\n\nconst API_KEY = 'su_clave_secreta';\nconst API_URL = 'https://api.openai.com/v1/chat/completions';\n\nasync function askChatGPT(prompt) {\n  const response = await fetch(API_URL, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      'Authorization': `Bearer ${API_KEY}`\n    },\n    body: JSON.stringify({\n      model: 'gpt-3.5-turbo', // o gpt-4\n      messages: [\n        { role: 'user', content: prompt }\n      ],\n      temperature: 0.7,\n      max_tokens: 500\n    })\n  });\n\n  const data = await response.json();\n  return data.choices[0].message.content;\n}\n\n// Uso\nconst answer = await askChatGPT('Escribe una función en Python para ordenar una lista');\nconsole.log(answer);

Ejecute node chatgpt.js — y la red neuronal le responderá con código. ¡Magia!

Analizando la estructura de la solicitud

En el cuerpo de la solicitud enviamos:

\n
• model — qué versión de GPT (gpt-3.5-turbo es más rápida y barata, gpt-4 es más inteligente).
\n
• messages — array de mensajes. Se puede añadir system (instrucción del modelo), assistant (contexto) y user.
\n
• temperature — creatividad de la respuesta (0 — hechos estrictos, 1 — creatividad).
\n
• max_tokens — longitud máxima de la respuesta en tokens (1 token ≈ 0.75 palabras).
\n

Paso 3. Integración de ChatGPT API en JavaScript en el navegador

Aquí hay un detalle: nunca envíe la clave API desde el código del cliente — la robarán. Use un proxy de servidor (Node.js, Python) o Edge Functions.

Pero para una demostra