Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Chrome's built-in Prompt API implementation guide. Use Gemini Nano locally in browser for AI features - session management, multimodal input, structured output, streaming, Chrome Extensions. Reference for all Prompt API development.
.claude/skills/aiskillstore-web-ai-prompt-api/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 105% | 0% |
| case-02 | ✗→✓ | ▲ Improved | 38% | 0% |
| case-03 | ✗→✓ | ▲ Improved | 35% | 0% |
| case-16 | ✗→✓ | ▲ Improved | 80% | 0% |
| case-07 | ✗→✓ | ▲ Improved | 86% | 0% |
Complete implementation guide for Chrome's built-in Prompt API using Gemini Nano.
OS: Windows 10/11, macOS 13+ (Ventura+), Linux, ChromeOS (Platform 16389.0.0+) on Chromebook Plus Storage: 22 GB free (model downloaded separately) GPU: >4 GB VRAM OR CPU: 16 GB RAM + 4 cores Network: Unmetered connection for download Chrome: 138+ (Extensions in stable, Web in origin trial)
Not supported: Mobile (Android, iOS), non-Chromebook Plus ChromeOS
Check model size: chrome://on-device-internals Model removed if storage <10 GB after download.
From Chrome 140: English, Spanish, Japanese (input/output)
javascriptconst availability = await LanguageModel.availability(); // Returns: "unavailable" | "downloadable" | "downloading" | "available"
CRITICAL: Always pass same options to availability() as you use in create(). Some models don't support certain modalities/languages.
javascriptawait LanguageModel.params(); // { defaultTopK: 3, maxTopK: 128, defaultTemperature: 1, maxTemperature: 2 }
javascriptconst session = await LanguageModel.create();
javascriptconst params = await LanguageModel.params(); const session = await LanguageModel.create({ temperature: Math.min(params.defaultTemperature * 1.2, 2.0), topK: params.defaultTopK });
javascriptconst session = await LanguageModel.create({ monitor(m) { m.addEventListener('downloadprogress', (e) => { console.log(`Downloaded ${e.loaded * 100}%`); }); } });
javascriptconst controller = new AbortController(); stopButton.onclick = () => controller.abort(); const session = await LanguageModel.create({ signal: controller.signal });
javascriptconst session = await LanguageModel.create({ initialPrompts: [ { role: 'system', content: 'You are a helpful assistant.' }, { role: 'user', content: 'What is the capital of Italy?' }, { role: 'assistant', content: 'The capital of Italy is Rome.' }, { role: 'user', content: 'What language is spoken there?' }, { role: 'assistant', content: 'The official language is Italian.' } ] });
Use cases:
javascriptconst session = await LanguageModel.create({ expectedInputs: [ { type: "text", // or "image", "audio" languages: ["en" /* system */, "ja" /* user prompt */] } ], expectedOutputs: [ { type: "text", languages: ["ja"] } ] });
Input types: text, image, audio Output types: text only
Throws NotSupportedError if unsupported modality.
javascriptconst session = await LanguageModel.create({ initialPrompts: [{ role: 'system', content: 'Analyze images for patterns.' }], expectedInputs: [{ type: 'image' }] }); // Append image await session.append([{ role: 'user', content: [ { type: 'text', value: 'Analyze this image' }, { type: 'image', value: fileInput.files[0] } ] }]);
javascriptconst result = await session.prompt('Write me a haiku!'); console.log(result);
javascriptconst stream = session.promptStreaming('Write me a long poem!'); for await (const chunk of stream) { console.log(chunk); // Partial results as they arrive }
javascriptconst controller = new AbortController(); stopButton.onclick = () => controller.abort(); const result = await session.prompt('Write a poem', { signal: controller.signal });
Pass JSON Schema to get predictable JSON responses:
javascriptconst schema = { type: "object", properties: { hashtags: { type: "array", maxItems: 3, items: { type: "string", pattern: "^#[^\\s#]+$" } } }, required: ["hashtags"], additionalProperties: false }; const result = await session.prompt( `Generate hashtags for: ${post}`, { responseConstraint: schema } ); const data = JSON.parse(result); // Guaranteed valid JSON
Simple boolean example:
javascriptconst schema = { "type": "boolean" }; const result = await session.prompt( `Is this about pottery?\n\n${text}`, { responseConstraint: schema } ); console.log(JSON.parse(result)); // true or false
Measure input quota usage:
javascriptconst usage = session.measureInputUsage({ responseConstraint: schema });
Omit schema from input quota:
javascriptconst result = await session.prompt( `Summarize as JSON { rating } with 0-5 number:`, { responseConstraint: schema, omitResponseConstraintInput: true } );
Guide model output format by prefilling assistant response:
javascriptconst result = await session.prompt([ { role: 'user', content: 'Create a TOML character sheet' }, { role: 'assistant', content: '```toml\n', prefix: true } ]); // Model continues from "```toml\n"
Add messages to session without immediate response (useful for multimodal):
javascriptawait session.append([ { role: 'user', content: [ { type: 'text', value: 'First context message' }, { type: 'image', value: imageFile } ] } ]); // Later, prompt with accumulated context const result = await session.prompt('Analyze the images');
Promise fulfills when validated and appended.
javascriptconsole.log(`${session.inputUsage}/${session.inputQuota}`); const remaining = session.inputQuota - session.inputUsage;
When quota exceeded, oldest messages lost from context.
Clones inherit parameters, initial prompts, and history:
javascriptconst mainSession = await LanguageModel.create({ initialPrompts: [{ role: 'system', content: 'Speak like a pirate' }] }); const clone1 = await mainSession.clone(); const clone2 = await mainSession.clone({ signal: controller.signal }); // Independent conversations with same setup await clone1.prompt('Tell me a joke about parrots'); await clone2.prompt('Tell me a joke about treasure');
Use for: Parallel conversations, "what if" scenarios, resource efficiency
javascriptlet sessionData = getFromLocalStorage(uuid) || { initialPrompts: [], topK: (await LanguageModel.params()).defaultTopK, temperature: (await LanguageModel.params()).defaultTemperature }; const session = await LanguageModel.create(sessionData); // Track conversation const stream = session.promptStreaming(prompt); let result = ''; for await (const chunk of stream) { result = chunk; } sessionData.initialPrompts.push( { role: 'user', content: prompt }, { role: 'assistant', content: result } ); localStorage.setItem(uuid, JSON.stringify(sessionData));
javascriptsession.destroy(); // Frees resources, aborts ongoing execution // Session unusable after destroy
Best practice: Keep one empty session alive to keep model loaded. Destroy only when truly done.
Model download requires user interaction:
javascriptif (navigator.userActivation.isActive) { const session = await LanguageModel.create(); }
Sticky activation events: click, tap, keydown, mousedown
Default: Top-level windows + same-origin iframes only
Grant cross-origin iframe access:
html<iframe src="https://cross-origin.example.com/" allow="language-model"> </iframe>
Not available in Web Workers (permission policy complexity)
chrome://flags/#prompt-api-for-gemini-nano-multimodal-inputawait LanguageModel.availability();"available"Troubleshoot:
chrome://on-device-internals → Model Status tabAvailable in Chrome 138+ stable for extensions.
Remove expired origin trial permissions:
json{ "permissions": ["aiLanguageModelOriginTrial"] // REMOVE THIS }
Register for current origin trial if needed.
Session management:
Performance:
Structured output:
Context preservation:
javascripttry { const session = await LanguageModel.create(); const result = await session.prompt('Hello'); } catch (err) { if (err.name === 'AbortError') { // User stopped generation } else if (err.name === 'NotSupportedError') { // Unsupported modality/language } else { console.error(err.name, err.message); } }
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 11,821 | 9,436 | -20% | 1 | 1 | 0% | 2,322 | 4,760 | +105% | 0 | 0 | — |
case-02 | fail→pass | 17,849 | 9,339 | -48% | 1 | 1 | 0% | 3,458 | 4,771 | +38% | 0 | 0 | — |
case-03 | fail→pass | 18,295 | 13,365 | -27% | 1 | 1 | 0% | 3,860 | 5,226 | +35% | 0 | 0 | — |
case-16 | fail→pass | 11,715 | 4,211 | -64% | 1 | 1 | 0% | 1,929 | 3,465 | +80% | 0 | 0 | — |
case-04 | pass→pass | 13,302 | 10,989 | -17% | 1 | 1 | 0% | 2,426 | 4,951 | +104% | 0 | 0 | — |
case-05 | pass→pass | 9,789 | 8,685 | -11% | 1 | 1 | 0% | 2,096 | 4,601 | +120% | 0 | 0 | — |
case-06 | pass→pass | 8,374 | 5,776 | -31% | 1 | 1 | 0% | 1,526 | 3,671 | +141% | 0 | 0 | — |
case-07 | fail→pass | 10,492 | 2,892 | -72% | 1 | 1 | 0% | 1,702 | 3,164 | +86% | 0 | 0 | — |
case-08 | fail→pass | 4,343 | 2,382 | -45% | 1 | 1 | 0% | 751 | 2,926 | +290% | 0 | 0 | — |
case-09 | pass→pass | 5,275 | 3,266 | -38% | 1 | 1 | 0% | 862 | 3,246 | +277% | 0 | 0 | — |
case-10 | fail→pass | 9,704 | 3,175 | -67% | 1 | 1 | 0% | 1,877 | 3,310 | +76% | 0 | 0 | — |
case-11 | pass→pass | 8,121 | 5,855 | -28% | 1 | 1 | 0% | 1,548 | 3,759 | +143% | 0 | 0 | — |
case-17 | fail→pass | 14,976 | 3,847 | -74% | 1 | 1 | 0% | 2,460 | 3,416 | +39% | 0 | 0 | — |
case-12 | pass→pass | 10,041 | 3,643 | -64% | 1 | 1 | 0% | 1,939 | 3,333 | +72% | 0 | 0 | — |
case-13 | pass→pass | 4,544 | 2,228 | -51% | 1 | 1 | 0% | 824 | 3,045 | +270% | 0 | 0 | — |
case-14 | fail→pass | 10,123 | 4,996 | -51% | 1 | 1 | 0% | 1,703 | 3,665 | +115% | 0 | 0 | — |
case-15 | pass→pass | 7,778 | 2,653 | -66% | 1 | 1 | 0% | 1,374 | 3,160 | +130% | 0 | 0 | — |
case-18 | fail→pass | 13,410 | 9,143 | -32% | 1 | 1 | 0% | 2,580 | 4,475 | +73% | 0 | 0 | — |
case-19 | fail→pass | 12,633 | 4,764 | -62% | 1 | 1 | 0% | 2,119 | 3,537 | +67% | 0 | 0 | — |
case-20 | fail→pass | 8,932 | 3,211 | -64% | 1 | 1 | 0% | 1,642 | 3,272 | +99% | 0 | 0 | — |
case-21 | fail→pass | 11,197 | 2,375 | -79% | 1 | 1 | 0% | 1,812 | 3,098 | +71% | 0 | 0 | — |
case-22 | fail→pass | 8,004 | 2,453 | -69% | 1 | 1 | 0% | 1,270 | 3,108 | +145% | 0 | 0 | — |
case-23 | pass→pass | 13,052 | 1,796 | -86% | 1 | 1 | 0% | 2,321 | 3,023 | +30% | 0 | 0 | — |
case-24 | fail→pass | 5,954 | 1,730 | -71% | 1 | 1 | 0% | 1,050 | 2,968 | +183% | 0 | 0 | — |
case-25 | fail→fail | 9,170 | 1,896 | -79% | 1 | 1 | 0% | 1,572 | 3,034 | +93% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 25 cases were attempted. The headline lift of +60 percentage points is the difference between those two pass rates over the 25 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.