ブラウザだけで生成AIが動く「WebLLM」とは？仕組みとできることを解説

はじめに

ChatGPTなどの一般的な生成AIサービスでは、入力した文章をインターネット経由でクラウド上のサーバーへ送り、サーバー側に搭載されたGPUで回答を生成します。

利用者のパソコンは、入力画面や生成結果を表示する役割が中心です。実際のAI処理は、サービス提供会社のデータセンターで行われます。

一方、今回紹介するWebLLMでは、対応する言語モデルをWebブラウザへ読み込み、利用者のパソコンに搭載されたGPUを使って文章を生成できます。

専用のAIサーバーを用意しなくても、Webページを開くだけで生成AIを利用できる可能性があります。

しかし、数GB規模になることもある言語モデルが、なぜ普通のWebページ上で動くのでしょうか。

その答えに関係するのが、WebGPU、WebAssembly、量子化、MLC-LLMといった技術です。

この記事では、「ブラウザAI入門」シリーズの第1回として、WebLLMの仕組みとできること、実際のWebアプリ開発で注意したい制約を初心者向けに解説します。

なお、本記事で扱うWebLLMは、MLC-AIが開発しているオープンソースプロジェクトmlc-ai/web-llmです。同名または類似名称の別プロジェクトではありません。

WebLLMとは

WebLLMは、LLMによる文章生成処理をWebブラウザ内で実行するための推論エンジンです。

LLMは「Large Language Model」の略で、日本語では大規模言語モデルと呼ばれます。大量の文章から言葉の関係を学習し、質問への回答、要約、文章作成、分類などを行うAIモデルです。

WebLLMの大きな特徴は、推論用のクラウドサーバーへ毎回リクエストを送るのではなく、モデルを利用者のブラウザへ読み込み、端末内で推論できる点にあります。

公式プロジェクトでは、WebLLMをWebGPUによるハードウェアアクセラレーションに対応した、ブラウザ内LLM推論エンジンとして説明しています。JavaScriptまたはTypeScriptから利用でき、ストリーミング出力、JSON形式の生成、Web Worker、Service Worker、Chrome拡張機能などにも対応しています。

例えば、WebLLMでは次のようなコードでチャット形式の文章生成を呼び出せます。

const response = await engine.chat.completions.create({
  messages: [
    {
      role: "user",
      content: "WebLLMについて簡単に説明してください。",
    },
  ],
});

chat.completions.create()という書き方は、OpenAIのChat Completions APIに近い形式です。そのため、クラウドAIを利用したことがある開発者にとっても理解しやすい設計になっています。

ただし、WebLLMでは使用するモデルをエンジンの初期化時に読み込むため、クラウドAPIと内部の動きが完全に同じというわけではありません。WebLLM 0.2.84の公式ドキュメントでも、MLCEngineを作成してモデルを読み込んだ後、OpenAI形式に近いAPIで生成処理を実行する流れが説明されています。

一般的なクラウドAIとの違い

WebLLMと一般的なクラウドAIの違いを整理すると、次のようになります。

WebLLMでは、生成処理そのものを端末内で行えます。しかし、WebLLMを使えば外部通信が一切発生しないとは限りません。

初回利用時には、Webアプリ本体、JavaScript、モデルデータ、WebAssemblyファイルなどを取得するために通信が発生します。標準設定でも、モデルとモデルライブラリはオンライン上の保存先から取得する構成です。

さらに、WebLLMを組み込んだWebアプリがアクセス解析、ログ送信、外部APIとの連携などを行っていれば、入力内容や利用状況が外部へ送信される可能性があります。

「WebLLMを使用していること」と「そのWebサイトが通信を行わないこと」は別の話です。

ブラウザでAIが動く仕組み

WebLLMがブラウザ内で動作する背景には、複数の技術があります。

小型言語モデルと量子化

クラウド上で提供されている高性能なLLMには、非常に多くのパラメータを持つモデルがあります。

パラメータとは、モデルが学習によって獲得した数値の集まりです。このパラメータを保存したデータは、一般にモデルの重みと呼ばれます。

