AI

When it comes to AI within the browser extension, we can differentiate two approaches:

• Server + client: Traditional implementation, same as for web and mobile, used to stream responses generated on the server to the client.
• Chrome built-in AI: An experimental implementation of Gemini Nano that's built into new versions of the Google Chrome browser.

We recommend relying more on the traditional server + client approach, as it's more versatile and easier to implement. Chrome's built-in AI is a nice feature, but it's still experimental and has some limitations.

Of course, you can always implement a hybrid approach which combines both solutions to achieve the best results.

Server + client

The traditional usage of AI integration in the browser extension is the same as for web app and mobile app. We use the exact same API endpoint, and we leverage streaming to display answers incrementally to the user as they're generated.

import { useState } from "react";
import { api } from "~/lib/api/react";
 
const Popup = () => {
  const [answer, setAnswer] = useState("");
  const { mutate, isPending } = api.ai.chat.useMutation({
    onSuccess: async (data) => {
      for await (const chunk of data) {
        setAnswer((prev) => prev + chunk);
      }
    },
  });
 
  return <div>{answer}</div>;
};
 
export default Popup;

It's the most reliable and recommended way to use AI in the browser extension. Feel free to reuse or modify it to suit your specific needs.

Chrome built-in AI

Chrome's built-in AI is a preview feature. To use it, you need Chrome version 127 or greater and you must enable these flags:

• chrome://flags/#prompt-api-for-gemini-nano: Enabled
• chrome://flags/#optimization-guide-on-device-model: Enabled BypassPrefRequirement
• chrome://components/: Click Optimization Guide On Device Model to download the model.

Once enabled, you'll be able to use window.ai to access the built-in AI and do things like this:

You can even use a dedicated provider from the Vercel AI SDK ecosystem to simplify its usage. Please remember that this API is still in its early stages and might change in the future.

To learn more, please check out the official Chrome documentation and the articles listed below.