Integrierte Prompt API mit dem Vercel AI SDK verwenden

Thomas Steiner

Veröffentlicht am 16. Juli 2026

Das Vercel AI SDK ist ein anbieterunabhängiges TypeScript Toolkit, mit dem Sie KI-gestützte Anwendungen und Agents mit beliebten UI-Frameworks wie Next.js, React, Svelte, Vue und Angular sowie Runtimes wie Node.js erstellen können. Die meisten Anbieter sind cloudbasiert. Dieser erste Teil einer zweiteiligen Reihe konzentriert sich jedoch auf einen Community-Anbieter namens Browser AI, der von Jakob Hoeg Mørk (der von Google finanziert wurde) erstellt wurde. Mit Browser AI können Sie die Prompt API mit dem AI SDK von Vercel verwenden. Im zweiten Teil der Reihe wird dann erklärt, wie Sie Ihrer KI-Anwendung eine grafische Benutzeroberfläche hinzufügen.

Bibliothek installieren

Das @browser-ai/core Paket ist der AI SDK-Anbieter für die Prompt API. Sie können es mit npm installieren. Das zugrunde liegende Vercel AI SDK wird automatisch vom Paket als Peer-Abhängigkeit installiert.

npm install @browser-ai/core

Grundlegende Nutzung

So verwenden Sie den Anbieter:

1. Importieren Sie den browserAI-Konstruktor aus dem Paket @browser-ai/core.
2. Importieren Sie die generateText() oder die streamText() Funktionen aus dem Vercel AI SDK. Beide Funktionen generieren Text und rufen Tools für einen bestimmten Prompt mit einem Language Model auf:

• Die Funktion generateText() ist nicht streamingfähig und eignet sich ideal für kurze Ausgaben oder für Ausgaben, bei denen Sie erst fortfahren können, wenn die gesamte Ausgabe empfangen wurde.
• Die Funktion streamText() streamt Textgenerierungen aus einem Sprachmodell. Sie können diese Funktion für interaktive Anwendungsfälle wie Chatbots und andere Echtzeitanwendungen verwenden.

So erstellen Sie eine Modellinstanz:

1. Rufen Sie browserAI() auf. Hinweis: Als Best Practice sollten Sie immer die availability() des Modells prüfen. So können Sie ein Fallback verwenden (siehe Hybride Nutzung), wenn das Modell 'unavailable' ist, oder eine Fortschrittsaktualisierung anzeigen, wenn das Modell 'downloadable' oder 'downloading' ist.

2. Anschließend können Sie generateText() oder streamText() aufrufen. Eine vollständige Liste der Parameter finden Sie in der Dokumentation zum Vercel AI SDK. Anstatt beispielsweise einen prompt direkt zu übergeben, wie im folgenden Codebeispiel, können Sie auch ein komplexeres messages-Objekt für Multi-Shot-Prompts oder einen system-Prompt übergeben.

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);
  }
})();

Multimodale Nutzung

Das @browser-ai/core Paket unterstützt multimodale Eingaben mit einem type: 'file' Objekt in den Inhaltsobjekten des messages Arrays.

content Objektfelder (type: 'file')

type

'file'

data

string | Uint8Array | Buffer | ArrayBuffer | URL

Wenn data ein string ist, muss es eines der folgenden Formate haben:

Ein Beispiel finden Sie im folgenden Code-Snippet:

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);
}

Strukturierte Ausgabe

Das Vercel AI SDK unterstützt strukturierte Ausgaben über Zod, eine Schemavalidierung mit statischer Typinferenz, die auf TypeScript basiert. Weitere Informationen finden Sie in der Dokumentation zum Definieren von Schemas von Zod.

Wenn Sie ein JSON-Objekt anfordern möchten, das Ihrem Schema entspricht, übergeben Sie output: Output.object({ schema }) an generateText() oder streamText():

