Ejecutando LLMs en el navegador — Guía completa de WebLLM

Introducción

"Quiero usar LLMs, pero gestionar las claves API es muy tedioso…" "No quiero enviar los inputs del usuario a la nube…"

WebLLM resuelve ambos problemas a la vez.

WebLLM es un motor de inferencia de alto rendimiento que ejecuta LLMs directamente en el navegador — completamente serverless y sin backend. A diferencia de los servicios de IA basados en la nube como ChatGPT o Claude, todo el procesamiento de inferencia se completa íntegramente en el dispositivo del usuario.

Este artículo proporciona una explicación exhaustiva de la arquitectura, características y métodos de implementación de WebLLM.

¿Qué es WebLLM?

WebLLM (@mlc-ai/web-llm) es una biblioteca JavaScript de código abierto desarrollada por el proyecto MLC-AI. Fue construida principalmente por investigadores de la Universidad Carnegie Mellon, la Universidad Jiao Tong de Shanghái y NVIDIA, y fue publicada a finales de 2024 como el paper "WebLLM: A High-Performance In-Browser LLM Inference Engine".

En pocas palabras:

Un framework que convierte el navegador en un entorno de ejecución para LLMs.

Características principales

Cómo funciona

La razón por la que WebLLM entrega alto rendimiento es que aprovecha completamente las últimas tecnologías de navegador.

1. WebGPU — Aceleración GPU

WebGPU es una nueva Web API para acceso de bajo nivel a la GPU desde el navegador. A diferencia del antiguo WebGL, está diseñado específicamente para computación GPU de propósito general (GPGPU), habilitando operaciones matriciales de alta velocidad requeridas por los LLMs.

Internamente, WebLLM usa Apache TVM y MLC-LLM para optimizar los grafos de computación del modelo para WebGPU. También se incorporan técnicas de optimización de inferencia de última generación como PagedAttention y FlashAttention.

Lo que es particularmente significativo es el beneficio de la abstracción de dispositivos. Las implementaciones nativas tradicionales requerían bases de código separadas para cada proveedor — CUDA (NVIDIA), Metal (Apple), etc. — pero con WebGPU, una sola implementación puede apuntar a múltiples GPUs.

graph LR
    A[Enfoque Tradicional] --> B[Implementación CUDA]
    A --> C[Implementación Metal]
    A --> D[Implementación OpenCL]
    A --> E[...]
    
    F[Enfoque WebLLM] --> G[Un solo WebGPU para todas las GPUs ✨]

2. WebAssembly (Wasm) — Fallback CPU

WebAssembly juega un papel importante cuando la GPU no está disponible o para computaciones auxiliares de CPU. Dado que puede ejecutar código computacional avanzado escrito en C/C++ a velocidad casi nativa en el navegador, maneja eficientemente cierto procesamiento del modelo en el lado de la CPU.

3. Web Workers — Aislamiento del hilo UI

La inferencia de LLMs es extremadamente intensiva en recursos. Ejecutarla en el hilo principal congelaría la UI. WebLLM ejecuta el procesamiento de inferencia en un Web Worker, manteniendo la capacidad de respuesta de la interfaz de usuario.

graph LR
    A[Hilo Principal] <-->|Paso de mensajes| B[Web Worker]
    A --> C[Actualizaciones de UI]
    B --> D[Inferencia LLM]

4. Cache Storage — Inicio rápido después de la primera carga

Los modelos LLM típicamente tienen entre cientos de megabytes y varios gigabytes de tamaño. WebLLM guarda los modelos descargados en el Cache Storage del navegador, de modo que los lanzamientos posteriores cargan instantáneamente desde el caché.

Descripción de la arquitectura

La arquitectura de WebLLM consta de tres componentes principales.

graph TB
    A[Aplicación Web<br/>API JavaScript compatible con OpenAI]
    B[MLCEngine Web Worker<br/>Descarga la inferencia pesada del hilo UI]
    C[WebGPU / WebAssembly<br/>Aceleración GPU / Computación auxiliar CPU]
    
    A --> B
    B --> C

Rendimiento

Según los resultados de evaluación del paper "WebLLM: A High-Performance In-Browser LLM Inference Engine" (arXiv:2412.15803):

Al comparar WebLLM (WebGPU + JavaScript/Wasm) con MLC-LLM (Metal + Python/C++) en un Apple MacBook Pro M3 Max, WebLLM retuvo hasta el 80% de la velocidad de decodificación nativa.

A pesar de ejecutarse en el navegador, lograr hasta el 80% del rendimiento nativo demuestra que ha alcanzado un nivel práctico de usabilidad.

Modelos soportados

WebLLM soporta una amplia gama de modelos (ejemplos seleccionados):

• Serie Llama 3.1 / 3.2
• Serie Phi 3.5 / 4
• Serie Gemma 2
• Serie Mistral
• Serie Qwen 2.5

Están disponibles múltiples formatos de cuantización (como q4f16_1 y q4f32_1), lo que te permite elegir según la capacidad de memoria de tu dispositivo.

Implementación

Construí una aplicación de chat usando WebLLM. Aquí está una captura de pantalla en acción:

Un asistente de IA privado que se ejecuta completamente en el navegador. Todo el procesamiento se ejecuta localmente.

Veamos cómo implementar una aplicación como esta.

Instalación

npm install @mlc-ai/web-llm

Implementación básica de chat

import * as webllm from "@mlc-ai/web-llm";

