Google Chrome has recently started experimenting with a new set of Built-in Prompt AI APIs that allow you to call out to an on-device Gemini Nano LLM without any data ever leaving your device. As part of this experimentation, Google launched the Google Chrome Built-in AI Challenge, which offers a number of rewards in different categories for projects that make interesting use of these new APIs.

But, what happens when the AI Challenge finishes and naturally, you want to continue showing off your great project and open it up to anyone using a different browser other than Chrome? You could try re-coding your project with webGL and transformers.js, but that looks like a lot of work. Or, you could pretend we're still in 1999 and paste a big "Works best with Chrome" banner along the top of your page.

Install the AiBrow extension

This is where the open-source AiBrow extension comes to the rescue (because it's not 1999 and we want our sites to work best everywhere!!). AiBrow has support for all the same APIs that the Chrome Prompt API supports, and supports all Chromium browsers like Brave, Edge, Wavebox, Vivaldi and also non-Chromium browsers like Firefox. It even extends on the Chrome APIs with support for things like embeddings and grammar!

👀
Take a look at the AiBrow docs for all the supported APIs

Of course, you'd love to see your project work everywhere after the competition and bring it to all the browsers. Luckily it's super easy to get started!

if (!window.ai) {
  // window.ai isn't available in this browser. Let's get AiBrow installed
  const ok = window.confirm('Your browser doesn\'t have built-in AI support. Do you want to download the AiBrow extension to add this?')
  if (ok) {
    window.location.href = `https://aibrow.ai/install?redirect_to=${window.location.href}`
  }
}

This snippet checks that window.ai is available, if it's not, it prompts the user to install the AiBrow extension (you might want to work on some UI that fits in with the style of your page). By using the AiBrow install URL with the redirect_to query set to our current page, the AiBrow installer will automatically send users back to your page when they've completed the installation.

Once the extension is installed, or if it's partially installed you might want to give some more feedback to users, you can check the current state of the AiBrow install with the following code...

if (window.aibrow) {
  console.log('The AiBrow extension is installed')

  // The extension also needs a native helper installed. You can check if this is the case
  const capabilities = await window.aibrow.capabilities()
  if (capabilities.helper) {
    console.log('The AiBrow helper is installed')

    // You're all set!
  }
}

Finally, if for any reason you need to change the behaviour of your extension when AiBrow is polyfilling the window.ai APIs, it's easy to check this too...

if (window.ai && window.ai.aibrow === true) {
  // AiBrow is providing the built-in window.ai APIs in this browser
}

What about extensions?

AiBrow supports extensions too! AiBrow has a handy npm package that provides all the same APIs. If you want to use AiBrow in your extension, this snippet will help get you started...

import aibrow from '@aibrow/extension'

const capabilities = await aibrow.capabilities()
if (!capabilities.extension) {
  // The extension isn't installed!
  console.log('Install the AiBrow extension from https://aibrow.ai/install')
} else if (!capabilities.helper) {
  // The extension helper isn't installed
  console.log('Install the AiBrow helper from https://aibrow.ai/install')
}

Obviously, users rarely read the console logs, so you'll need to dress these messages up in the way that suits your extension best. What's really helpful, is the AiBrow install page will automatically detect the current install state and help the user with the next step as needed.

Once the extension and helper's installed, using the AI APIs is as simple as just calling the AiBrow API

import aibrow from '@aibrow/extension'

const session = await aibrow.languageModel.create()
console.log(await session.prompt('Are you an AI language model?')

What else does the AiBrow extension support?

Impressed by how easy it was to get your entry working everywhere? AiBrow does more than just polyfill the Chrome APIs, it aims to work as an experimentation point for what built-in AI really can do in the browser. How about taking a look at some of the extra APIs and features you can use!

Tell us about your project!

Have you found your site or extension works with AiBrow, or maybe it doesn't? Tell us about it on our GitHub!