A browser API for choosing and running local AI models

THE RIGHT MODEL FOR THE TASK

Open an example to see the code. The model IDs are placeholders; replace them with the specific model IDs your app uses.

        01// Placeholder: replace with the ID of your chosen LLM.
02const model = '<llm-model-id>';
03
04button.addEventListener('click', async () => {
05  if (!('models' in navigator)) return showFallback();
06
07  try {
08    const { status } = await navigator.models.requestAccess(model);
09    if (status !== 'granted') return showFallback();
10
11    const result = await navigator.models.generate(model, {
12      messages: [
13        { role: 'system', content: 'Summarize the key points in three bullets.' },
14        { role: 'user', content: documentInput.value },
15      ],
16    });
17
18    if (result.finishReason !== 'stop') return showFallback();
19    output.textContent = result.data ?? '';
20  } catch {
21    showFallback();
22  }
23});
      

Here, documentInput is a text area containing the article or document. button, output, and showFallback() are supplied by your app. These examples are illustrative and do not execute on this page.

        01// Placeholder: a vision-capable model with structured output.
02const model = '<vision-model-id>';
03
04button.addEventListener('click', async () => {
05  if (!('models' in navigator)) return showFallback();
06  const image = imageInput.files?.[0];
07  if (!image) return showFallback();
08
09  try {
10    const { status } = await navigator.models.requestAccess(model);
11    if (status !== 'granted') return showFallback();
12
13    const result = await navigator.models.generate(model, {
14      messages: [{
15        role: 'user',
16        content: [
17          { type: 'text', text: 'Extract the merchant, date, and total.' },
18          { type: 'image', image },
19        ],
20      }],
21      output: {
22        schema: {
23          type: 'object',
24          properties: {
25            merchant: { type: 'string' },
26            date: { type: 'string' },
27            total: { type: 'number' },
28          },
29          required: ['merchant', 'date', 'total'],
30        },
31      },
32    });
33
34    if (result.finishReason !== 'stop') return showFallback();
35    output.textContent = JSON.stringify(result.data, null, 2);
36  } catch {
37    showFallback();
38  }
39});
      

Here, imageInput is a file input for a supported receipt image (up to 10 MiB). button, output, and showFallback() are supplied by your app. These examples are illustrative and do not execute on this page.

        01// Placeholder: replace with the ID of your chosen embedding model.
02const model = '<embedding-model-id>';
03
04button.addEventListener('click', async () => {
05  if (!('models' in navigator)) return showFallback();
06
07  try {
08    const { status } = await navigator.models.requestAccess(model);
09    if (status !== 'granted') return showFallback();
10
11    const index = await navigator.models.embed(model, notes);
12    const query = await navigator.models.embed(index.model, queryInput.value);
13    if (query.model !== index.model) return showFallback();
14
15    const matches = notes.map((text, i) => ({
16      text,
17      score: cosineSimilarity(query.vectors[0], index.vectors[i]),
18    })).sort((a, b) => b.score - a.score);
19
20    output.textContent = JSON.stringify(matches.slice(0, 5), null, 2);
21  } catch {
22    showFallback();
23  }
24});
      

Here, notes is a small, nonempty array of text strings and queryInput is the search field. Split larger collections into batches that fit the API’s limits. button, output, and showFallback() are supplied by your app. These examples are illustrative and do not execute on this page.