大きなモデルほど重みのデータ量や必要メモリが増えるため、そのままでは一般的なパソコンのブラウザで扱うのが困難です。そこでWebLLMでは、1Bや3Bといった比較的小さなモデルや、量子化されたモデルがよく使用されます。

量子化とは、モデルの数値をより少ないビット数で表現し、データ量や必要メモリを抑える方法です。

例えば、32ビットで保存していた数値を4ビットなどの小さな形式へ変換すれば、モデルを軽量化できます。ただし、量子化方式によって回答品質や対応ハードウェアに影響が出るため、単純に小さければよいとは限りません。

WebGPU

WebGPUは、JavaScriptからパソコンやスマートフォンのGPUを利用するためのWeb APIです。

GPUは、同じような計算を大量に並列処理することが得意です。LLMの推論では行列計算を繰り返すため、CPUだけで処理するよりもGPUを利用したほうが高速化しやすくなります。

WebGPUは画像を表示するためだけの技術ではなく、機械学習などの汎用計算にも利用できます。WebLLMは、このWebGPUを通して利用者のGPUへ計算処理を渡します。

WebAssembly

WebAssemblyは、ブラウザ内で高性能な処理を実行するためのバイナリ形式です。略してWasmとも呼ばれます。

JavaScriptだけですべての推論処理を記述するのではなく、C++などで実装された処理をWebAssemblyへ変換することで、ブラウザ内でも効率的に実行できます。

WebLLMでは、GPUに渡す計算だけでなく、トークン処理や推論エンジンの制御などにもWebAssemblyが関係しています。

MLC-LLMとApache TVM

WebLLMは、単独ですべてのモデルをブラウザ向けに変換しているわけではありません。

基盤には、MLC-AIが開発するMLC-LLMと、機械学習コンパイラであるApache TVMがあります。

Apache TVMは、学習済みの機械学習モデルをさまざまなハードウェア向けに最適化し、実行可能なモジュールへ変換するためのフレームワークです。

MLC-LLMはApache TVMの仕組みを利用し、LLMをWebGPU、Windows、Linux、iOS、Androidなどの実行環境に合わせてコンパイルします。

WebLLM向けに変換する場合は、主に次の2種類のデータが用意されます。

• 量子化・変換されたモデルの重み
• WebGPUカーネルなどを含むWebAssemblyライブラリ

WebLLMの公式論文でも、MLC-LLMによって変換済みの重みとWasmライブラリを作成し、JavaScript、WebAssembly、WebGPUを組み合わせてブラウザ内推論を実現する構成が説明されています。

ブラウザキャッシュ

モデルをWebページを開くたびに最初からダウンロードすると、待ち時間と通信量が大きくなります。

そのため、WebLLMは取得したモデルデータをブラウザのキャッシュへ保存できます。WebLLM 0.2.84では、標準のCache APIに加え、設定によってIndexedDBやOrigin Private File System（OPFS）も利用できます。

2回目以降はキャッシュされたデータを利用できるため、初回より短い時間でモデルを読み込める可能性があります。

ただし、ブラウザの設定、空き容量、キャッシュの削除、保存容量の制限などにより、モデルが消去される場合もあります。

トークンを順番に生成する

LLMは、回答文を最初から一括で作成しているわけではありません。

入力された文章をトークンと呼ばれる単位へ分割し、次に続く可能性が高いトークンを一つずつ予測します。その結果を入力へ追加し、さらに次のトークンを予測します。

この処理を繰り返すことで、少しずつ文章が生成されます。WebLLMのストリーミング出力を利用すると、生成されたトークンを順番にJavaScriptへ返し、チャット画面へリアルタイムに表示できます。

WebLLMが動作する流れ

Webページを開いてから回答が表示されるまでの流れは、次のとおりです。

1. 利用者がWebページを開く
2. WebアプリのJavaScriptとWebLLMライブラリを読み込む
3. 選択されたモデルデータとWasmファイルを取得する
4. モデルの重みをブラウザへ読み込む
5. WebGPUを通してGPUで推論処理を実行する
6. 生成されたトークンをJavaScriptへ返す
7. JavaScriptが回答を画面に表示する

