The Web Is Getting Smarter with Built-in AI

We have witnessed several revolutions in web development. Technologies like Canvas, SVG, and HTML5 storage redefined what was possible in browsers, leading to rich, modern applications.

Now, we are entering the intelligence era. Artificial Intelligence can write code, summarize long text, extract entities, perform research, and even solve complex math and science problems using natural instructions.

Until recently, these capabilities were only available through cloud-based AI models like OpenAI’s ChatGPT or Anthropic’s Claude, where developers pay for every input and output token. The cost adds up and eventually passes on to end users, limiting adoption.

But things are changing. Google Chrome has taken a major step forward by introducing AI APIs built directly into the browser.

Chrome’s Built-in AI APIs

Google Chrome has introduced seven AI APIs, powered by Google Gemini Nano, a local AI model that runs entirely on your machine.

You can read more about them in the official documentation:
https://developer.chrome.com/docs/ai/built-in-apis

These APIs are designed to be fast, private, and free because they don’t rely on remote servers. Once installed, the model files are stored locally at:

~/Library/Application Support/Google/Chrome/OptGuideOnDeviceModel/

Supported Platforms

These APIs are currently supported only on desktop and Chromebook Plus devices.

Requirements:

• Operating System: Windows 10/11, macOS 13+ (Ventura and later), Linux, or ChromeOS (Platform 16389.0.0+ on Chromebook Plus)
• Storage: At least 22 GB of free space on the Chrome profile volume
• GPU: More than 4 GB of VRAM
• CPU: 16 GB of RAM or more and 4+ cores
• Network: Unlimited or unmetered connection

They are not supported on mobile devices yet.

The 7 AI APIs

All powered by Gemini Nano, running directly inside your browser.

Translator API Example

The Translator API allows you to translate text directly within your application without any network calls.

Live demo: Translator Example

let isTranslatorAvailable = 'Translator' in self;

async function createTranslator(options) {
    return await Translator.create(options);
}

async function translateText() {
    if (!isTranslatorAvailable) {
        alert('Translator API is not available in your environment.');
        return;
    }

    const text = document.getElementById('inputText').value;
    const fromLang = document.getElementById('fromLanguage').value;
    const toLang = document.getElementById('toLanguage').value;

    const options = {
        sourceLanguage: fromLang,
        targetLanguage: toLang,
        monitor(m) {
            m.addEventListener('downloadprogress', (e) => {
                console.log(`Translation progress: ${e.loaded * 100} %`);
            });
        }
    };

    const translator = await createTranslator(options);
    const translation = await translator.translate(text);
    document.getElementById('translationResult').innerText = translation;
}

Language Detection API Example

This API can automatically detect the language of any text input.

Live demo: Language Detection Example

let languageDetector;

async function initializeLanguageDetector() {
    languageDetector = await LanguageDetector.create({
        monitor(m) {
            m.addEventListener('downloadprogress', (e) => {
                console.log(`Download progress: ${e.loaded * 100} %`);
            });
        }
    });
}

if ('LanguageDetector' in self) {
    initializeLanguageDetector();
}

async function detectLanguage() {
    const text = document.getElementById('inputText').value;
    const results = await languageDetector.detect(text);
    const detectedLang = results[0].detectedLanguage;
    document.getElementById('result').innerText = `Detected Language: ${detectedLang}`;
}

Summarizer API Example

The Summarizer API can generate concise summaries, key points, or headlines from large text blocks. It supports both plain text and Markdown formats.

Live demo: Summarizer Example

let isSummarizerAvailable = 'Summarizer' in self;

async function createSummarizer(options) {
    return await Summarizer.create(options);
}

async function generateSummary() {
    if (!isSummarizerAvailable) {
        alert('Summarizer API is not available in your environment.');
        return;
    }

    const text = document.getElementById('inputText').value;
    const length = document.getElementById('summaryLength').value;
    const type = document.getElementById('summaryType').value;
    const format = document.getElementById('summaryFormat').value;

    const options = {
        type: type,
        length: length,
        format: format,
        outputLanguage: 'en',
        monitor(m) {
            m.addEventListener('progress', (e) => {
                console.log(`Summarization progress: ${e.loaded * 100} %`);
            });
        }
    };

    const summarizer = await createSummarizer(options);
    const summary = await summarizer.summarize(text);
    document.getElementById('summaryResult').innerText = summary;
}

The Future: Prompt API and Beyond

Among all APIs, the Prompt API is the most flexible. It allows you to pass any custom prompt and get a generated completion locally. This opens up endless possibilities for intelligent web apps, from writing assistants to summarizers, without needing cloud APIs or token costs.

Privacy and Accessibility

Because these APIs run entirely on your device, your data never leaves your machine. There are no network calls, no API bills, and no token usage.

That means AI capabilities are free, private, and accessible to everyone.

Conclusion

Just as HTML5 transformed the web a decade ago, Chrome’s built-in AI APIs are bringing the next evolution: the intelligent web.

Developers can now integrate translation, summarization, language detection, proofreading, and creative writing capabilities natively into their web apps.

This is the beginning of a smarter, privacy-first web, and the best part is that it is already here.

Let’s make the web better, together.