WebLLM の究極ガイド：WebGPU を用いたブラウザ内 LLM

大規模言語モデル（LLM）は AI 開発の定番となっていますが、ほとんどのエコシステムは依然として膨大なクラウドサーバーに頼っています。WebLLM は、現代の LLM をユーザーのブラウザで完全に実行し、WebGPU を活用してリアルタイム推論を行い、プライバシーを保護することで、あのパラダイムを変えます。

このガイドでは以下を紹介します。

1. WebLLM のインストールとセットアップ方法を示す。
2. Llama‑3、Phi‑3、Mistral など人気モデルをロードして実行する。
3. OpenAI 互換 API を使用してチャット、ストリーミング、JSONモードを行う。
4. Web Workers、Service Workers、Chrome 拡張機能で WebLLM を拡張する。
5. 軽量でローカルに動作するチャットボットデモをデプロイする。

さっそく始めましょう。

1. WebLLM とは？

WebLLM（Web Large Language Model の略）は以下のような特徴を持っています。

• ブラウザ内 ― サーバー呼び出しなし。
• 高性能 ― ハードウェアアクセラレーションに WebGPU を利用。
• OpenAI 互換 ― OpenAI の SDK と同じ API を使用。
• 拡張性 ― カスタムモデルを組み込むか、Web Workers 上で実行。
• 本番レディ ― ストリーミング、JSON モード、予定されている関数呼び出しをサポート。

クイックリンク: https://webllm.mlc.ai

2. インストール

# npm
npm install @mlc-ai/web-llm
# yarn
yarn add @mlc-ai/web-llm
# pnpm
pnpm add @mlc-ai/web-llm

CDN

スクリプトタグを好む場合、jsDelivr 経由で WebLLM を読み込めます。

<script type="module">
  import * as webllm from "https://esm.run/@mlc-ai/web-llm";
  // …
</script>

3. 最小限のチャットアプリ構築

以下は vanilla‑JS バージョンです。同じロジックは React、Vue などあらゆるフレームワークでも機能します。

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

const initProgress = (p) => console.log(`Loading: ${p.percentage}%`);
const modelId = 'Llama-3.1-8B-Instruct-q4f32_1-MLC';

async function init() {
  const engine = await CreateMLCEngine(modelId, { initProgressCallback: initProgress });
  const chat = async (messages) => {
    const result = await engine.chat.completions.create({ messages });
    return result.choices[0].message.content;
  };
  // Demo call
  const reply = await chat([
    { role: 'system', content: 'You are helpful.' },
    { role: 'user', content: 'Tell me a joke.' }
  ]);
  console.log('AI:', reply);
}
init();

ポイント: - CreateMLCEngine はエンジンを構築し、モデルをロードします。 - initProgressCallback はダウンロード進捗を報告。 - 返却 API は OpenAI と同等で、chat.completions.create を使用。

4. ストリーミングチャット

WebLLM は stream:true をサポートし、AsyncGenerator を返します。

const streamGen = await engine.chat.completions.create({
  messages,
  stream: true,
  stream_options: { include_usage: true }
});

let text = '';
for await (const chunk of streamGen) {
  text += chunk.choices[0]?.delta.content ?? '';
  console.log(text);
}
console.log('Total tokens:', chunk.usage?.total_tokens);

5. JSON モードと構造化出力

const reply = await engine.chat.completions.create({
  messages,
  temperature: 0.2,
  response_format: { type: 'json_object' }
});
const json = JSON.parse(reply.choices[0].message.content);

エンジンは response_format が設定されている場合、スキーマに準拠したレスポンスを保証します。

6. Web Workers 上での実行

専用 Web Worker を使用すると UI をレスポンシブに保てます。

1. worker.ts

   import { WebWorkerMLCEngineHandler } from '@mlc-ai/web-llm';
   const handler = new WebWorkerMLCEngineHandler();
   self.onmessage = handler.onmessage;
   

2. main.ts

   import { CreateWebWorkerMLCEngine } from '@mlc-ai/web-llm';
   const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
   const engine = await CreateWebWorkerMLCEngine(worker, modelId, { initProgressCallback });
   

このパターンにより、重い計算をメインスレッドから切り離せます。

7. オフラインキャッシュ用 Service Workers

Service Workers を使うと、モデルがページリロード時に保持され、オフラインや低遅延体験が可能になります。

self.addEventListener('activate', () => {
  /* init handler */
});

メインアプリで登録:

navigator.serviceWorker.register('./sw.ts', { type: 'module' });
const engine = await CreateServiceWorkerMLCEngine(modelId, { initProgressCallback });

8. カスタムモデル

WebLLM は MLC 形式にコンパイルされた任意のモデルを取り込めます。app config に model と model_lib の URL を設定します。

const appConfig = { model_list: [{
  model: 'https://mydomain.com/my-llama',
  model_id: 'MyLlama-3B',
  model_lib: 'https://mydomain.com/myllama3b.wasm'
}] };
const engine = await CreateMLCEngine('MyLlama-3B', { appConfig });

これにより、ローカルやプライベートなモデルの立ち上げが簡単になります。

9. Chrome 拡張機能例

WebLLM は拡張スキャフォールドを提供しています – 軽量 UI あるいは永続的バックグラウンドワーカーのいずれか。リポジトリ内の examples/chrome-extension フォルダーで、任意のウェブページにローカルアシスタントを注入する完全なセットアップを参照してください。

10. パフォーマンスと互換性

ハードウェアアクセラレーション

WebGPU が主なスピードアップをもたらします。ベンチマークでは 8‑B モデルの推論に関して、純粋な JS より 3 倍〜5 倍のレイテンシ低減が確認されています。GPU が無いシステムでは、エンジンは WebAssembly にスムーズに降格します。

11. ヘルプと貢献

• ドキュメント & ブログ – https://webllm.mlc.ai/docs
• Discord コミュニティ – 迅速なサポートを受ける。
• GitHub Issues – 問題報告や機能リクエストを提出。
• Pull Requests – コード、例、ドキュメントへの貢献。

12. まとめ

WebLLM はサーバーコストやプライバシーのトレードオフなしに、ブラウザに高性能 LLM を持ち込むことを可能にします。AI チャットボットのプロトタイピング、Chrome 拡張機能の構築、カスタムモデルの実験など、エンジンのモジュラー API と WebGPU アクセラレーションは、魅力的な選択肢となります。

次のステップ？ - https://webllm.mlc.ai のプレイグラウンドを試す。 - リポジトリをクローンして examples/get-started を操作する。 - 独自の Chrome 拡張機能を作成する実験を行う。

コーディングを楽しみ、ブラウザでお会いしましょう！