LLMs im Browser ausführen: WebLLM, Transformers.js und ONNX Runtime Web im Jahr 2026

LLMs Brauchen Keine Server Mehr

GPT-4 erfordert Cloud-APIs? Das ist das Denken von 2024. Bis 2026 laufen 7B-Parameter-Modelle reibungslos im Browser, und Ihre Daten verlassen niemals Ihr Gerät.

Datenschutz + Keine Kosten + Offline = Die drei entscheidenden Vorteile von Browser-KI

Zeitlinie der Browser-KI-Evolution

2023 Q4    WebLLM startet, Llama 2 mit 2 tok/s im Browser
2024 Q2    Transformers.js veröffentlicht, Hugging Face-Ökosystem verbunden
2024 Q4    WebGPU volle Unterstützung, 5x Inferenz-Beschleunigung
2025 Q2    ONNX Runtime Web unterstützt WebGPU, Enterprise-Level
2025 Q4    Quantisierung-Durchbruch, 7B-Modelle auf 3GB komprimiert
2026 Q2    Gemma 3 4B erreicht 25 tok/s im Browser — Qualitäts-Wendepunkt

Drei Frameworks auf einen Blick

Framework	Fokus	Kerntechnologie	Am besten für
WebLLM	Hochleistungs-LLM-Inferenz	WebGPU + MLCEngine	Chat, Code-Vervollständigung
Transformers.js	Full-Stack-ML-Inferenz	ONNX + WASM/WebGPU	NLP, Vision, Audio
ONNX Runtime Web	Enterprise-Inferenz-Engine	ONNX + WebGPU/WASM	Produktionsbereitstellung

WebLLM — Der Performance-König der Browser-LLMs

Architektur

┌──────────────────────────────────────────────────┐
│                  Anwendungsschicht                │
│   Chat UI │ Code-Vervollständigung │ Zusammenfassung │ ... │
├──────────────────────────────────────────────────┤
│              WebLLM Engine                        │
│   ChatModule │ Pipeline │ Tokenizer │ Scheduler   │
├──────────────────────────────────────────────────┤
│              MLCEngine (Kompilierungsoptimierung) │
│   Model Compile │ Kernel Opt │ Quantization       │
├──────────────────────────────────────────────────┤
│              WebGPU Runtime                       │
│   Compute Shader │ GPU Buffer │ Pipeline State    │
└──────────────────────────────────────────────────┘

Schnellstart

import { CreateMLCEngine } from "@mlc-ai/web-llm";

const engine = await CreateMLCEngine("gemma-3-4b-it-q4f16_1-MLC", {
  initProgressCallback: (progress) => {
    console.log(`Loading: ${(progress.progress * 100).toFixed(1)}%`);
  },
});

const reply = await engine.chat.completions.create({
  messages: [
    { role: "system", content: "You are a helpful AI assistant." },
    { role: "user", content: "Write a quicksort in TypeScript" },
  ],
  temperature: 0.7,
  max_tokens: 1024,
  stream: true,
});

for await (const chunk of reply) {
  process.stdout.write(chunk.choices[0]?.delta?.content || "");
}

Unterstützte Modelle & Leistung (Juni 2026)

Modell	Parameter	Quantisierte Größe	Geschwindigkeit (tok/s)	Erstes Laden
Gemma 3 4B IT	4B	2.3GB	25	8s
Phi-4 Mini	3.8B	2.1GB	28	7s
Qwen2.5 3B	3B	1.8GB	32	6s
SmolLM2 1.7B	1.7B	1.0GB	45	4s
Qwen2.5 0.5B	0.5B	0.4GB	85	2s

Testumgebung: M3 MacBook Pro / Chrome 126 / WebGPU

Transformers.js — Das Hugging Face-Ökosystem im Browser

Kernvorteil: Das reichhaltigste Modell-Ökosystem

import { pipeline } from "@xenova/transformers";

const classifier = await pipeline("text-classification", "Xenova/distilbert-base-uncased-finetuned-sst-2-english");
const result = await classifier("This browser AI is amazing!");
// [{ label: "POSITIVE", score: 0.9998 }]