• generateText() mit Output.object() gibt das endgültige JSON-Objekt im Feld output zurück, sobald die Generierung abgeschlossen ist.
• streamText() mit Output.object() bietet ein asynchrones iterierbares partialOutputStream, bei dem garantiert ist, dass jedes Zwischenergebnis korrekt als JSON geparst wird. Wenn Ihr Schema beispielsweise ein Array mit zwei Zahlen erzwingt, erhalten Sie [] als erstes Teilergebnis, [123] als zweites und [123, 456] als Endergebnis.

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 Nutzung

Die hybride Nutzung ist eine der Stärken des AI SDK von Vercel. Es bietet eine höhere Abstraktionsebene über den Implementierungen der zugrunde liegenden Anbieter auf niedrigerer Ebene. Wenn Sie die Prompt API als Anbieter verwenden, erstellen Sie ein model, indem Sie den browserAI-Konstruktor aufrufen.

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

const model = browserAI();

Wenn Sie einen anderen Anbieter verwenden möchten, z. B. den Google Generative AI-Anbieter, müssen Sie Folgendes tun:

1. Installieren Sie den ausgewählten Anbieter.

   npm install @ai-sdk/google
   

2. Instanziieren Sie das model mit dem Konstruktor des Anbieters. Bei Cloud-Anbietern wie Google Generative AI müssen Sie in der Regel einen API-Schlüssel übergeben. Im Fall des Google Generative AI-Anbieters können Sie auch eine Cloud-Modell-ID übergeben, z. B. 'gemini-2.5-flash'. Der restliche Code, z. B. Ihre Aufrufe von streamText(), bleibt genau gleich.

   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');
   

Cloud-Fallback

Ein klassischer hybrider Anwendungsfall ist die Verwendung der Prompt API, wenn sie verfügbar ist, und die Rückkehr zu einem Cloud-Anbieter unter anderen Umständen. Mit der Funktion doesBrowserSupportBuiltInAI() des Pakets @browser-ai/core können Sie prüfen, ob die Prompt API verfügbar ist. Mit dieser Funktion können Sie das model dynamisch als cloudbasiertes Modell oder als integriertes Modell instanziieren.

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');
})();

Integriertes Fallback

Ein weiterer hybrider Anwendungsfall ist die bevorzugte Verwendung eines Cloud-Anbieters, wenn Sie online sind, aber auf den integrierten Anbieter zurückzugreifen, wenn die Prompt API unterstützt wird.

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

In der Live-Demo können Sie beide Anbieter nebeneinander ausprobieren. Wählen Sie über die Optionsfelder Cloud API (Gemini 2.5 Flash) oder Built-in AI aus und klicken Sie auf Run (Ausführen). Auf der Seite werden dann nacheinander vier Abschnitte gefüllt: ein kurzer Witz, der mit generateText() auf einmal generiert wird, ein langer Witz, der mit streamText() Token für Token gestreamt wird, ein Lasagnerezept, das als vollständiges JSON-Objekt zurückgegeben wird, und dasselbe Rezept, das mit partialOutputStream als inkrementell gültiges JSON gestreamt wird. Wenn Sie „Built-in AI“ auswählen und Ihr Browser das Modell noch nicht heruntergeladen hat, wird vor Beginn der Demos eine Fortschrittsanzeige eingeblendet.

Nächster Schritt

Nachdem Sie nun wissen, wie Sie die Prompt API mit dem Vercel AI SDK verwenden, besteht der nächste Schritt darin, die AI SDK UI und AI Elements zu nutzen, um Ihrer App eine grafische Benutzeroberfläche hinzuzufügen.

Mit der AI SDK UI können Sie ganz einfach interaktive Chat-, Vervollständigungs- und Assistentenanwendungen erstellen. Es ist ein frameworkunabhängiges Toolkit, das die Integration erweiterter KI-Funktionen in Ihre Anwendungen vereinfacht.

AI Elements ist eine Komponentenbibliothek und eine benutzerdefinierte Registrierung, mit der Sie KI-native Anwendungen schneller erstellen können. Es bietet vorgefertigte Komponenten wie Unterhaltungen und Nachrichten.

Unter Vercel AI SDK UI und AI Elements mit der Prompt API verwenden, erfahren Sie, wie Sie Ihrer App eine GUI hinzufügen.