Cómo crear un chatbot con ChatGPT usando la API

Cómo crear un chatbot con ChatGPT para una página web

Actualizado: Agosto 2026

Crear un chatbot con ChatGPT para una página web requiere más que copiar un fragmento de JavaScript. Necesitas una interfaz para recibir mensajes, un servidor que proteja tu clave y una conexión con la API de OpenAI.

En esta guía aprenderás a construir un prototipo que pueda:

• recibir preguntas desde una página web;
• enviar los mensajes a la API de OpenAI;
• conservar el contexto básico de la conversación;
• mantener la clave API fuera del navegador;
• adaptarse a preguntas frecuentes o atención inicial.

El ejemplo utiliza JavaScript, Node.js y la Responses API. No necesitas ser un programador avanzado, pero sí debes saber crear archivos, instalar paquetes y ejecutar comandos desde una terminal.

ChatGPT, GPT personalizado y API de OpenAI: ¿son lo mismo?

Aunque suelen confundirse, son soluciones diferentes.

ChatGPT es la aplicación de conversación que se utiliza desde la web o el teléfono.

Un GPT personalizado es una configuración de ChatGPT con instrucciones, conocimientos y capacidades específicas. Funciona dentro del entorno de ChatGPT y su disponibilidad depende del tipo de cuenta y los permisos aplicables.

La API de OpenAI permite conectar los modelos con páginas web, aplicaciones y otros sistemas. Si quieres que los visitantes de tu sitio utilicen un chatbot propio, normalmente necesitas una API o una plataforma que gestione esa integración.

OpenAI utiliza actualmente la Responses API en su guía oficial de inicio para desarrolladores.

Qué necesitas para crear el chatbot

Para seguir este tutorial necesitarás:

• una cuenta en OpenAI Platform;
• una clave API;
• Node.js instalado;
• un editor como Visual Studio Code;
• una terminal;
• alojamiento compatible con aplicaciones de servidor para publicarlo.

La clave API funciona como una credencial privada. Nunca debes colocarla directamente en el HTML, JavaScript público, una entrada de Blogger o un repositorio accesible.

La arquitectura correcta será:

Visitante → interfaz del chat → backend propio → API de OpenAI

El navegador envía el mensaje a tu servidor. Después, el servidor se comunica con OpenAI utilizando la clave almacenada de manera privada.

¿Cuánto cuesta utilizar la API de OpenAI?

El consumo depende del modelo, la cantidad de texto enviado, la extensión de las respuestas y las herramientas adicionales utilizadas.

La API mide el texto mediante tokens. Una conversación larga puede consumir más porque los mensajes anteriores utilizados como contexto también se procesan.

En este ejemplo utilizaremos gpt-5.6-luna, un modelo que la documentación oficial presenta como una opción optimizada para cargas sensibles al costo. Su disponibilidad y sus tarifas deben comprobarse antes de implementar el proyecto en producción. Consulta siempre la página oficial del modelo y los precios vigentes de la API.

También debes considerar el posible costo del alojamiento, el dominio, la base de datos o la plataforma externa utilizada.

Paso 1: define la función del chatbot

Un chatbot funciona mejor cuando tiene una responsabilidad concreta. Antes de escribir código, define:

• quién lo utilizará;
• qué preguntas debe responder;
• qué información puede consultar;
• qué temas debe rechazar;
• cuándo debe dirigir al usuario hacia una persona;
• qué debe hacer cuando no conoce la respuesta.

Por ejemplo, un asistente para una tienda puede responder dudas sobre horarios, métodos de pago y políticas de devolución. No debería inventar precios, existencias ni condiciones comerciales.

Una instrucción inicial podría ser:

Eres el asistente de una tienda en línea. Responde de manera breve y cordial. No inventes precios, disponibilidad ni políticas. Si no tienes información suficiente, indica que un representante debe confirmar la respuesta.

Estas instrucciones orientan el comportamiento, pero no garantizan que todas las respuestas sean correctas. Las respuestas importantes necesitan revisión y supervisión.

Paso 2: crea la clave API

Entra en OpenAI Platform, crea un proyecto y genera una clave API.

Dentro de la carpeta del proyecto, crea un archivo llamado .env:

OPENAI_API_KEY=coloca_aqui_tu_clave
OPENAI_MODEL=gpt-5.6-luna

Después, crea .gitignore:

.env
node_modules

