Chrome Unveils Multiple Built‑In AI APIs for Web Developers

Chrome now offers built‑in AI capabilities through Translation, Summarizer, and Prompt APIs that run locally in the browser, providing faster, more private, and hardware‑accelerated AI tasks for web developers, with Origin Trial programs and detailed usage examples.

Full-Stack Cultivation Path
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Chrome Unveils Multiple Built‑In AI APIs for Web Developers

Chrome Built‑In AI

Chrome integrates on‑device large language models via Web Platform APIs, exposing Translation, Summarizer, and Prompt APIs. The built‑in model is Gemini Nano, an efficient variant of the Gemini LLM family optimized for desktop and laptop hardware and fine‑tuned per task without downloading new models.

Advantages

Efficiency : No deployment or management of models; the browser handles download, updates, and storage.

Performance : Local execution removes network latency and can use GPU or NPU acceleration.

Privacy : Data stays on the device.

Reliability : Automatic model updates.

Client‑Side vs Server‑Side AI

Client‑Side AI : Suited for lightweight, real‑time tasks such as autocomplete or grammar correction.

Server‑Side AI : Preferred for compute‑intensive or data‑heavy workloads.

API Catalog

Task APIs : Specialized models (Translator API, Summarizer API).

Exploratory APIs : Prompt API for experimental on‑device use.

Translation API

Provides on‑device translation without network requests.

Usage

Feature detection:

if ('translation' in self && 'createTranslator' in self.translation) {
  // Translation API supported
}

Check language‑pair support:

const supportResult = await translation.canTranslate({
  sourceLanguage: 'en',
  targetLanguage: 'fr'
});
switch (supportResult) {
  case 'no':
    // not supported
    break;
  case 'readily':
    // can translate immediately
    break;
  case 'after-download':
    // need to download language pack
    translator.ondownloadprogress = progressEvent => {
      // update progress UI
    };
    break;
}

Create and run a translator:

const translator = await self.translation.createTranslator({
  sourceLanguage: 'en',
  targetLanguage: 'fr'
});
const translatedText = await translator.translate('Where is the next bus stop, please?');
console.log(translatedText); // "Où est le prochain arrêt de bus, s'il vous plaît ?"

Origin Trial limits

Maximum of three downloadable language packs; language‑pair selection is restricted for privacy.

Translations are processed sequentially; large batches may block subsequent requests.

Currently usable only on the main thread; Web Worker support is planned.

Summarizer API

Generates concise summaries of articles, documents, or chat logs.

Usage

Feature detection:

if ('ai' in self && 'summarizer' in self.ai) {
  // Summarizer API supported
}

Model download (automatic on first use) with progress monitoring:

const summarizer = await ai.summarizer.create({
  monitor(m) {
    m.addEventListener('downloadprogress', e => {
      console.log(`Downloaded ${e.loaded} of ${e.total} bytes.`);
    });
  }
});

Non‑streaming summary:

const longText = document.querySelector('article').innerText;
const summary = await summarizer.summarize(longText, {
  context: 'This article is intended for a tech‑savvy audience.'
});
console.log(summary);

Streaming summary:

const textStream = fetch('long-article.txt').then(res => res.body);
const summaryStream = await summarizer.summarizeStreaming(textStream);
const reader = summaryStream.getReader();
let summary = '';
while (true) {
  const {done, value} = await reader.read();
  if (done) break;
  summary += value;
}
console.log(summary);

Origin Trial limits

Only English text is supported.

Usage quotas may apply during the trial.

Prompt API

Enables Chrome extensions to run on‑device LLM interactions.

Origin Trial availability

Available in Chrome versions 131‑136.

Setup

Add the aiLanguageModelOriginTrial permission and a trial token to manifest.json:

{
  "permissions": ["aiLanguageModelOriginTrial"],
  "trial_tokens": ["GENERATED_TOKEN"]
}

Register the extension origin (e.g., chrome-extension://YOUR_EXTENSION_ID) and obtain a token, then place it in trial_tokens.

Model download and capabilities

const capabilities = await chrome.aiOriginTrial.languageModel.capabilities();
if (capabilities.available === 'after-download') {
  const session = await chrome.aiOriginTrial.languageModel.create({
    monitor(m) {
      m.addEventListener('downloadprogress', e => {
        console.log(`Downloaded ${e.loaded} of ${e.total} bytes.`);
      });
    }
  });
}

Session configuration

const session = await chrome.aiOriginTrial.languageModel.create({
  temperature: Math.max(capabilities.defaultTemperature * 1.2, 2.0),
  topK: capabilities.defaultTopK,
});
await session.prompt('Where is the nearest coffee shop?');

System and initial prompts

const session = await chrome.aiOriginTrial.languageModel.create({
  systemPrompt: 'You are a helpful assistant.'
});
await session.prompt('What is the capital of Italy?'); // "Rome"

Prompt cancellation and session termination

const controller = new AbortController();
stopButton.onclick = () => controller.abort();
const result = await session.prompt('Write me a poem!', {signal: controller.signal});
session.destroy(); // end the session

Demo URLs

Translation demo: https://chrome.dev/web-ai-demos/translation-language-detection-api-playground/

Summarizer demo: https://chrome.dev/web-ai-demos/summarization-api-playground/

Extension sample repository: https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/ai.gemini-on-device

Reference

https://developer.chrome.com/docs/ai/built-in

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

AIChromeWeb APIGemini NanoPrompt APITranslation APISummarizer API
Full-Stack Cultivation Path
Written by

Full-Stack Cultivation Path

Focused on sharing practical tech content about TypeScript, Vue 3, front-end architecture, and source code analysis.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.