Build the local AI feature
users expect.

Installation

Choose the framework boundary.

Six packages expose one runtime behavior contract. Each adapter maps it to native framework lifecycle and state primitives; Nuxt adds client-safe auto-imports around Vue.

npm install @desource/browser-ai

npm install @desource/browser-ai-vue

npm install @desource/browser-ai-nuxt

npm install @desource/browser-ai-react

npm install @desource/browser-ai-svelte

npm install @desource/browser-ai-angular

Vue quick start

Use the full interface.

Import the stylesheet once, then render a component. The Prompt API interface includes saved chats, streaming, attachments supported by Chrome, stop controls, download UX, and context recovery.

<script setup lang="ts">
import { PromptApi } from "@desource/browser-ai-vue";
import "@desource/browser-ai-vue/assets/lib.css";
</script>

<template>
  <PromptApi
    context-strategy="summarize"
    context-summary-mode="cache-first"
  />
</template>

Or own every pixel.

Composables expose reactive state and direct operations. A native session lives in a shallow ref, avoiding expensive traversal while the rest of your UI updates.

<script setup lang="ts">
import { ref } from "vue";
import { usePromptApi } from "@desource/browser-ai-vue";

const ai = usePromptApi(); // Disposed with this component's effect scope.
const answer = ref("");
async function ask() {
  await ai.init({
    expectedInputs: [{ type: "text", languages: ["en"] }],
    expectedOutputs: [{ type: "text", languages: ["en"] }],
  });
  await ai.create(); // User action permits a required model download.
  answer.value = await ai.prompt("Explain local AI.");
}
</script>

<template>
  <button @click="ask">Explain local AI</button>
  <p>{{ answer }}</p>
</template>

Nuxt quick start

One module, no browser globals on the server.

Components are registered in client mode. Composables, helpers, language options, and public types are auto-imported.

export default defineNuxtConfig({
  modules: ["@desource/browser-ai-nuxt"],
  browserAi: {
    css: true,
    component: true,
    helpers: true,
  },
});

Every framework package

Keep the browser behavior. Choose the state model.

React uses hooks backed by useSyncExternalStore. Svelte exposes readable stores and controller factories. Angular provides signal controllers, standalone components, and BrowserAiService. The core package works in vanilla TypeScript and is the only place browser lifecycle logic is implemented.

import { PromptApi } from "@desource/browser-ai-react";
import "@desource/browser-ai-react/assets/lib.css";

export function Assistant() {
  return <PromptApi allowAttachments />;
}

<script lang="ts">
  import { PromptApi } from "@desource/browser-ai-svelte";
  import "@desource/browser-ai-svelte/assets/lib.css";
</script>

<PromptApi allowAttachments />

import { Component } from "@angular/core";
import { BrowserAiPromptApiComponent } from "@desource/browser-ai-angular";

@Component({
  selector: "app-assistant",
  standalone: true,
  imports: [BrowserAiPromptApiComponent],
  template: '<browser-ai-prompt-api />',
})
export class AssistantComponent {}

import { createPromptApi } from "@desource/browser-ai";

// Call from a button handler when a model download may be needed.
async function ask() {
  const prompt = createPromptApi();
  try {
    return await prompt.prompt("Explain local AI in one sentence.");
  } finally {
    prompt.dispose();
  }
}

Browser lifecycle

Availability is part of the interface.

Chrome decides whether a capability is ready, needs local resources, is already downloading, or is unavailable on the current profile. Check again when the feature starts; model state can change.

Long work stays measurable and cancellable.

Specialized composables measure the browser's real quota and apply a strategy that fits the task: recursive summary rollups, ordered translation chunks, optional-context fitting, confidence merging, or normalized proofreader ranges.

const summarizer = useSummarizer();

const result = await summarizer.summarizeWithDetails(article, {
  createOptions: {
    type: "key-points",
    format: "markdown",
    length: "medium",
  },
  context: "Focus on decisions, owners, and unresolved risks.",
});

API directory

Start from the outcome you need.

Every example calls the native API in this browser profile. No demo response is mocked and no hosted model is used as a fallback.

WebMCP

Make your application legible to browser agents.

Register imperative tools, annotate existing forms, discover tools, execute them manually during development, and observe lifecycle changes through one composable.

<script setup lang="ts">
import { onMounted } from "vue";
import { useWebMcp } from "@desource/browser-ai-vue";

const props = defineProps<{ total: number; currency: string }>();
const webMcp = useWebMcp(); // Unregisters tools with the component scope.
onMounted(async () => {
  await webMcp.registerTool({
    name: "get_cart_total",
    description: "Return the displayed cart total without changing it.",
    inputSchema: { type: "object", properties: {}, additionalProperties: false },
    annotations: { readOnlyHint: true },
    execute: async () => ({ total: props.total, currency: props.currency }),
  });
});
</script>

Production headers

Origin-Agent-Cluster: ?1
Permissions-Policy: tools=(self)

WebMCP is experimental and currently requires Chrome's testing flag or origin-trial availability. Read the complete security and deployment guide →

Privacy and fallback

Be precise about where data goes.

Browser AI Kit does not send prompts, outputs, or telemetry to DeSource Labs. Built-in model execution remains inside Chrome, which owns the model files and resource lifecycle.

Your own application code, extensions, monitoring software, and WebMCP tools can still transmit information. Audit those paths and never put secrets in client-side prompts or tool descriptions.

If local AI is unavailable, keep the manual workflow, explain how to retry, or offer a hosted model only after disclosing that content will leave the device. Do not silently cross that privacy boundary.

Frequently asked questions

Before you ship.