Esto evita que la clave y las dependencias se incorporen accidentalmente al repositorio. Aun así, debes revisar los archivos antes de publicar el proyecto.

Paso 3: prepara los archivos

Abre una terminal dentro de una carpeta vacía y ejecuta:

npm init -y
npm install express openai dotenv

Abre package.json y añade:

"type": "module"

La estructura será:

mi-chatbot/
├── public/
│   └── index.html
├── .env
├── .gitignore
├── package.json
└── server.js

Paso 4: crea el backend

Crea server.js y agrega:

import express from "express";
import OpenAI from "openai";
import "dotenv/config";

if (!process.env.OPENAI_API_KEY) {
  throw new Error("Falta la variable OPENAI_API_KEY.");
}

const app = express();
const port = process.env.PORT || 3000;

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

app.use(express.json());
app.use(express.static("public"));

app.post("/chat", async (req, res) => {
  const message = String(req.body.message || "").trim();
  const previousResponseId =
    req.body.previousResponseId || undefined;

  if (!message) {
    return res.status(400).json({
      error: "Escribe un mensaje."
    });
  }

  if (message.length > 1000) {
    return res.status(400).json({
      error: "El mensaje es demasiado largo."
    });
  }

  try {
    const response = await openai.responses.create({
      model: process.env.OPENAI_MODEL,
      instructions:
        "Eres el asistente de una tienda en línea. " +
        "Responde de forma breve, clara y cordial. " +
        "No inventes precios, existencias ni políticas. " +
        "Si no tienes información suficiente, indica que " +
        "un representante debe confirmar la respuesta.",
      input: message,
      previous_response_id: previousResponseId
    });

    res.json({
      answer: response.output_text,
      responseId: response.id
    });
  } catch (error) {
    console.error(error);

    res.status(500).json({
      error: "No fue posible generar una respuesta."
    });
  }
});

app.listen(port, () => {
  console.log(`Chatbot disponible en http://localhost:${port}`);
});

El servidor recibe el mensaje, realiza la solicitud a OpenAI y devuelve la respuesta sin exponer la clave API.

El parámetro previous_response_id enlaza la nueva solicitud con la respuesta anterior. OpenAI documenta este método para crear una conversación con varios turnos en su guía sobre gestión del estado de conversación.

Paso 5: crea la interfaz

Dentro de public, crea index.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1"
  >
  <title>Asistente virtual</title>
</head>
<body>
  <main>
    <h1>Asistente virtual</h1>

    <div id="messages" aria-live="polite"></div>

    <form id="chat-form">
      <label for="message">Escribe tu pregunta</label>
      <input
        id="message"
        maxlength="1000"
        autocomplete="off"
        required
      >
      <button type="submit">Enviar</button>
    </form>
  </main>

  <script>
    const form = document.querySelector("#chat-form");
    const input = document.querySelector("#message");
    const messages = document.querySelector("#messages");
    const button = form.querySelector("button");

    let previousResponseId = null;

    function addMessage(author, text) {
      const paragraph = document.createElement("p");
      paragraph.textContent = `${author}: ${text}`;
      messages.appendChild(paragraph);
    }

    form.addEventListener("submit", async (event) => {
      event.preventDefault();

      const message = input.value.trim();
      if (!message) return;

      addMessage("Tú", message);
      input.value = "";
      button.disabled = true;

      try {
        const request = await fetch("/chat", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            message,
            previousResponseId
          })
        });

        const data = await request.json();

        if (!request.ok) {
          throw new Error(data.error);
        }

        previousResponseId = data.responseId;
        addMessage("Asistente", data.answer);
      } catch (error) {
        addMessage(
          "Sistema",
          error.message || "Ocurrió un error."
        );
      } finally {
        button.disabled = false;
        input.focus();
      }
    });
  </script>
</body>
</html>

Para iniciar el proyecto, ejecuta:

node server.js

Después abre en el navegador:

http://localhost:3000

Este código es un prototipo educativo. Antes de publicarlo debes añadir controles contra abuso, límites por usuario, registro de errores y una forma segura de gestionar las sesiones.

Cómo conserva el contexto

La variable previousResponseId guarda el identificador de la última respuesta. Cuando el usuario envía otro mensaje, el servidor utiliza ese identificador para continuar la conversación.

Para iniciar una conversación nueva, restablécelo:

previousResponseId = null;

En una aplicación pública no conviene confiar únicamente en el identificador enviado por el navegador. Lo recomendable es asociarlo desde el backend con una sesión controlada.

