AI

There are two approaches to AI in a browser extension:

• Server + client: Traditional implementation, same as for web and mobile, used to stream server-generated responses to the client.
• Chrome built-in AI: An optional on-device model through Chrome's Prompt API.

We recommend the traditional server + client approach because it's more versatile and easier to implement. Chrome's built-in AI requires a supported browser and device, so keep a server-backed fallback.

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

To expose the complete templates from the separate AI Kit repository, follow the extension AI Kit integration recipe. AI Kit has no extension app, so the recipe keeps all provider work on the Core web API and adds a thin WXT client.

Server + client

The traditional AI setup in the browser extension is the same as for the web app and the mobile app. We use the same API endpoint and leverage streaming to display answers incrementally as they're generated.

import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";

const Popup = () => {
  const { messages } = useChat({
    transport: new DefaultChatTransport({
      api: "/api/ai/chat",
    }),
  });

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          {message.parts.map((part, i) => {
            switch (part.type) {
              case "text":
                return <div key={`${message.id}-${i}`}>{part.text}</div>;
            }
          })}
        </div>
      ))}
    </div>
  );
};

export default Popup;

This is the most reliable way to use AI in the browser extension. Feel free to reuse or modify it to suit your needs.

Chrome built-in AI

Chrome's Prompt API runs Gemini Nano on the user's device through LanguageModel. This is an optional customization - the shipped extension chat uses the shared server API above.

Before adding it:

1. Check Chrome's browser and hardware requirements.
2. Detect LanguageModel and call LanguageModel.availability() with your model options.
3. Start LanguageModel.create() from a user action when a model download is required. Show download progress, then use prompt() or promptStreaming().
4. Keep the server-backed chat available when the API or model is unavailable, and destroy sessions when you finish using them.

Use an extension page such as the popup or side panel for the model session. The Prompt API is unavailable in Web Workers; do not assume it runs in the background service worker. Follow Chrome's session and context guidance when connecting other extension entrypoints.

For a complete extension example, see Chrome's Prompt API sample.