Prompt API

ブラウザ内蔵のLLMを利用


概要
- Prompt APIは、ブラウザ内蔵のLLM（大規模言語モデル）を利用するためのAPI - Chromeの場合、ブラウザに内蔵されている Gemini Nano が利用される - 2026/02/16現在、ChromeでPrompt APIを利用するには、早期プレビュープログラム申し込みとChromeのフラグをONの手順が必要 - 早期プレビュープログラム申し込み: https://developer.chrome.com/docs/ai/prompt-api?hl=ja - 申し込み後、下記2つのフラグをONにして、Chromeを再起動 - [chrome://flags/#optimization-guide-on-device-model](chrome://flags/#optimization-guide-on-device-model) - [chrome://flags/#prompt-api-for-gemini-nano-multimodal-input](chrome://flags/#prompt-api-for-gemini-nano-multimodal-input)

デモ

 

        


        

      

    


    

      

        
コード


        

          
HTML



<!-- filepath: untitled:Untitled-1 -->
<div id="demo">
  <fieldset>
    <textarea id="prompt" rows="4" cols="50">日本語で、3行で自己紹介して。</textarea>
    <button id="run">
      <span class="button_label">Run</span>
    </button>
  </fieldset>
  <pre id="out"></pre>
</div>


        


        

          
JavaScript



const wrapperElement = document.querySelector('#demo');
const prompt = wrapperElement.querySelector('#prompt');
const out = wrapperElement.querySelector('#out');

wrapperElement.querySelector('#run').addEventListener('click', async () => {
  wrapperElement.classList.add('running');
  const availability = await LanguageModel.availability();
  out.textContent = `availability: ${availability}\n`;

  const session = await LanguageModel.create({
    monitor(m) {
      m.addEventListener('downloadprogress', (e) => {
        out.textContent = `downloading: ${Math.round(e.loaded * 100)}%\n`;
      });
    },
  });

  const answer = await session.prompt([
    { role: 'system', content: 'You are a helpful assistant.' },
    { role: 'user', content: prompt.value },
  ]);

  out.textContent += `\n${answer}\n`;
  wrapperElement.classList.remove('running');
});


        


      

    


    

      

        
参照