初回はモデルデータの取得に時間がかかりますが、キャッシュが残っていれば、2回目以降は取得済みのデータを再利用できます。

WebLLMでできること

WebLLMを利用すると、クラウドAIのAPIを呼び出さなくても、Webアプリに文章生成機能を組み込めます。

代表的な用途は、ブラウザ内で動くローカルAIチャットです。入力フォームとチャット画面を用意し、WebLLMへ質問を渡すことで、端末内で回答を生成できます。

チャット以外にも、次のような処理に利用できます。

• 長い文章を短くまとめる
• 問い合わせ内容をカテゴリーに分類する
• 固い文章を読みやすく書き換える
• 指定したJSON形式で情報を出力する
• 短いJavaScriptやPythonコードを生成する
• Webページ内の文章に対して質問する
• Chrome拡張機能へ文章生成機能を組み込む
• オフライン対応のPWAを作る
• 入力内容を外部へ送りにくい文章入力支援を作る

Webページの内容に対して質問する場合、WebLLMが自動的にページ全体を理解するわけではありません。JavaScriptで対象の文章を取得し、その文章を質問と一緒にプロンプトへ含める必要があります。

文章が長すぎる場合は、分割、検索、要約などの処理も必要です。また、PWAとしてオフライン対応させる場合は、モデルだけでなく、HTML、JavaScript、Wasmなど必要なファイルを適切にキャッシュする設計が必要です。

WebLLMを導入しただけで、自動的にすべてのページ内容を扱えたり、完全オフラインになったりするわけではありません。

WebLLMが向いている用途

WebLLMは、比較的短い文章を処理する小規模なWebアプリと相性がよい技術です。

例えば、文章の書き換え、定型的な質問応答、問い合わせ分類、入力補助など、処理内容がある程度決まっている用途が考えられます。

入力内容をクラウドAIへ送りたくない場合にも有力な選択肢になります。推論を端末内で完結するように実装すれば、文章そのものを外部の推論サーバーへ送らずに処理できます。

また、クラウドAPIの呼び出し回数に応じた料金が発生しないため、個人開発のデモや利用回数を予測しにくいアプリでも試しやすいでしょう。

• 短い文章の要約や書き換え
• 定型的な質問応答
• 入力内容を推論サーバーへ送りたくないアプリ
• クラウドAPIの利用料を抑えたい個人開発
• インターネット接続が不安定な環境
• 小規模なブラウザAIアプリ
• インストール不要で試せるデモ
• プライバシーを重視した入力支援

WebLLMが向いていない用途

WebLLMは、すべてのクラウドAIを置き換えられる技術ではありません。

ブラウザで現実的に動かせるモデルは、端末のGPUやメモリに収まる必要があります。小型モデルは軽量ですが、大規模なクラウドモデルと同じ知識量や推論能力を期待することはできません。

長大な文書を一度に処理する用途にも注意が必要です。入力が長くなるほど、モデルが保持するKVキャッシュなどのメモリ使用量が増え、処理時間も長くなります。

利用者ごとにパソコンの性能が異なる点も、Webアプリとしては大きな課題です。開発者の高性能なパソコンでは快適でも、内蔵GPUのパソコンやスマートフォンではモデルを読み込めない可能性があります。

• 大規模モデルと同等の回答品質が必要
• 長大な文書を一度に処理する
• 低性能なパソコンやスマートフォンも対象にする
• すべての端末で一定の回答速度を保証する
• 医療、法律、採用などの厳密な判断に使用する
• 大量のモデルデータをダウンロードできない
• 幅広いブラウザやOSへ完全対応する必要がある
• 複数ユーザーの処理を集中管理したい

WebLLMは「クラウドAIより常に優れている」のではなく、処理を端末側へ移すという別の選択肢です。

必要な実行環境

WebLLMを利用するには、主に次の環境が必要です。

