Skip to main content
PHP

Cómo integrar la API de OpenAI (ChatGPT) en un proyecto PHP o JavaScript real

Por 31 octubre, 2025Sin comentarios
Integrar ChatGPT con PHP y Javascript

La inteligencia artificial ya forma parte del día a día de los desarrolladores web. Desde redactores automáticos hasta asistentes virtuales o buscadores inteligentes, GPT-4 y GPT-5 de OpenAI permiten llevar tu proyecto PHP o JavaScript a otro nivel.

En esta guía práctica verás cómo integrar la API de OpenAI paso a paso, tanto en PHP como en JavaScript, y además te dejaré ejemplos funcionales para crear tu propio asistente de soporte o generador de texto inteligente.

🧩 Paso 1. Crea tu cuenta y consigue tu API Key

  1. Entra en 👉 https://platform.openai.com

  2. Crea una cuenta (o inicia sesión).

  3. Dirígete a “View API keys” y genera una nueva.

Guarda esa clave, porque la necesitarás para todas tus peticiones:

sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

⚠️ Importante: no la publiques ni la subas a GitHub.
Trátala igual que una contraseña.

⚙️ Paso 2. Entiende cómo funciona la API

OpenAI expone un endpoint HTTP que puedes llamar desde cualquier lenguaje.
El modelo más actual (GPT-4 Turbo o GPT-5) se accede mediante peticiones POST al endpoint:

https://api.openai.com/v1/chat/completions

El cuerpo de la petición debe incluir:

  • El modelo (gpt-4-turbo, gpt-5, etc.)

  • Una lista de mensajes (role: system, user, assistant)

  • Opcionalmente parámetros como temperature o max_tokens.

💻 Paso 3. Ejemplo en PHP

Este ejemplo crea un asistente de soporte técnico que responde en lenguaje natural.

<?php
$apiKey = 'TU_API_KEY_AQUI';
$data = [
"model" => "gpt-4-turbo",
"messages" => [
["role" => "system", "content" => "Eres un asistente técnico amable y experto en soporte web."],
["role" => "user", "content" => "Mi web WordPress va lenta, ¿qué puedo hacer?"] ],
"temperature" => 0.7,
"max_tokens" => 300
];$ch = curl_init('https://api.openai.com/v1/chat/completions');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Content-Type: application/json',
'Authorization: Bearer ' . $apiKey
]);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));$response = curl_exec($ch);
curl_close($ch);$result = json_decode($response, true);
echo $result['choices'][0]['message']['content'];
?>

Qué hace:
Envía la pregunta del usuario a GPT-4 Turbo y muestra la respuesta.
Puedes adaptar el rol «system» para crear diferentes tipos de asistentes:

  • “Eres un generador de descripciones SEO.”

  • “Responde de forma breve y profesional.”

🧠 Paso 4. Ejemplo en JavaScript (fetch API)

Ideal para proyectos con Node.js, Next.js o incluso frontends puros.

<script>
async function generarTexto(prompt) {
const response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer TU_API_KEY_AQUI"
},
body: JSON.stringify({
model: "gpt-4-turbo",
messages: [
{ role: "system", content: "Eres un generador de textos creativos para blogs." },
{ role: "user", content: prompt }
],
temperature: 0.8,
max_tokens: 250
})
});
const data = await response.json();
console.log(data.choices[0].message.content);
}
// Ejemplo de uso:
generarTexto("Escribe una introducción para un artículo sobre seguridad web en 2025");
</script>

⚡ Puedes integrarlo en formularios para que los usuarios generen textos, obtengan respuestas o hagan búsquedas semánticas.

🔍 Paso 5. Ejemplo: Buscador semántico con GPT-4 / GPT-5

Imagina que tienes un listado de artículos en tu web y quieres que el usuario busque por intención, no solo por palabra clave.

Ejemplo básico en PHP:

$userQuery = "cómo asegurar mi servidor apache";
$context = "Artículos: seguridad WordPress, optimización WPO, guías PHP, migración servidores, firewall Linux";
$data = [
"model" => "gpt-4-turbo",
"messages" => [
["role" => "system", "content" => "Eres un motor de búsqueda semántico. Devuelve el título más relevante del contexto."],
["role" => "user", "content" => "Consulta: $userQuery. Contexto: $context"] ],
"max_tokens" => 50
];

GPT devuelve la opción más relevante según significado, no solo coincidencia literal.
Puedes usar esta lógica para rankear resultados de una base de datos.

🧱 Paso 6. Buenas prácticas y seguridad

Guarda la clave en variables de entorno, nunca en el código fuente:

export OPENAI_API_KEY="sk-xxxxxxxx"

Implementa límites de uso y logs.
Para evitar abusos o consumos inesperados, controla cuántas peticiones se hacen.

Caché de respuestas.
Si un usuario pregunta lo mismo, guarda la respuesta localmente para no consumir créditos.

Protege el endpoint si usas JavaScript en el frontend.
Nunca expongas la clave directamente en el navegador. Haz las peticiones desde tu servidor.

💡 Paso 7. Ideas para aplicar en proyectos reales

  • 💬 Asistente de soporte integrado en tu panel de clientes.

  • ✍️ Generador de textos SEO o descripciones de productos.

  • 🔍 Buscador semántico en tu blog o base de conocimiento.

  • 📄 Revisor de contenido que detecta errores o resume textos.

  • 🧩 Chat contextual con datos de tu propia base de datos (usando embeddings).

🎯 Conclusión

Integrar la API de OpenAI con PHP o JavaScript es más fácil de lo que parece.
Con unas pocas líneas de código puedes ofrecer una experiencia inteligente y conversacional en cualquier aplicación web.

Y lo mejor: puedes adaptarlo a tu propio flujo —desde un chatbot hasta un generador de contenido profesional.

Jairo Calero

Desarrollador web frontend y backend, especialista en webs app desarrolladas en PHP y Javascript. Experto en HTML, CSS3, PHP y Javascript con frameworks y librerías como jQuery, Angular y Bootstrap. Gestor de herramientas SEO como Google Analytics, Search Console, SEMrush o Hotjar. Email marketing y Big data.

Deja tu respuesta