Using Gemini Nano Prompt API in Chrome Canary for In‑Browser AI

Gemini Nano

Google is developing a series of web platform APIs and browser features that allow large language models, such as Gemini Nano, to run directly in the browser, eliminating the need for server‑side model hosting.

Enabling Gemini Nano in Chrome Canary

To try Gemini Nano, install Chrome Canary and enable the following flags:

chrome://flags/#prompt-api-for-gemini-nano

chrome://flags/#optimization-guide-on-device-model

After enabling the flags, restart Chrome. The model (about 3 GB) will be downloaded to your machine, requiring up to 22 GB of free space.

Checking Model Readiness

Use canCreateTextSession to query the model status, which returns one of three strings:

'no' – the device or browser does not support the prompt model.

'after-download' – the model is supported but must be downloaded first.

'readily' – the model is ready for use without additional download.

You can verify the download progress at chrome://components and look for the version 2024.6.5.2205 of the Optimization Guide On‑Device Model.

Using the Prompt API

Once the model is ready, create a text session with await ai.createTextSession() . The API offers two output modes:

Full output:

const session = await ai.createTextSession();
const result = await session.prompt('Where is the capital of China?');
console.log(result);

Streaming output:

const stream = await session.promptStreaming('Introduce the major internet companies in Beijing.');
for await (const chunk of stream) {
  console.log(chunk);
}

A Practical Demo – Mouse‑Selection Translation

The following code listens for a mouse‑up event, extracts the selected English text, and translates it to Chinese using Gemini Nano:

document.addEventListener('mouseup', async function() {
  let selectedText = window.getSelection().toString().trim();
  if (selectedText && /[a-zA-Z]/.test(selectedText)) {
    try {
      console.log(`Translating: ${selectedText}`);
      const translatedText = await translateText(selectedText);
      console.log(`Result: ${translatedText}`);
    } catch (error) {
      console.error('Translation error:', error);
    }
  }
});

async function translateText(text) {
  const session = await ai.createTextSession();
  const prompt = `Translate the following English text to Chinese: '${text}'`;
  const result = await session.prompt(prompt);
  return result;
}

This demo shows how a few lines of JavaScript can add powerful AI‑driven features to any web page without managing external servers.

Conclusion

The Prompt API enables web developers to integrate on‑device AI capabilities such as Gemini Nano easily, offering benefits like simple deployment, hardware acceleration, offline usage, and reduced privacy concerns. Feedback and comments are welcome.