• WebGPUに対応したWebブラウザ
• WebGPUを利用できるGPUとドライバー
• モデルを読み込めるメモリまたはGPUメモリ
• 初回のモデル取得に必要な通信環境
• HTTPSまたはlocalhostで配信されたWebページ

WebGPUの対応範囲は、ブラウザ名だけでは決まりません。同じブラウザでも、OS、ブラウザのバージョン、GPU、ドライバーによって動作状況が変わることがあります。

主要なブラウザでWebGPUの対応は進んでいますが、MDNでは現在も「Limited availability」とされています。また、WebGPUは安全なコンテキストでの利用が基本となるため、公開するWebアプリはHTTPSで配信します。

現在のブラウザがWebGPUに対応しているかは、navigator.gpuを使って確認できます。

async function checkWebGPU() {
  if (!("gpu" in navigator)) {
    console.log("このブラウザはWebGPUに対応していません。");
    return;
  }

  const adapter = await navigator.gpu.requestAdapter();

  if (!adapter) {
    console.log("利用可能なGPUアダプターが見つかりませんでした。");
    return;
  }

  console.log("WebGPUを利用できる可能性があります。");
}

checkWebGPU();

navigator.gpuが存在しても、必ずWebLLMのすべてのモデルが動くとは限りません。

モデルによって必要メモリやWebGPUの必須機能が異なるため、実際にモデルを読み込んで確認する必要があります。

対応モデルについて

WebLLMで利用できるモデルは、公式設定のprebuiltAppConfig.model_listに登録されています。WebLLM 0.2.84のソースコードでは、この一覧がビルド済みモデルライブラリとの互換性を確認する基準です。

確認時点で登録されているモデルの例は、次のとおりです。

これらの数値は、WebLLMのprebuiltAppConfigに記録されたvram_required_MBと設定値です。実際の使用メモリは、入力の長さ、生成するトークン数、ブラウザ、GPUなどによって変動します。

また、vram_required_MBは実行時に必要と見積もられたVRAMであり、モデルのダウンロードサイズと同じではありません。

モデルによって、次の項目が異なります。

• パラメータ数
• モデルデータのダウンロードサイズ
• 実行時に必要なメモリ
• q4f16_1などの量子化方式
• 日本語を含む言語性能
• 利用条件とライセンス
• コンテキスト長
• 必要なWebGPU機能

元モデルのコンテキスト長と、WebLLMで実際に使用する設定値が異なることにも注意が必要です。

例えば、Phi-4-mini-instructの公式モデルカードでは、元モデルは3.8Bパラメータで128Kトークンのコンテキスト長を持つと説明されています。一方、WebLLMのビルド済み設定では、ブラウザで扱いやすいようにコンテキスト長が4,096へ上書きされています。

ライセンスもモデルごとに異なります。Phi-4-mini-instructはMITライセンス、SmolLM2はApache License 2.0ですが、Llama 3.2には独自のコミュニティライセンスが適用されます。

商用利用の可否や必要な表示、再配布条件については、モデル名だけで判断せず、使用時点のモデルカードとライセンス本文を確認してください。

日本語性能についても同様です。モデルが多言語対応と書かれていても、日本語が公式の評価対象に含まれているとは限りません。実際に使用する文章で、要約、分類、誤回答、文字化けなどを検証する必要があります。

APIキー不要の意味

WebLLMによるローカル推論では、一般的なクラウドAIのAPIキーは基本的に必要ありません。

クラウド上の生成AIサービスへリクエストを送るのではなく、ダウンロードしたモデルを利用者のブラウザ内で実行するためです。

ただし、APIキーが不要だからといって、通信や費用が一切発生しないわけではありません。

初回のモデル取得には通信が必要です。モデルによってはデータ量が大きくなるため、通信時間や通信量を考慮する必要があります。

Webアプリを一般公開する場合は、HTMLやJavaScriptを配信するためのWebサーバー、クラウドストレージ、CDNなどが必要になることもあります。

利用者の端末ではGPUを動かすための電力が消費されます。モデルデータを配信する側には、ホスティングや転送量の費用が発生する可能性があります。

WebLLMから検索API、翻訳API、データベースAPIなどの外部サービスを呼び出す場合、そのサービスのAPIキーや利用料金は別途必要です。

