用 Vercel AI SDK 玩轉 Chrome Built-in AI
Google 官方關於 Chrome Built-in AI 與 Vercel AI SDK 的文件寫了一大堆，但看完會發現官方範例只教你怎麼印出 Hello World，好多坑都沒有交代。 如果模型還沒下載完該怎麼辦？瀏覽器不支援時怎麼辦？Tool Calling 的介面要怎麼安全的接上？ 附上在 Chrome上的一些踩坑小筆記，幫你想在前端加上本地 LLM 時少走彎路（雖然彎路的都記得比較久ＸＤ）！ 官方範例 Google 官方有兩篇基礎教學，繁體中文版都寫得清楚： Prompt API 搭配 Vercel AI SDK 使用 AI Elements 打造 UI（含 demo） 看完你大概可以了解，可以用 browserAI() 把 model 丟進 generateText 、 streamText 、 Output.object ，大概 30…
The Google documentation on Chrome Built-in AI and Vercel AI SDK provides extensive information, but the official examples only cover how to print "Hello World." Many potential issues are not explained. What should be done if the model hasn't finished downloading yet? How does the browser behave when it's not supported? What is the safe interface for tool calling?
The article provides some notes on common pitfalls when adding local LLM to the frontend on Chrome, helping to avoid unnecessary detours. Google has two basic tutorials, both written in Chinese, which are very clear: Prompt API with Vercel AI SDK for building UI with AI Elements (including demo) and @browser-ai/core, which supports AI SDK v5-7 and works with three local engines (Prompt API, Transformers.js, WebLLM).
This is currently the main provider for "browser local inference." Jakob Hoeg Mørk, the author, began maintaining the project in 2025, and it is currently under Vercel OSS Program. The article walks through the process of generating text using generateText with a specified model and prompt, as well as handling situations where the model hasn't finished downloading yet, and browser support.
It also covers the use of createSessionWithProgress to display download progress, which is crucial for front-end developers to inform users about the waiting time for large downloads. The article also explores advanced topics such as custom ChatTransport for client-side chat flow, tool calling with webSearch and getCurrentTime tools, and tool approval UI to confirm external API usage, which can be useful for security-sensitive industries like healthcare and finance.
Additionally, it presents a real-world example of domainstack.io, which integrates AI into a domain name lookup tool, demonstrating the architecture for fallback modes (local, cloud, auto) and agentic workflows using local LLMs. The article concludes by recommending a step-by-step approach to quickly test Chrome Built-in AI, learn a complete architecture using next-hybrid, and implement production-ready strategies like Domainstack.io's automatic fallback and tool calling design.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
