Gebruik de ingebouwde Prompt API met de Vercel AI SDK.

Thomas Steiner

Gepubliceerd: 16 juli 2026

De Vercel AI SDK is een provider-onafhankelijke TypeScript-toolkit die is ontworpen om je te helpen bij het bouwen van AI-gestuurde applicaties en agents met behulp van populaire UI-frameworks zoals Next.js, React, Svelte, Vue, Angular en runtimes zoals Node.js. Hoewel de meeste providers cloudgebaseerd zijn, richt deze eerste handleiding van een tweedelige serie zich op een communityprovider genaamd Browser AI, ontwikkeld door Jakob Hoeg Mørk (die financiering ontving van Google ). Browser AI stelt je in staat om de Prompt API te gebruiken met de AI SDK van Vercel. In het tweede deel van de serie wordt uitgelegd hoe je een grafische gebruikersinterface aan je AI-applicatie kunt toevoegen.

Installeer de bibliotheek

Het pakket @browser-ai/core is de AI SDK-provider voor de Prompt API. Je kunt het installeren met npm. De onderliggende Vercel AI SDK wordt automatisch door het pakket geïnstalleerd als een peer dependency.

npm install @browser-ai/core

Basisgebruik

Om de provider te gebruiken:

1. Importeer de browserAI constructor uit het pakket @browser-ai/core .
2. Importeer de functies generateText() of streamText() uit de Vercel AI SDK. Beide functies genereren tekst en roepen tools aan voor een gegeven prompt met behulp van een taalmodel:

• De functie generateText() is niet-streaming en ideaal voor korte uitvoer of voor uitvoer waarbij u pas verder kunt gaan nadat de volledige uitvoer is ontvangen.
• De functie streamText() streamt tekstgeneraties vanuit een taalmodel. Je kunt deze functie gebruiken voor interactieve toepassingen zoals chatbots en andere realtime-applicaties.

Om een ​​modelinstantie te creëren:

1. Roep browserAI() aan. Opmerking: Het is raadzaam om altijd de availability() van het model te controleren. Hiermee kunt u een fallback gebruiken (zie Hybride gebruik ) wanneer het model 'unavailable' is, of een voortgangsupdate weergeven wanneer het model 'downloadable' of 'downloading' is.

2. Je kunt vervolgens generateText() of streamText() aanroepen. Raadpleeg de Vercel AI SDK-documentatie voor de volledige lijst met parameters. In plaats van bijvoorbeeld direct een prompt door te geven zoals in het volgende codevoorbeeld, kun je ook een complexer messages doorgeven voor prompts die meerdere keren achter elkaar worden weergegeven, of een system .

import { browserAI } from '@browser-ai/core';
import { generateText, streamText } from 'ai';

(async () => {
  const model = browserAI();
  const availability = await model.availability();

  if (availability === 'unavailable') {
    console.log('Your browser cannot run the built-in AI model.');
    return;
  }

  if (availability === 'downloadable' || availability === 'downloading') {
    await model.createSessionWithProgress((progress) => {
      console.log(`Download progress: ${Math.round(progress * 100)}%`);
    });
  }

  // Non-streaming text generation.
  const { text } = await generateText({
    model,
    prompt: 'Tell me a short joke',
  });
  console.log(text);

  // Streaming text generation.
  const result = streamText({
    model,
    prompt: 'Tell me a long joke',
  });

  for await (const chunk of result.textStream) {
    console.log(chunk);
  }
})();

Multimodaal gebruik

Het pakket @browser-ai/core ondersteunt multimodale invoer door gebruik te maken van een object type: 'file' in de inhoudsobjecten van de messages .

content ( type: 'file' )

type

'file'

data

string | Uint8Array | Buffer | ArrayBuffer | URL

Als data een string zijn, moeten ze aan een van de volgende voorwaarden voldoen:

Zie het volgende codefragment voor een voorbeeld:

import { streamText } from 'ai';
import { browserAI } from '@browser-ai/core';

const base64ImageData = await getBase64ImageData();
const audioData = await getAudioBuffer();

const result = streamText({
  model: browserAI(),
  messages: [
    {
      role: 'user',
      content: [
        { type: 'text', text: "What's in this image?" },
        { type: 'file', mediaType: 'image/png', data: base64ImageData },
      ],
    },
    {
      role: 'user',
      content: [
        { type: 'text', text: 'Transcribe this audio file!' },
        { type: 'file', mediaType: 'audio/mp3', data: audioData },
      ],
    },
  ],
});

for await (const chunk of result.textStream) {
  console.log(chunk);
}

Gestructureerde uitvoer

De Vercel AI SDK ondersteunt gestructureerde uitvoer via zod , een op TypeScript gebaseerde schemavalidatie met statische type-inferentie. Raadpleeg de documentatie over het definiëren van schema's in zod voor meer informatie.

Om een ​​JSON-object op te vragen dat aan uw schema voldoet, geeft u output: Output.object({ schema }) door aan generateText() of streamText() :

• generateText() met Output.object() retourneert het uiteindelijke JSON-object in het output zodra de generatie is voltooid.
• streamText() met Output.object() levert een asynchrone iterable partialOutputStream op, waarbij elk tussenresultaat gegarandeerd correct als JSON kan worden geparseerd. Als uw schema bijvoorbeeld een array van twee getallen vereist, ontvangt u [] als het eerste tussenresultaat, [123] als het tweede en [123, 456] als het uiteindelijke resultaat.

