Build with private,
on-device AI.

Installation

Install your framework package.

Choose one package for your app. Vue, React, Svelte, and Angular include components and APIs for a custom UI. Nuxt sets up the Vue integration for you. Use the TypeScript core when you do not need a UI framework.

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

Add a complete chat interface.

Import the stylesheet once, then render a component. The Prompt API interface includes saved chats, streaming Markdown, attachments supported by Chrome, stop controls, download progress, 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>

Build a custom interface

Composables give your own UI reactive availability, progress, results, and errors. Call the model from a button handler; the composable releases its sessions when the component unmounts.

<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

Add the module. Use the components.

The module registers components on the client, includes their styles, and auto-imports composables, helpers, and types. Model operations stay in the browser while the rest of your app can render on the server.

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

<template>
  <PromptApi />
</template>

Every framework package

Use your framework's state and lifecycle.

Start with the same chat component in React, Svelte, or Angular. For a custom UI, use React hooks, Svelte stores, or Angular signals and services. The core controller works in plain TypeScript.

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";
import "@desource/browser-ai-angular/assets/lib.css";

@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

Prepare the browser for its first request.

Chrome may need to download a model or language pack before it can answer. Components handle the states below. In a custom interface, check availability with the languages and options your feature will use.

If an API is unavailable, check its Chrome requirements, supported languages, and any local testing flags. Browser setup and troubleshooting →

Work with long text.

The text components and optional workflows handle input that exceeds one model request. Summarizer combines summaries from measured chunks, Translator keeps translated chunks in order, and Proofreader maps corrections back to the original text. You can show progress and stop long work.

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.

The AI examples run real models on your device. They show an unavailable state when an API cannot run and never switch to a hosted model.

WebMCP

Expose application tools to browser agents.

Let compatible browser agents use actions your app already offers: search a catalog, read a cart total, or submit a form. Register a typed tool or annotate an existing HTML form. Its result updates the same state your users see.

<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

AI processing stays on the device.

Chrome's built-in models process prompts and generate responses locally. Browser AI Kit does not send that content or telemetry to DeSource Labs. Chrome manages model downloads and updates; once the resources are installed, model processing can work offline.

Saved chat text stays in the browser's IndexedDB. Image and audio attachments stay in memory for the current conversation controller and need to be reattached after a reload.

WebMCP connects agents to your application tools; the agent and tool code determine where tool data goes. If your app offers a cloud model when local AI is unavailable, explain that prompts will leave the device and let the user choose it. The kit does not provide an automatic cloud fallback.

Frequently asked questions

Before you ship.