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;