Tema 1 · Arquitectura

1. Arquitectura Web con IA: Cliente, Backend Proxy y Proveedores de LLMs

Comprende el patrón Backend Proxy: por qué jamás debes llamar a las APIs de OpenAI, Anthropic o Gemini directamente desde el navegador.

La Regla Fundamental: El Patrón Backend Proxy

Al construir aplicaciones web que incorporan capacidades de Inteligencia Artificial (chatbots, autocompletado inteligente, análisis de documentos, asistentes), el primer error de principiante es intentar llamar a las APIs de modelos de lenguaje (OpenAI, Anthropic Claude, Google Gemini, Groq, DeepSeek) directamente desde el código JavaScript del navegador.

Hacer una llamada directa desde el frontend expone de inmediato tu API Key secreta en las herramientas de desarrollador (DevTools / pestaña Network). Cualquier usuario o atacante podría copiar tu clave y consumir miles de dólares de tu saldo en cuestión de minutos, o usar tu cuota para generar contenido malicioso bajo tu identidad.

🚨 Peligro Crítico: Nunca almacenes ni envíes variables como OPENAI_API_KEY, ANTHROPIC_API_KEY o GEMINI_API_KEY en archivos .js, localStorage o cabeceras del cliente. Toda interacción debe pasar obligatoriamente por un Servidor Backend Proxy.
Diagrama Técnico: Arquitectura Web Segura con IA (Backend Proxy Pattern)

Diagrama 1.1: Arquitectura de 3 capas: Navegador Web (Frontend) ➔ Servidor Proxy Backend (PHP/Node) ➔ Proveedor Cloud LLM.

Las 5 Responsabilidades Críticas del Backend Proxy

El servidor backend no es un simple intermediario pasivo; es el guardián de seguridad, costos y lógica de negocio de tu aplicación con IA. Cumple cinco funciones esenciales:

Responsabilidad ¿Por qué es indispensable? Consecuencia de omitirlo
1. Ocultamiento de Secretos La clave de API se guarda en variables de entorno seguras del servidor (archivo .env fuera de la raíz web). Filtración pública de credenciales y facturas astronómicas inesperadas.
2. Autenticación y Autorización Verifica que el usuario tenga una sesión válida, rol adecuado o suscripción activa antes de gastar tokens. Cualquier bot no registrado podría saturar tu cuenta con peticiones gratuitas.
3. Rate Limiting y Cuotas Limita a cada usuario (ejemplo: máximo 20 consultas por hora o 50,000 tokens al día). Ataques de denegación de servicio (DoS) y consumo desmedido de presupuesto.
4. Enriquecimiento de Contexto (RAG & BD) El backend inyecta datos privados de MySQL/PostgreSQL y documentos relevantes en el system prompt. La IA no tendría acceso a los datos reales de tu empresa ni a las reglas de negocio.
5. Moderación y Sanitización Filtra entradas maliciosas (Prompt Injection) antes de enviarlas al modelo y valida respuestas del LLM. Fugas de datos sensibles o comportamiento imprevisto del asistente ante jailbreaks.

⚡ Backend Proxy en PHP con Manejo Seguro de Entorno y Cuotas

Endpoint backend en PHP que autentica la sesión del usuario, valida el rate limit y reenvía la petición al LLM usando cURL de forma segura.

backend-proxy-openai.php
Solo lectura
<?php
declare(strict_types=1);

// backend-proxy-openai.php - Endpoint seguro en el servidor
header('Content-Type: application/json; charset=utf-8');

// 1. Validar autenticación de sesión
session_start();
if (empty($_SESSION['user_id'])) {
    http_response_code(401);
    echo json_encode(['error' => 'No autorizado. Inicia sesión para usar el asistente.']);
    exit;
}

// 2. Leer y validar el cuerpo JSON enviado por el frontend
$input = json_decode(file_get_contents('php://input'), true);
$userMessage = trim($input['message'] ?? '');

if ($userMessage === '' || mb_strlen($userMessage) > 1000) {
    http_response_code(400);
    echo json_encode(['error' => 'Mensaje inválido o excede el límite de 1000 caracteres.']);
    exit;
}

// 3. Obtener API Key desde variable de entorno protegida en el servidor
$apiKey = getenv('OPENAI_API_KEY');
if (!$apiKey) {
    http_response_code(500);
    echo json_encode(['error' => 'Configuración de IA no disponible en el servidor.']);
    exit;
}

// 4. Construir payload con System Prompt de negocio protegido
$payload = [
    'model'       => 'gpt-4o-mini',
    'temperature' => 0.7,
    'messages'    => [
        [
            'role'    => 'system',
            'content' => 'Eres el asistente virtual oficial de Kilopolis. Responde de forma concisa, educada y en español.'
        ],
        [
            'role'    => 'user',
            'content' => $userMessage
        ]
    ]
];

// 5. Invocar al proveedor de LLM mediante cURL del lado del servidor
$ch = curl_init('https://api.openai.com/v1/chat/completions');
curl_setopt_array($ch, [
    CURLOPT_POST           => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER     => [
        'Content-Type: application/json',
        'Authorization: Bearer ' . $apiKey
    ],
    CURLOPT_POSTFIELDS     => json_encode($payload),
    CURLOPT_TIMEOUT        => 30
]);

$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

if ($httpCode !== 200 || !$response) {
    http_response_code(502);
    echo json_encode(['error' => 'Error al comunicar con el proveedor de IA.']);
    exit;
}

$data = json_decode($response, true);
$assistantReply = $data['choices'][0]['message']['content'] ?? 'Sin respuesta.';

// 6. Retornar solo el texto limpio al frontend
echo json_encode([
    'ok'    => true,
    'reply' => $assistantReply
]);
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Por qué es una pésima práctica de seguridad llamar a la API de un LLM (como OpenAI o Anthropic) directamente desde JavaScript en el navegador?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar IA Aplicada a Desarrollo Web: APIs, RAG & Agentes y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.