Merge pull request #16 from CoolSpring8/built-in-ai

feat: integrate built-in AI provider support

Author: CoolSpring8

README.md

@@ -11,8 +11,9 @@ A tiny browser‑based chat UI packaged as a single static HTML file. It is inte
 ## Configure API
 
 1. Click the Settings icon in the header.
-2. Enter your OpenAI‑compatible base URL (e.g. `https://api.openai.com/v1`) and API key, then click "Save".
-3. Click "Sync from API" to fetch model list.
+2. Choose a provider:
+   - **OpenAI‑Compatible**: enter a base URL (e.g. `https://api.openai.com/v1`) and API key, then click "Save". Click "Sync from API" to fetch models.
+   - **Built-in AI (Chrome/Edge)**: no API key required. The app will check availability and, if needed, download the built-in model with progress feedback.
 
 ## Usage Tips
 

bun.lock

@@ -12,6 +12,7 @@
 		"@ai-sdk/openai-compatible": "^1.0.27",
 		"@ai-sdk/react": "^2.0.98",
 		"@base-ui-components/react": "^1.0.0-beta.4",
+		"@built-in-ai/core": "^2.0.1",
 		"@mantine/core": "^7.8.1",
 		"@mantine/hooks": "^7.8.1",
 		"@xyflow/react": "^12.9.1",

package.json

@@ -1,3 +1,4 @@
+import { builtInAI } from "@built-in-ai/core";
 import { Textarea, UnstyledButton } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { type ModelMessage, streamText } from "ai";
@@ -25,11 +26,17 @@ import SettingsModal from "./components/SettingsModal";
 import TextCompletionView from "./components/TextCompletionView";
 import type { ConversationSnapshot } from "./tree/types";
 import { useConversationTree } from "./tree/useConversationTree";
-import type { AppView, ModelInfo } from "./types";
+import type {
+	AppView,
+	BuiltInAvailability,
+	ModelInfo,
+	ProviderKind,
+} from "./types";
 
 const baseURLKey = "iaslate_baseURL";
 const apiKeyKey = "iaslate_apiKey";
 const modelsKey = "iaslate_models";
+const providerKindKey = "iaslate_provider_kind";
 
 const defaultSystemPrompt = "You are a helpful assistant.";
 
