【APIキー不要】Chrome組み込みAI（Gemini Nano）入門！JavaScriptでブラウザ上にセキュアなローカルAI機能を実装する完全ガイド

AI技術の進化に伴い、LLM（大規模言語モデル）をWebブラウザ上で直接動かす「オンデバイスAI」が急速に注目を集めています。これまでブラウザ上でAIを動かすには、WebGPUを活用した高負荷なライブラリを使用するか、外部のAPIサーバーを経由する必要がありました。

しかし、Google Chromeのアップデートにより、ブラウザ自体に軽量LLM「Gemini Nano」を組み込み、JavaScriptからAPIキー不要で直接呼び出せる「Built-in AI（組み込みAI）」の実験的提供が始まっています。

本記事では、このChrome組み込みAIの基本概要から、開発環境の構築、具体的なAPI（Prompt API）の実装コード、実務で遭遇しやすいトラブルシューティングまでをシニアエンジニアの視点で徹底的に解説します。

1. Chrome組み込みAI（Gemini Nano）とは？

Chromeの組み込みAIとは、ユーザーのデバイス上にダウンロードされたGoogleの最軽量かつ効率的なLLM「Gemini Nano」を、ブラウザが標準で提供するJavaScript APIを介して直接実行する技術です。

従来のAPIサーバー経由のAI実装と比較して、以下のような圧倒的なメリットがあります。

完全ローカル・セキュア: データがデバイス外に送信されないため、個人情報や機密データを扱うアプリケーションでも圧倒的にセキュアです。
APIキーが不要: 開発者側でAPIキーを管理・保護する必要がなく、利用料金の増大を懸念する必要もありません。
オフライン動作: インターネット接続が不安定な環境や、完全なオフライン状態でも動作します。
リソースの効率化: ブラウザ側でモデルの読み込みと最適化が行われるため、クライアント側で重いWASMや数GBのモデルファイルを明示的にデプロイ・ダウンロードさせる手間（Transformers.js v3 × WebGPUを活用したローカルAI実装などの個別管理）を劇的に削減できます。

現在、この機能はW3CのWeb Incubator Community Group（WICG）において標準化が進められています。詳細は公式の Prompt API Explainer（英語）などで標準化ロードマップを確認できます。

2. 開発環境の準備（Chrome Flagsの設定手順）

現在（2025年時点）、組み込みAI（Prompt API）は実験的機能（Experimental Features）として提供されているため、利用するにはChrome Canaryなどの開発者向けバージョンや、特定の機能フラグを有効化する必要があります。

以下にセットアップ手順を詳しく示します。

ステップ 1: 対応ブラウザの準備

本機能を確実にテストするため、最新の「Chrome Canary」または「Chrome Dev」チャンネルのブラウザをインストールして起動してください。

ステップ 2: 機能フラグの有効化

ChromeのURLバーに以下を順に入力し、設定を変更します。

chrome://flags/#optimization-guide-on-device-model を開く
- 設定値を「Enabled」または「Enabled BypassPrefRequirement」に変更します。
chrome://flags/#prompt-api-for-gemini-nano を開く
- 設定値を「Enabled」に変更します。

設定を変更後、ブラウザの指示に従ってChromeを「Relaunch（再起動）」してください。

ステップ 3: モデル（Gemini Nano）のダウンロード確認

ブラウザ再起動後、モデルの自動ダウンロードが開始されます。ダウンロード状況を確認するには、chrome://components を開き、「Optimization Guide On Device Model」という項目を探します。

バージョンが 0.0.0.0 の場合は、ダウンロードが開始されていないか進行中です。「Check for update（アップデートを確認）」をクリックし、ステータスが「Component updated」に変わるまで数分待ちます。モデルのサイズは約1.5GB〜2GBあるため、安定した通信環境で行ってください。

3. JavaScriptでの基本的な実装手順

準備が整ったら、実際にJavaScriptからGemini Nanoを呼び出してみましょう。組み込みAIでは、window.ai（バージョンによっては window.model や translation など細分化された名前空間）というグローバルオブジェクトを介して操作します。

以下に、最も基本的なテキスト生成（Prompt API）の実装例を示します。

3-1. モデルの利用可能性チェックとセッション作成

モデルが利用可能かどうかを非同期で確認し、テキスト生成用セッション（Session）を作成します。

