Chrome now has an AI Summarizer API built right in
The team behind Chrome has been on a roll when it comes to shipping cool yet useful features over the past few months. Last May, they shipped the support for the new if() function in CSS and, before that, tools to help write better with AI, among other things.
Now, they have shipped a new feature that lets you summarize long text using AI, right in the browser through the new Summarizer API. This is a game-changer for developers who want to add AI summarization capabilities to their web apps (or Chrome extensions) without needing to build complex AI models from scratch.
The Summarizer API in Chrome lets apps quickly turn long text into short, clear summaries.
- What is the Summarizer API?
- How does it work?
- How do developers use it?
- Usage Example
- Why is it useful?
- Support
What is the Summarizer API?
It’s a tool built into Chrome (from version 138 onwards) that helps websites and apps automatically create summaries of long articles, documents, or chat conversations.
The summaries can be short sentences, bullet points, headlines, or teasers — whatever fits your needs.
How does it work?
The developers can use this API to let users get the main points of a long text without reading everything. You can choose the type (key points, tldr, teaser, headline), format (plain text or markdown), and length (short, medium, long) of the summary.
The API uses a built-in AI model called Gemini Nano, which gets downloaded the first time it’s needed.
How do developers use it?
To start using the Summarizer API, developers need to check if the browser supports it, set up their summarization options, and then create a summarizer instance.
The summarizer can then be used to summarize text in two ways:
- Batch: Summarizes all at once.
- Streaming: Provides real-time updates as the summary is being created.
Usage Example
To use the Summarizer API, first, make sure the browser supports the Summarizer API.
if ('Summarizer' in self) {
// The Summarizer API is supported.
}
Next, decide what kind of summary you want (key points, tldr, teaser, headline), the format (markdown or plain-text), and the length (short, medium, long).
const options = {
type: 'key-points', // or 'tldr', 'teaser', 'headline'
format: 'markdown', // or 'plain-text'
length: 'medium', // or 'short', 'long'
sharedContext: 'This is a health article', // optional
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
}
};
Before creating the summarizer, check if the model is ready.
const availability = await Summarizer.availability();
if (availability === 'unavailable') {
// The Summarizer API isn't usable.
return;
}
Make sure there’s user activation (like a button click), then create the summarizer.
if (navigator.userActivation.isActive) {
const summarizer = await Summarizer.create(options);
}
Quick note: The
navigator.userActivation.isActivecheck ensures that the summarizer is created only after a user action (like clicking a button, typing, or touching the screen). This is a security feature: it makes sure the Summarizer API only runs after a real user action, not automatically or in the background.
Summarize your text
You can summarize in two ways.
Batch (all at once):
const longText = document.querySelector('article').innerHTML;
const summary = await summarizer.summarize(longText, {
context: 'This article is for health-conscious readers.',
});
console.log(summary);
Streaming (eal-time updates):
const longText = document.querySelector('article').innerHTML;
const stream = summarizer.summarizeStreaming(longText, {
context: 'This article is for beginners.',
});
for await (const chunk of stream) {
console.log(chunk);
}
Show the summary to your users
Display the summary in your app however you like. For instance, in a popup, a sidebar, or a new section.
That’s it! You’ve added AI-powered summarization to your web app using Chrome’s Summarizer API.
Why is it useful?
The Summarizer API is great for:
- Quickly getting the main points of long articles or documents.
- Making it easier for users to understand complex content.
- Helping users save time by summarizing long chats or discussions.
- Saving time by giving you the main ideas quickly.
Support
Currently, it works on Chrome for Windows, Mac (Ventura and newer), and Linux, but not on mobile devices or ChromeOS yet. On top of this, your computer needs a good GPU (more than 4 GB of VRAM) for it to work.
And lastly, the API runs in secure contexts (HTTPS) only, so you can’t use it on regular HTTP sites.
👋 Hi there! This is Amit, again. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