@@ -38,6 +45,10 @@ const App = () => {
 	const [apiKey, setAPIKey] = useState("");
 	const [models, setModels] = useImmer<ModelInfo[]>([]);
 	const [activeModel, setActiveModel] = useImmer<string | null>(null);
+	const [providerKind, setProviderKind] =
+		useState<ProviderKind>("openai-compatible");
+	const [builtInAvailability, setBuiltInAvailability] =
+		useState<BuiltInAvailability>("unknown");
 
 	const openAIProvider = useMemo(
 		() =>
@@ -48,16 +59,54 @@ const App = () => {
 		[apiKey, baseURL],
 	);
 
+	const builtInStatusText = useMemo(() => {
+		if (providerKind !== "built-in") {
+			return undefined;
+		}
+		switch (builtInAvailability) {
+			case "downloading":
+				return "Built-in AI downloading...";
+			case "available":
+				return "Built-in AI ready";
+			case "downloadable":
+				return "Download model in Settings";
+			case "unavailable":
+				return "Built-in AI unavailable";
+			default:
+				return "Built-in AI";
+		}
+	}, [builtInAvailability, providerKind]);
+
+	const getBuiltInChatModel = useCallback(() => {
+		// Return a fresh model so each send can create a new session with the latest system prompt.
+		return builtInAI();
+	}, []);
+
+	const refreshBuiltInAvailability = useCallback(async () => {
+		try {
+			const availability = await builtInAI().availability();
+			setBuiltInAvailability(availability as BuiltInAvailability);
+		} catch (error) {
+			console.error(error);
+			setBuiltInAvailability("unavailable");
+		}
+	}, []);
+
 	const syncModels = useCallback(
 		async ({
 			baseURLOverride,
 			apiKeyOverride,
 			silent = false,
+			force = false,
 		}: {
 			baseURLOverride?: string;
 			apiKeyOverride?: string;
 			silent?: boolean;
+			force?: boolean;
 		} = {}) => {
+			if (!force && providerKind !== "openai-compatible") {
+				return [];
+			}
 			const targetBaseURL = (baseURLOverride ?? baseURL).trim();
 			const targetAPIKey = apiKeyOverride ?? apiKey;
 
@@ -97,11 +146,15 @@ const App = () => {
 				return [];
 			}
 		},
-		[activeModel, apiKey, baseURL, setActiveModel, setModels],
+		[activeModel, apiKey, baseURL, providerKind, setActiveModel, setModels],
 	);
 
 	useEffect(() => {
 		(async () => {
+			const storedProvider = await get<ProviderKind>(providerKindKey);
+			if (storedProvider) {
+				setProviderKind(storedProvider);
+			}
 			const storedBaseURL = await get<string>(baseURLKey);
 			if (storedBaseURL) {
 				setBaseURL(storedBaseURL);
@@ -129,6 +182,16 @@ const App = () => {
 		})();
 	}, [setActiveModel, setModels, syncModels]);
 
+	useEffect(() => {
+		void refreshBuiltInAvailability();
+	}, [refreshBuiltInAvailability]);
+
+	useEffect(() => {
+		if (providerKind === "built-in") {
+			setActiveModel(null);
+		}
+	}, [providerKind, setActiveModel]);
+
 	const [isGenerating, setIsGenerating] = useState(false);
 	const [prompt, setPrompt] = useImmer("");
 	const [textContent, setTextContent] = useImmer("");
@@ -241,6 +304,12 @@ const App = () => {
 		};
 	}, [view]);
 
+	useEffect(() => {
+		if (view === "text" && providerKind === "built-in") {
+			toast.error("Built-in AI supports chat only");
+		}
+	}, [providerKind, view]);
+
 	const streamControllersRef = useRef<Record<string, AbortController>>({});
 	const latestAssistantIdRef = useRef<string | undefined>(undefined);
 	const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -377,6 +446,10 @@ const App = () => {
 		if (isTextGenerating) {
 			return;
 		}
+		if (providerKind !== "openai-compatible") {
+			toast.error("Built-in AI supports chat only");
+			return;
+		}
 		if (!activeModel) {
 			toast.error("Select a model before predicting");
 			return;
@@ -390,7 +463,7 @@ const App = () => {
 		setIsTextGenerating(true);
 		try {
 			const stream = streamText({
-				model: openAIProvider.completionModel(activeModel),
+				model: openAIProvider!.completionModel(activeModel!),
 				prompt: textContent,
 				temperature: 0.3,
 				abortSignal: abortController.signal,
@@ -426,14 +499,21 @@ const App = () => {
 	};
 
 	const handleSend = async () => {
-		if (!activeModel) {
-			toast.error("Select a model before sending");
-			return;
-		}
-		if (!openAIProvider) {
-			toast.error("Set an API base URL before sending");
+		const usingOpenAI = providerKind === "openai-compatible";
+		if (usingOpenAI) {
+			if (!activeModel) {
+				toast.error("Select a model before sending");
+				return;
+			}
+			if (!openAIProvider) {
+				toast.error("Set an API base URL before sending");
+				return;
+			}
+		} else if (builtInAvailability !== "available") {
+			toast.error("Download the built-in model in Settings before chatting");
 			return;
 		}
+		const builtInModel = usingOpenAI ? null : getBuiltInChatModel();
 		const trimmedPrompt = prompt.trim();
 		let resolvedParentId = activeTail() ?? activeTargetId;
 		if (!resolvedParentId) {
@@ -457,7 +537,9 @@ const App = () => {
 			}));
 		try {
 			const stream = streamText({
-				model: openAIProvider.chatModel(activeModel),
+				model: usingOpenAI
+					? openAIProvider!.chatModel(activeModel!)
+					: builtInModel!,
 				messages: contextMessages,
 				temperature: 0.3,
 				abortSignal: abortController.signal,
@@ -530,19 +612,28 @@ const App = () => {
 	const handleSettingsSave = async ({
 		baseURL: nextBaseURL,
 		apiKey: nextAPIKey,
+		providerKind: nextProviderKind,
 	}: {
 		baseURL: string;
 		apiKey: string;
+		providerKind: ProviderKind;
 	}) => {
+		setProviderKind(nextProviderKind);
+		await set(providerKindKey, nextProviderKind);
 		setBaseURL(nextBaseURL);
 		await set(baseURLKey, nextBaseURL);
 		setAPIKey(nextAPIKey);
 		await set(apiKeyKey, nextAPIKey);
-		await syncModels({
-			baseURLOverride: nextBaseURL,
-			apiKeyOverride: nextAPIKey,
-			silent: true,
-		});
+		if (nextProviderKind === "openai-compatible") {
+			await syncModels({
+				baseURLOverride: nextBaseURL,
+				apiKeyOverride: nextAPIKey,
+				silent: true,
+				force: true,
+			});
+		} else {
+			setActiveModel(null);
+		}
 		onSettingsClose();
 	};
 
@@ -560,6 +651,13 @@ const App = () => {
 				models={models}
 				activeModel={activeModel}
 				onModelChange={setActiveModel}
+				modelSelectorDisabled={providerKind !== "openai-compatible"}
+				modelPlaceholder={
+					providerKind === "openai-compatible"
+						? "Select a model"
+						: "Built-in AI (no model list)"
+				}
+				modelStatus={builtInStatusText}
 				view={view}
 				onViewChange={setView}
 				onClear={handleClearConversation}
@@ -685,6 +783,12 @@ const App = () => {
 				<TextCompletionView
 					value={textContent}
 					isGenerating={isTextGenerating}
+					isPredictDisabled={providerKind !== "openai-compatible"}
+					disabledReason={
+						providerKind !== "openai-compatible"
+							? "Built-in AI supports chat only"
+							: undefined
+					}
 					onChange={(value) => {
 						setTextContent(value);
 					}}
@@ -696,6 +800,9 @@ const App = () => {
 				open={isSettingsOpen}
 				baseURL={baseURL}
 				apiKey={apiKey}
+				providerKind={providerKind}
+				builtInAvailability={builtInAvailability}
+				onBuiltInAvailabilityChange={setBuiltInAvailability}
 				onClose={onSettingsClose}
 				onSave={handleSettingsSave}
 				onSyncModels={handleSyncModels}

src/App.tsx

@@ -5,6 +5,9 @@ interface HeaderProps {
 	models: ModelInfo[];
 	activeModel: string | null;
 	onModelChange: (value: string | null) => void;
+	modelSelectorDisabled?: boolean;
+	modelPlaceholder?: string;
+	modelStatus?: string;
 	view: AppView;
 	onViewChange: (value: AppView) => void;
 	onClear: () => void;
@@ -27,6 +30,9 @@ const Header = ({
 	models,
 	activeModel,
 	onModelChange,
+	modelSelectorDisabled = false,
+	modelPlaceholder,
+	modelStatus,
 	view,
 	onViewChange,
 	onClear,
@@ -37,17 +43,24 @@ const Header = ({
 	<div className="flex items-center px-4 py-2">
 		<div className="flex items-center gap-2">
 			<h1 className="text-xl font-bold font-mono">iaslate</h1>
-			<Select
-				className="w-64"
-				data={models.map((model) => ({
-					value: model.id,
-					label: model.name || model.id,
-				}))}
-				value={activeModel}
-				onChange={onModelChange}
-				placeholder="Select a model"
-				aria-label="Select a model"
-			/>
+			{modelSelectorDisabled ? (
+				<div className="flex h-[2.25rem] w-64 items-center rounded-md border border-solid border-slate-300 bg-white px-3 text-sm leading-[1.1] text-slate-900 shadow-xs dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
+					{modelStatus ?? "Model selection disabled"}
+				</div>
+			) : (
+				<Select
+					className="w-64"
+					data={models.map((model) => ({
+						value: model.id,
+						label: model.name || model.id,
+					}))}
+					value={activeModel}
+					onChange={onModelChange}
+					placeholder={modelPlaceholder ?? "Select a model"}
+					disabled={modelSelectorDisabled}
+					aria-label="Select a model"
+				/>
+			)}
 		</div>
 		<div className="ml-4">
 			<SegmentedControl