async function initAI() {
  // 1. window.aiオブジェクトの存在確認
  if (typeof window.ai === 'undefined' || typeof window.ai.languageModel === 'undefined') {
    console.error('Chrome Built-in AI (Prompt API) はこのブラウザでサポートされていないか、有効化されていません。');
    return null;
  }

  // 2. デバイス上でモデルが利用可能（ダウンロード済み）かチェック
  const capabilities = await window.ai.languageModel.capabilities();
  if (capabilities.available === 'no') {
    console.error('Gemini Nanoモデルがダウンロードされていないか、デバイスのスペックが不足しています。');
    return null;
  }

  console.log('Gemini Nanoの利用が可能です。セッションを作成します。');
  
  // 3. AIセッションのインスタンスを作成
  const session = await window.ai.languageModel.create({
    systemPrompt: "あなたは親切で簡潔に回答するAIアシスタントです。"
  });
  
  return session;
}

3-2. テキスト生成（prompt / promptStreaming）の実行

セッションが作成できたら、プロンプトを投げて結果を取得します。組み込みAIでは、通常の prompt() と、順次トークンを出力する promptStreaming() の2種類が用意されています。UIのレスポンス向上にはストリーミング出力が必須です。

async function askAI(promptText) {
  const session = await initAI();
  if (!session) return;

  try {
    console.log(`質問: ${promptText}`);
    
    // ストリーミング実行
    const stream = session.promptStreaming(promptText);
    let resultText = '';

    for await (const chunk of stream) {
      // ストリーミング出力は累積された文字列が返るため、最新状態をそのまま反映
      resultText = chunk;
      document.getElementById('output').innerText = resultText;
    }
    
    // 使用後にセッションを破棄（リソース解放）
    session.destroy();
    
  } catch (error) {
    console.error('AIの呼び出し中にエラーが発生しました:', error);
  }
}

HTML側の簡素なマークアップ例：

<textarea id="input" placeholder="AIに質問する内容を入力..."></textarea>
<button onclick="askAI(document.getElementById('input').value)">実行</button>
<div id="output" style="white-space: pre-wrap; margin-top: 10px; padding: 10px; border: 1px solid #ccc;"></div>

公式のさらに詳細なAPI仕様については、Googleが公開している Chrome Built-in AI Documentation（一次ソース）を参照してください。

4. 開発時の注意点：実務でのトラブルシューティング

オンデバイスAI開発では、従来のWebAPI呼び出しとは異なる独自の挙動やエラーに直面することが多々あります。ここでは、代表的なエラー原因とその解決方法をまとめます。

トラブル 1: `window.ai` が `undefined` になる

原因 1: Chromeのバージョンが古い、または Canary / Dev 以外のバージョンを使用している。
原因 2: chrome://flags でフラグ設定を変更した後、ブラウザを完全に再起動していない。バックグラウンドでChromeのプロセスが残っているとフラグが適用されません。
解決策: Chromeを完全に終了させてから再起動します。Macの場合は Cmd + Q で終了し、再度立ち上げてください。

トラブル 2: `create()` 呼び出し時に `Model execution service is not available` エラーが発生する

原因: chrome://components にて「Optimization Guide On Device Model」のアップデートが完了しておらず、内部モデルがまだ準備できていません。
解決策: コンポーネントページで手動ダウンロードを実行し、完了するまで待つ必要があります。また、ローカルディスクの空き容量が不足している場合（特に空きが10GB未満の場合）はダウンロードが自動的に停止・スキップされることがあるため、ストレージの空き容量を十分に確保してください。

トラブル 3: システムメモリ（RAM）不足によるパフォーマンスの極端な低下

原因: Gemini Nanoをオンデバイスで動かすには、最低でも 8GB（推奨 16GB以上）のRAMが必要です。デバイスが他の重いアプリケーションでメモリを消費している場合、推論速度が極端に低下するか、ブラウザのプロセス自体が強制終了することがあります。
解決策: capabilities.available のチェック結果に基づき、オンデバイスAIが利用できない場合のフォールバック（例: OllamaなどのローカルLLMサーバーやクラウドAPIへの切り替え）を最初から設計に組み込んでおきましょう。

5. まとめと今後の展望

Chrome組み込みAI（Gemini Nano）により、開発者は高価なAIサーバーの運用インフラを気にする必要がなくなり、JavaScriptのコードを数行書くだけでセキュアなオンデバイスAIをユーザーに提供できるようになります。

現在はまだ実験的機能という位置づけですが、今後Chrome以外の主要ブラウザ（EdgeやSafariなど）への標準化提案が進めば、Web開発におけるAI実装のゲームチェンジャーになることは間違いありません。

ユーザーのプライバシー保護を第一に考えたいプロダクトや、オフライン環境下で動作するタスク管理ツール、セキュリティポリシーの厳しい企業向けインフラシステムなどにおいて、この「ブラウザ完結のローカルAI」をいち早く導入してみてはいかがでしょうか。