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.
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 sessionDemo 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
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Full-Stack Cultivation Path
Focused on sharing practical tech content about TypeScript, Vue 3, front-end architecture, and source code analysis.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