つまり、APIキー不要とは、推論回数に応じたクラウドAIのAPIキーが不要という意味であり、完全無料と同じ意味ではありません。

セキュリティとプライバシー

WebLLMの大きな利点は、推論処理を利用者の端末内で実行できることです。

適切に実装すれば、入力した文章を外部の推論サーバーへ送らずに、要約や書き換えなどを行えます。個人情報や社内文章を扱う入力支援では、この特徴が役立つ可能性があります。

しかし、「ブラウザ内で動くから絶対に安全」とは限りません。

Webアプリ上で動くJavaScriptは、技術的には入力内容を別のサーバーへ送信できます。WebLLMによるローカル推論と同時に、アクセス解析やログ送信を行うことも可能です。

信頼できないWebサイトには、パスワード、顧客情報、契約書、未公開のソースコードなどを入力しないようにしてください。

利用前には、次の点を確認することが重要です。

• Webアプリの運営者とプライバシーポリシー
• JavaScriptが接続している外部サービス
• モデルやWebLLMライブラリの取得元
• 使用しているモデルのライセンス
• 入力内容や生成結果の保存方法
• ブラウザキャッシュに残るモデルデータ

開発者側では、ブラウザの開発者ツールにあるNetworkタブなどを使い、入力後にどの通信が発生しているか確認できます。

また、WebLLMのモデルデータはブラウザのCache API、IndexedDB、OPFSなどへ保存される場合があります。共有パソコンで利用する場合は、キャッシュに大きなデータが残ることも考慮しましょう。

WebLLMをコードを書かずに試す方法

WebLLMを試すだけであれば、最初から開発環境を作る必要はありません。

公式のWebLLM Chatを利用すると、ブラウザ上でモデルを選び、モデルデータを読み込んでチャットできます。

初回はモデルのダウンロードが行われるため、進捗が100%になるまで時間がかかる場合があります。

試す際は、いきなり大きなモデルを選ぶのではなく、1B前後の小さなモデルから始めると、端末で動作するか確認しやすくなります。

質問に対する正確さだけでなく、次の点も確認してみてください。

• 初回の読み込みにどの程度時間がかかるか
• 2回目の読み込みが短くなるか
• 日本語の文章を自然に生成できるか
• 長い入力で速度が低下しないか
• GPUやメモリの使用量が増えすぎないか
• オフラインにした後も利用できるか

まとめ

WebLLMは、MLC-AIが開発している、ブラウザ内でLLMを実行するためのオープンソース推論エンジンです。

WebGPUを通して利用者のGPUを使用し、WebAssembly、MLC-LLM、Apache TVMなどの技術を組み合わせることで、専用の推論サーバーを用意せずに文章を生成できます。

ローカル推論だけであればクラウドAIのAPIキーは不要で、入力内容を端末内で処理できることは大きな利点です。

一方で、初回にはモデルデータのダウンロードが必要です。利用できるモデルの大きさや回答速度は、利用者のGPU、メモリ、ブラウザによって変わります。

小型モデルが中心になるため、大規模なクラウドAIと同じ精度を期待することもできません。

WebLLMは、すべてのクラウドAIを置き換えるための技術ではありません。しかし、個人開発、ブラウザ上のデモ、文章入力支援、プライバシーを重視したWebアプリなどでは、これまでとは異なる構成を選べるようになります。

Webページを開くだけで端末内のAIを利用できることは、Webアプリ開発の選択肢を大きく広げる技術といえるでしょう。

参考にした公式情報

• WebLLM公式ドキュメント
• mlc-ai/web-llm公式GitHubリポジトリ
• prebuiltAppConfigのソースコード
• WebLLM公式論文：WebLLM: A High-Performance In-Browser LLM Inference Engine
• MDN Web Docs：WebGPU API
• MDN Web Docs：WebAssembly
• Microsoft：Phi-4-mini-instructモデルカード
• Hugging Face：SmolLM2-1.7B-Instructモデルカード
• Meta：Llama 3.2モデルカード