La documentación de OpenAI señala que los objetos Response se almacenan durante 30 días de forma predeterminada y que los tokens anteriores de una cadena continúan contabilizándose como entrada. Revisa las opciones de almacenamiento y privacidad antes de procesar datos personales o información confidencial.

Cómo publicar el chatbot si tu web está en Blogger

Blogger puede mostrar HTML y JavaScript, pero no ejecutar un servidor privado de Node.js. Por eso nunca debes colocar la clave API dentro de una entrada, plantilla o gadget HTML.

La opción más sencilla consiste en:

1. alojar la aplicación completa en un servicio que admita Node.js y variables de entorno;
2. probar el chatbot desde la dirección proporcionada por el alojamiento;
3. enlazarlo desde Blogger o insertarlo mediante un método admitido por el proveedor.

Si separas el frontend de Blogger y el backend externo, también tendrás que configurar CORS, validar el origen y proteger el endpoint contra solicitudes automatizadas.

Antes de contratar alojamiento, confirma que el plan permita ejecutar aplicaciones Node.js. Puedes consultar esta introducción sobre alojamiento para proyectos web, pero verifica directamente las características del plan seleccionado.

Cómo hacer que responda con información propia

Las instrucciones definen el comportamiento, pero no entrenan automáticamente el modelo con los datos de tu negocio.

Para utilizar información propia puedes:

• incluir preguntas frecuentes breves en las instrucciones;
• consultar una base de datos;
• utilizar búsqueda de archivos;
• recuperar fragmentos de documentos;
• conectar inventarios o sistemas mediante funciones.

No cargues información confidencial sin evaluar previamente las condiciones de privacidad y retención.

Si necesitas ayuda para comprender o adaptar el código, puedes revisar estas herramientas de programación con inteligencia artificial. Utilízalas como apoyo y verifica siempre el código generado antes de publicarlo.

Alternativas para crear un chatbot sin programar

Si no quieres mantener un backend propio, puedes utilizar una plataforma especializada.

Botpress permite crear un bot e incorporarlo a una web mediante un script o una interfaz personalizada. Su documentación de Webchat explica las opciones disponibles.

Chatbase permite crear agentes conectados con fuentes de información y ofrece alternativas de integración. Algunas funciones requieren planes específicos, por lo que conviene consultar su documentación oficial.

Estas plataformas simplifican el desarrollo, pero sus precios, límites y funciones pueden cambiar.

Pruebas necesarias antes de publicarlo

Prueba el chatbot con:

• preguntas frecuentes;
• consultas ambiguas;
• errores ortográficos;
• solicitudes fuera de alcance;
• mensajes demasiado largos;
• intentos de cambiar sus instrucciones;
• preguntas cuya respuesta no conoce;
• interrupciones de la API.

También debes comprobar qué ocurre cuando varios usuarios escriben simultáneamente o se alcanza un límite de consumo.

Preguntas frecuentes

¿Necesito saber programar?

No si utilizas una plataforma no-code. Una integración personalizada requiere conocimientos básicos de frontend, backend, seguridad y alojamiento.

¿Puedo colocar la clave API en Blogger?

No. El código de Blogger puede ser inspeccionado por los visitantes. La clave debe permanecer en un backend o ser gestionada por una plataforma externa.

¿El chatbot aprende de cada conversación?

No automáticamente. Conservar el contexto permite relacionar varios mensajes, pero no significa que el modelo se entrene con cada visitante.

¿Cómo consigo que responda con mis documentos?

Puedes utilizar búsqueda de archivos, recuperación de información o una base de conocimiento que proporcione contenido relevante al modelo.

¿Puede sustituir completamente la atención humana?

No es recomendable asumirlo. Debe existir una ruta de escalamiento para reclamos, pagos, datos personales y situaciones que requieran confirmación.

¿Cómo controlo el costo?

Limita la longitud de los mensajes, evita contextos innecesarios, monitorea el consumo y configura controles de gasto. Revisa periódicamente los precios oficiales.

Conclusión

Crear un chatbot con ChatGPT para una página web requiere una interfaz, un backend seguro y una conexión correctamente configurada con la API de OpenAI.

Empieza con una función limitada, como responder preguntas frecuentes. Cuando esa versión sea estable, puedes añadir documentos, bases de datos o transferencia hacia una persona. Un chatbot con un alcance claro y respuestas supervisadas será más útil que uno diseñado para contestar sobre cualquier tema