skills.rest
GoogleChromeLabs
GoogleChromeLabsOFFICIAL
Explore all skills by this author →
GitHub

built-in-ai

Teaches AI agents modern Chrome Built-in AI APIs, deprecations, polyfills, and Web IDLs.

388|90|Updated Jun 7, 2024
Search Tags:#streaming#polyfill#on-device ai#gemini nano#prompt api#chrome built-in ai#web idl
One-click install
npx skills add https://github.com/GoogleChromeLabs/web-ai-demos --skill built-in-ai-googlechromelabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: built-in-ai
Source: https://github.com/GoogleChromeLabs/web-ai-demos/tree/main/built-in-ai-skills-md-agent-md
Command: npx skills add https://github.com/GoogleChromeLabs/web-ai-demos --skill built-in-ai-googlechromelabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? AI coding assistants often have outdated knowledge of Chrome Built-in AI APIs, suggesting deprecated patterns like window.ai.* and capabilities(). This Skill injects the latest API conventions, Web IDLs, and best practices so generated code uses current top-level APIs like window.LanguageModel and availability(). ## Core Features & Use Cases - Deprecation Corrections: Replaces deprecated window.ai.* namespaces and capabilities() with top-level APIs (LanguageModel, Summarizer, Writer, Rewriter, Translator, LanguageDetector) and availability() checks. - Latest Web IDLs: Embeds authoritative IDL definitions for the Prompt, Translation, and Writing Assistance APIs, refreshed from official webmachinelearning specifications via an update script. - Implementation Guidance: Covers model download progress monitoring, multimodal sessions (text, image, audio), streaming with ReadableStream, structured output via responseConstraint, polyfills, and TypeScript types. - Use Case: A developer asks their AI agent to add on-device summarization to a web app; the agent correctly checks Summarizer.availability(), handles the downloadable state with a progress monitor, and streams sanitized output. ## Quick Start Ask your AI agent to implement a feature using the Chrome Built-in Prompt API with availability checking and download progress handling.

Frequently Asked Questions about built-in-ai

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use the Chrome Built-in Prompt API in a web app?▼

Create a session with window.LanguageModel.create() after checking LanguageModel.availability(). Use prompt() or promptStreaming() for responses, and pass identical options to both availability() and create() to avoid mismatches.

What replaced window.ai and capabilities() in Chrome Built-in AI?▼

The window.ai namespace is deprecated in favor of top-level objects like window.LanguageModel, window.Summarizer, and window.Translator. The capabilities() method is replaced by availability(), which returns unavailable, downloadable, downloading, or available.

How do I show model download progress for Chrome Built-in AI?▼

Pass a monitor callback to create() and listen for the downloadprogress event, which reports loaded and total bytes. You can bind these values to a progress element so users see download status when availability returns downloadable or downloading.

Does the Prompt API support image and audio input?▼

Yes, the Prompt API supports multimodal input. Declare expectedInputs with types text, image, or audio when creating the session, then pass content items such as Blob, AudioBuffer, HTMLCanvasElement, or ImageBitmap in prompt messages.

Can I use Chrome Built-in AI APIs in other browsers?▼

Yes, via polyfills. The prompt-api-polyfill and built-in-ai-task-apis-polyfills npm packages provide compatibility where the native APIs are unsupported, and @types/dom-chromium-ai supplies TypeScript definitions.

Why should LLM output be sanitized before rendering in the DOM?▼

LLM output should be treated as untrusted user-generated content. Sanitize it with DOMPurify before insertion; if DOMPurify.removed.length is greater than zero, stop rendering because the output may contain an injection attack.

Related Skills

Explore More Software Engineering Skills→
korchasakorchasa
3

flow-setup-agent-code-style-ts-strict

Inject TypeScript strict mode code style rules into AGENTS.md files.

Community
Basic
AradotsoAradotso
4

privatelm-cross-platform-llm-client

Build a cross-platform Flutter LLM client with local GGUF inference and cloud fallback.

Official
Advanced
baselakkad585-makerbaselakkad585-maker

frontend-security-coder

Guide secure frontend coding for XSS prevention and CSP implementation.

Community
Advanced
paolomozpaolomoz
3

sse-streaming

Stream Server-Sent Events from Cloudflare Workers to browser clients.

Community
Advanced