The useBrowserSupport hook queries the browser to check whether Chrome Built-in AI (window.ai / LanguageModel) is available natively. It identifies the client's browser, provides helpful error reasons if unsupported, and offers a recheck method to dynamically update support status without a full page reload.
npm install npx shadcn@latest add @paceui/native-ai-use-browser-supportHere is a basic example of checking browser AI support and displaying status badges or fallback alerts:
import { useBrowserSupport } from "@/hooks/native-ai/use-browser-support";export function SupportCheck() { const { isSupported, isLoading, detectedBrowser, errorReason, recheck } = useBrowserSupport(); if (isLoading) { return <div>Checking browser AI support...</div>; } return ( <div className="p-4 border rounded-md"> <p><strong>Browser:</strong> {detectedBrowser}</p> <p><strong>Status:</strong> {isSupported ? "Supported" : "Unsupported"}</p> {errorReason && <p className="text-red-500">{errorReason}</p>} <button onClick={recheck} className="mt-2 px-3 py-1 border rounded"> Re-check Support </button> </div> );}| Property | Type | Description |
|---|---|---|
isLoading | boolean | true while the hook is actively querying browser capabilities. |
isSupported | boolean | true if native Chrome Built-in AI (window.ai) is available on the client. |
isMobile | boolean | true if client is a mobile device (mobile devices are not supported yet). |
engine | "chrome-native" | null | The active AI engine type, or null if unsupported. |
errorReason | string | undefined | Descriptive reason explaining why local AI support is currently unavailable. |
detectedBrowser | BrowserType | Detected browser identifier ("chrome" | "firefox" | "edge" | "safari"). |
canEnable | boolean | true if the detected browser supports enabling native AI flags (e.g. Chrome). |
recheck | () => Promise<void> | Function to trigger a manual re-evaluation of browser AI support. |
export type BrowserType = "chrome" | "firefox" | "edge" | "safari";export type AIEngine = "chrome-native" | "polyfill-webllm";export const SUPPORTED_NATIVE_BROWSERS: BrowserType[] = ["chrome"];export function detectMobile(): boolean;export function detectBrowser(): BrowserType;