import { browserAI } from '@browser-ai/core';
import { generateText, streamText, Output } from 'ai';
import z from 'zod';

const model = browserAI();

const schema = z.object({
  recipe: z.object({
    name: z.string(),
    ingredients: z.array(z.object({ name: z.string(), amount: z.string() })),
    steps: z.array(z.string()),
  }),
});

const prompt = 'Generate a lasagna recipe.';

// Non-streaming object generation.
const { output } = await generateText({
  model,
  output: Output.object({ schema }),
  prompt,
});

console.log(output);

// Streaming object generation.
const { partialOutputStream } = streamText({
  model,
  output: Output.object({ schema }),
  prompt,
});

for await (const partialObject of partialOutputStream) {
  console.log(partialObject);
}

Hybride gebruik

De AI SDK van Vercel blinkt vooral uit in hybride gebruik. Het biedt een abstractielaag op een hoger niveau bovenop de implementaties op een lager niveau van de onderliggende providers. Wanneer je de Prompt API als provider gebruikt, maak je een model aan door de browserAI constructor aan te roepen.

import { browserAI } from '@browser-ai/core';

const model = browserAI();

Om een ​​andere aanbieder te gebruiken, bijvoorbeeld de Google Generative AI-aanbieder , moet u het volgende doen:

1. Installeer de geselecteerde provider.

   npm install @ai-sdk/google
   

2. Maak een instantie van het model met behulp van de constructor van de provider. Bij cloudproviders zoals Google Generative AI moet je hiervoor meestal een API-sleutel doorgeven. In het geval van Google Generative AI kun je ook een cloudmodel-ID doorgeven, bijvoorbeeld 'gemini-2.5-flash' . De rest van de code, zoals je aanroepen naar streamText() , blijft ongewijzigd.

   import { createGoogleGenerativeAI } from '@ai-sdk/google';
   
   const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';
   
   const google = createGoogleGenerativeAI({ apiKey: API_KEY });
   const model = google('gemini-2.5-flash');
   

Terugval naar de cloud

Een klassiek hybride gebruiksscenario is het gebruik van de Prompt API wanneer deze beschikbaar is en het terugvallen op een cloudprovider in andere gevallen. Om te controleren of de Prompt API beschikbaar is, biedt het pakket @browser-ai/core de functie doesBrowserSupportBuiltInAI() . U kunt deze functie gebruiken om het model dynamisch te instantiëren als een cloudgebaseerd model of als een ingebouwd model.

import { doesBrowserSupportBuiltInAI } from '@browser-ai/core';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

const model = await (async () => {
  if (doesBrowserSupportBuiltInAI()) {
    const { browserAI } = await import('@browser-ai/core');
    return browserAI();
  }
  const { createGoogleGenerativeAI } = await import('@ai-sdk/google');
  const google = createGoogleGenerativeAI({ apiKey: API_KEY });
  return google('gemini-2.5-flash');
})();

Ingebouwde terugvaloptie

Een ander hybride gebruiksscenario is om bij voorkeur een cloudprovider te gebruiken wanneer online, maar terug te vallen op de ingebouwde provider als de Prompt API wordt ondersteund.

import { doesBrowserSupportBuiltInAI } from '@browser-ai/core';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

let model;

const switchProvider = async (forceCloud = false) => {
  model = await (async () => {
    if (navigator.onLine || forceCloud) {
      const { createGoogleGenerativeAI } = await import('@ai-sdk/google');
      const google = createGoogleGenerativeAI({ apiKey: API_KEY });
      return google('gemini-2.5-flash');
    }
    const { browserAI } = await import('@browser-ai/core');
    return browserAI();
  })();
};

if (doesBrowserSupportBuiltInAI()) {
  window.addEventListener('online', switchProvider);
  window.addEventListener('offline', switchProvider);
}
await switchProvider(true);

Demo

Met de live demo kunt u beide providers naast elkaar uitproberen. Selecteer Cloud API (Gemini 2.5 Flash) of Ingebouwde AI via de keuzeknoppen, klik op Uitvoeren en kijk hoe de pagina vier secties achter elkaar vult: een korte grap die in één keer wordt gegenereerd met generateText() , een lange grap die token voor token wordt gestreamd met streamText() , een lasagnerecept dat wordt geretourneerd als een compleet JSON-object, en vervolgens datzelfde recept dat wordt gestreamd als incrementeel geldige JSON met partialOutputStream . Als u Ingebouwde AI selecteert en uw browser het model nog niet heeft gedownload, verschijnt er een voortgangsindicator voordat de demo's beginnen.

Volgende stap

Nu je weet hoe je de Prompt API met de Vercel AI SDK kunt gebruiken, is de volgende stap om de AI SDK UI en AI Elements te gebruiken om een ​​grafische gebruikersinterface aan je app toe te voegen.

AI SDK UI is ontworpen om u te helpen bij het eenvoudig bouwen van interactieve chat-, aanvul- en assistent-applicaties. Het is een framework-onafhankelijke toolkit die de integratie van geavanceerde AI-functionaliteiten in uw applicaties stroomlijnt.

AI Elements is een componentenbibliotheek en een aangepast register waarmee je sneller AI-native applicaties kunt bouwen. Het biedt vooraf gebouwde componenten zoals gesprekken, berichten en meer.

Lees ' Gebruik de Vercel AI SDK UI en AI-elementen met de Prompt API' om te leren hoe je een grafische gebruikersinterface (GUI) aan je app kunt toevoegen.