Unterstützte Pipelines

Pipeline	Anwendungsfall	Beispielmodell
text-classification	Stimmungsanalyse	distilbert-sst2
question-answering	Frage-Antwort-System	distilbert-qa
summarization	Zusammenfassung	distilbart-cnn
translation	Übersetzung	opus-mt-en-zh
image-classification	Bildklassifizierung	vit-base-patch16
automatic-speech-recognition	Spracherkennung	whisper-tiny

ONNX Runtime Web — Enterprise-Inferenz-Engine

Grundlegende Verwendung

import ort from "onnxruntime-web";

async function runInference(modelPath: string, input: Float32Array) {
  const session = await ort.InferenceSession.create(modelPath, {
    executionProviders: ["webgpu", "wasm"],
    graphOptimizationLevel: "all",
  });

  const inputTensor = new ort.Tensor("float32", input, [1, input.length]);
  const results = await session.run({ input: inputTensor });
  return results.output.data;
}

Anbieter-Auswahlstrategie

function getBestProvider(): string {
  if (navigator.gpu) return "webgpu";
  if (document.createElement("canvas").getContext("webgl2")) return "webgl";
  return "wasm";
}

Leistungs-Benchmarks: Vollständiger Vergleich

LLM-Inferenz (Gemma 3 4B, 4-Bit-Quantisierung)

Metrik	WebLLM	Transformers.js	ONNX Runtime Web
Geschwindigkeit (tok/s)	25	18	22
Erstes Laden	8s	12s	10s
Speicher	3.2GB	3.8GB	3.5GB
Streaming	✅	✅	❌
OpenAI API Kompatibilität	✅	❌	❌

Produktionsbereitstellungsstrategien

Graceful Degradation

async function createEngineWithFallback() {
  if (navigator.gpu) {
    try { return await CreateMLCEngine("gemma-3-4b-it-q4f16_1-MLC"); }
    catch (e) { console.warn("WebGPU failed, falling back to smaller model"); }
  }
  try { return await CreateMLCEngine("SmolLM2-1.7B-q4f16_1-MLC"); }
  catch (e) { console.warn("Small model failed, falling back to API"); }
  return new APIFallbackEngine({ endpoint: "/api/chat" });
}

Service Worker Offline-Unterstützung

const MODEL_CACHE = "ai-models-v1";
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(MODEL_CACHE).then((cache) =>
      cache.addAll(["/models/smolm2-1.7b-q4.onnx", "/models/tokenizer.json"])
    )
  );
});

Entscheidungsrahmen

Ihr Bedarf?
├─ Chat / Konversationelle KI → ✅ WebLLM
├─ Multimodale KI → ✅ Transformers.js
├─ Enterprise-Produktion → ✅ ONNX Runtime Web
├─ Offline-First-App → ✅ WebLLM + Service Worker
└─ Schneller Prototyp → ✅ Transformers.js

H2 2026 Trends

Trend	Beschreibung
WebGPU Universell	Safari 18+ Unterstützung, keine Kompatibilitätsprobleme mehr
MoE im Browser	Mixtral Sparse-Modelle laufen im Browser
On-Device Fine-Tuning	LoRA-Gewichte heruntergeladen, personalisierte Modelle ohne Server
W3C Web AI API	Browser-native KI-Fähigkeiten standardisiert

Zusammenfassung

Browser-KI hat sich vom "Spielzeug" zum "Werkzeug" entwickelt — 4B-Modell mit 25 tok/s ist nutzbar
Drei Frameworks, drei Stärken — WebLLM schnell, Transformers.js vollständig, ONNX stabil
Datenschutz ist das Killer-Feature — Daten verlassen niemals den Browser, Serverkosten gleich null
Degradationsstrategie ist entscheidend — WebGPU → kleines Modell → Cloud-API, garantierte Verfügbarkeit

Wenn Ihr KI-Produkt im Jahr 2026 noch jede Anfrage in die Cloud sendet, verschwenden Sie nicht nur Serverkosten — Sie verpassen den Datenschutz, den größten Differenzierer.