async function main() {
  // Seleccionar un modelo (cuantizado)
  const selectedModel = "Llama-3.2-3B-Instruct-q4f16_1-MLC";

  // Inicializar el motor (progreso de descarga via callback)
  const engine = await webllm.CreateMLCEngine(selectedModel, {
    initProgressCallback: (progress) => {
      console.log(`Cargando: ${Math.round(progress.progress * 100)}%`);
    },
  });

  // Chat usando la API compatible con OpenAI
  const reply = await engine.chat.completions.create({
    messages: [
      { role: "system", content: "Eres un asistente útil." },
      { role: "user", content: "Cuéntame sobre WebLLM." },
    ],
  });

  console.log(reply.choices[0].message.content);
}

main();

Implementación con Web Worker (Recomendado)

Para evitar congelaciones de UI, se recomienda usar Web Workers en producción.

import * as webllm from "@mlc-ai/web-llm";

const handler = new webllm.WebWorkerMLCEngineHandler();
self.onmessage = (msg) => {
  handler.onmessage(msg);
};

import * as webllm from "@mlc-ai/web-llm";

const selectedModel = "Llama-3.2-3B-Instruct-q4f16_1-MLC";

// Crear un motor Web Worker
const engine = new webllm.WebWorkerMLCEngine(
  new Worker(new URL("./worker.js", import.meta.url), { type: "module" })
);

// Configurar el callback de progreso
engine.setInitProgressCallback((progress) => {
  console.log(`Cargando: ${Math.round(progress.progress * 100)}%`);
});

// Cargar el modelo
await engine.reload(selectedModel);

// Luego solo llama a engine.chat.completions.create() como de costumbre

Soporte de streaming

const stream = await engine.chat.completions.create({
  messages: [{ role: "user", content: "Cuéntame sobre el Monte Fuji" }],
  stream: true,
});

for await (const chunk of stream) {
  const delta = chunk.choices[0]?.delta?.content ?? "";
  process.stdout.write(delta); // Salida en tiempo real
}

Advertencias y limitaciones

Aunque WebLLM es una tecnología muy atractiva, es importante entender sus limitaciones actuales.

Compatibilidad del navegador con WebGPU (a partir de febrero de 2026): La situación mejoró significativamente a finales de 2025, y ahora los cuatro principales navegadores — Chrome, Edge, Firefox y Safari — tienen WebGPU habilitado por defecto. Sin embargo, el soporte varía según la plataforma.

Dado que el soporte también depende del hardware GPU y el estado del driver, aún se recomiendan la detección de características mediante navigator.gpu y una implementación de fallback WebAssembly.

Configuración de aceleración hardware
Incluso en máquinas con GPU, la configuración del navegador puede restringir el renderizado al modo software. Si WebGPU muestra "Solo software" en chrome://gpu:

1. Habilitar aceleración hardware: Activa "Usar aceleración de hardware cuando esté disponible" en chrome://settings/system
2. Deshabilitar lista de bloqueo GPU: Habilita "Anular lista de renderizado de software" en chrome://flags
3. Reiniciar completamente el navegador: Cierra todas las ventanas antes de volver a abrir

Después de la configuración, verifica que el estado WebGPU muestre "Acelerado por hardware" en chrome://gpu.

Descarga inicial pesada
Los modelos deben descargarse en el primer lanzamiento. Incluso la versión cuantizada de Llama-3.2-3B tiene aproximadamente 2–3 GB, lo que hace esencial la implementación de indicadores de progreso para una buena experiencia de usuario.

Los modelos no se comparten entre orígenes
Los modelos en caché solo se comparten dentro del mismo origen. Usar el mismo modelo en una aplicación web diferente requiere una descarga separada.

Sanitización de la salida del LLM
Insertar texto generado directamente en el DOM plantea riesgos XSS. Siempre sanitiza la salida usando bibliotecas como DOMPurify.

// ❌ Peligroso
element.innerHTML = llmOutput;

// ✅ Seguro
element.innerHTML = DOMPurify.sanitize(llmOutput);

Casos de uso

Aquí hay escenarios donde WebLLM es particularmente efectivo.

Aplicaciones centradas en la privacidad
En campos que manejan información sensible — como salud, legal y finanzas — es crucial que los datos no se envíen a la nube. WebLLM completa todo el procesamiento en el dispositivo.

Aplicaciones con capacidad offline
Una vez descargado el modelo, se pueden proporcionar funciones de IA sin conexión a internet. Combinado con PWA, puedes construir asistentes de IA que funcionen offline.

Reducción de costos
Dado que se eliminan las tarifas de llamadas a la API, se pueden esperar ahorros de costos significativos para aplicaciones de alto uso.

Inferencia híbrida
Una arquitectura híbrida — usando WebLLM en el navegador para tareas ligeras y APIs en la nube para las más pesadas — también es un enfoque efectivo.

Perspectivas futuras

La especificación WebGPU aún está evolucionando, y se espera que la adición de nuevas características como subgroups traiga más mejoras de rendimiento. También se anticipa soporte mejorado para el backend Metal de Apple Silicon y dispositivos móviles.

A medida que los navegadores maduran como entornos de ejecución de IA en el edge, WebLLM está posicionado para convertirse en una opción estándar para desarrollar aplicaciones de IA centradas en la privacidad.

Resumen

WebLLM es una tecnología que está remodelando la suposición de que "la IA se ejecuta en la nube". Prueba la demo oficial en WebLLM Chat para experimentar los LLMs en el navegador por ti mismo.

Referencias

• Documentación oficial de WebLLM
• GitHub: mlc-ai/web-llm
• Paper: WebLLM: A High-Performance In-Browser LLM Inference Engine (arXiv:2412.15803)
• web.dev: Build a local, offline-ready chatbot with WebLLM