Korzystanie z wbudowanego interfejsu Prompt API z pakietem Vercel AI SDK

Thomas Steiner

Opublikowano: 16 lipca 2026 r.

AI SDK od Vercel to niezależny od dostawcy zestaw narzędzi TypeScript, który pomaga tworzyć aplikacje i agenty oparte na AI przy użyciu popularnych platform interfejsu, takich jak Next.js, React, Svelte, Vue i Angular, oraz środowisk wykonawczych, takich jak Node.js. Większość dostawców korzysta z chmury, ale ten pierwszy przewodnik z dwuczęściowej serii skupia się na dostawcy społecznościowym o nazwie Browser AI, który został stworzony przez Jakoba Hoega Mørka (finansowanego przez Google). Browser AI umożliwia korzystanie z interfejsu Prompt API z pakietem AI SDK od Vercel. W drugiej części serii wyjaśniamy, jak dodać do aplikacji AI graficzny interfejs użytkownika.

Instalowanie biblioteki

Pakiet @browser-ai/core to dostawca pakietu SDK AI dla interfejsu Prompt API. Możesz go zainstalować za pomocą npm. Podstawowy pakiet Vercel AI SDK jest automatycznie instalowany przez pakiet jako zależność równorzędna.

npm install @browser-ai/core

Podstawowe użycie

Aby użyć dostawcy:

1. Zaimportuj konstruktor browserAI z pakietu @browser-ai/core.
2. Zaimportuj funkcje generateText() lub streamText() z pakietu Vercel AI SDK. Obie funkcje generują tekst i wywołują narzędzia na podstawie danego promptu za pomocą modelu językowego:

• Funkcja generateText() nie przesyła strumieniowo danych wyjściowych i jest idealna w przypadku krótkich wyników lub wyników, które można kontynuować dopiero po otrzymaniu całości.
• Funkcja streamText() przesyła strumieniowo generowany tekst z modelu językowego. Możesz używać tej funkcji w interaktywnych przypadkach użycia, takich jak chatboty i inne aplikacje działające w czasie rzeczywistym.

Aby utworzyć instancję modelu:

1. Zadzwoń do firmy browserAI(). Uwaga: zalecamy zawsze sprawdzanie availability() modelu, co pozwala używać alternatywnego rozwiązania (patrz Użycie hybrydowe), gdy model jest 'unavailable', lub wyświetlać aktualizację postępu, gdy model jest 'downloadable' lub 'downloading'.

2. Możesz wtedy zadzwonić pod numer generateText() lub streamText(). Pełną listę parametrów znajdziesz w dokumentacji pakietu Vercel AI SDK. Na przykład zamiast przekazywać bezpośrednio wartość prompt, jak w tym przykładowym kodzie, możesz też przekazać bardziej złożony obiekt messages, aby użyć promptów wielokrotnych, lub przekazać prompt 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);
  }
})();

Korzystanie z wielu trybów

Pakiet @browser-ai/core obsługuje dane wejściowe multimodalne za pomocą obiektu type: 'file' w obiektach treści tablicy messages.

content pola obiektu (type: 'file')

type

'file'

data

string | Uint8Array | Buffer | ArrayBuffer | URL

Jeśli data jest string, musi przyjmować jedną z tych wartości:

Przykład znajdziesz w tym fragmencie kodu:

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

Uporządkowane dane wyjściowe

Pakiet Vercel AI SDK obsługuje dane wyjściowe w formacie strukturalnym za pomocą zod, czyli biblioteki do weryfikacji schematów w języku TypeScript z wnioskowaniem o typie statycznym. Szczegółowe informacje znajdziesz w dokumentacji zod na temat definiowania schematów.

Aby poprosić o obiekt JSON zgodny ze schematem, przekaż output: Output.object({ schema }) do generateText() lub streamText():

• generateText() z Output.object() zwraca gotowy obiekt JSON w polu output po zakończeniu generowania.
• streamText() z Output.object() zapewnia partialOutputStream asynchroniczną wartość iterowalną, w której każdy wynik pośredni jest prawidłowo parsowany jako JSON. Jeśli np. schemat wymusza tablicę 2 liczb, jako pierwszy częściowy wynik otrzymasz [], jako drugi – [123], a jako ostateczny – [123, 456].

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

Użycie hybrydowe

Pakiet Vercel AI SDK sprawdza się szczególnie dobrze w przypadku użycia hybrydowego. Zapewnia wyższą warstwę abstrakcji w stosunku do implementacji niższego poziomu dostawców bazowych. Gdy używasz interfejsu Prompt API jako dostawcy, tworzysz model, wywołując konstruktor browserAI.

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

const model = browserAI();

Aby użyć innego dostawcy, np. dostawcy generatywnej AI od Google, musisz wykonać te czynności:

1. Zainstaluj wybranego dostawcę.

   npm install @ai-sdk/google
   

2. Utwórz instancję model za pomocą konstruktora dostawcy, który w przypadku dostawców usług w chmurze, takich jak Google Generative AI, zwykle wymaga przekazania klucza API. W przypadku dostawcy Google Generative AI możesz też przekazać identyfikator modelu w chmurze, np. 'gemini-2.5-flash'. Cała reszta kodu, np. wywołania funkcji streamText(), pozostanie bez zmian.

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

Kreacja zastępcza w chmurze

Klasycznym hybrydowym przypadkiem użycia jest korzystanie z interfejsu Prompt API, gdy jest on dostępny, i przełączanie się na dostawcę usług w chmurze w innych okolicznościach. Aby sprawdzić, czy interfejs Prompt API jest dostępny, pakiet @browser-ai/core udostępnia funkcję doesBrowserSupportBuiltInAI(). Za pomocą tej funkcji możesz dynamicznie tworzyć instancje model jako modelu opartego na chmurze lub wbudowanego modelu.

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

Wbudowana kreacja zastępcza

Inny hybrydowy przypadek użycia polega na preferowaniu dostawcy usług w chmurze, gdy urządzenie jest online, ale w przypadku obsługi interfejsu Prompt API przełączaniu się na wbudowanego dostawcę.

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

Prezentacja

Wersja demonstracyjna umożliwia wypróbowanie obu dostawców obok siebie. Wybierz Cloud API (Gemini 2.5 Flash) lub Wbudowana AI, kliknij Uruchom i obserwuj, jak strona wypełnia się kolejno w 4 sekcjach: krótki żart wygenerowany w całości za pomocą generateText(), długi żart przesyłany strumieniowo token po tokenie za pomocą streamText(), przepis na lasagne zwrócony jako kompletny obiekt JSON, a następnie ten sam przepis przesyłany strumieniowo jako przyrostowo prawidłowy JSON za pomocą partialOutputStream. Jeśli wybierzesz Wbudowana AI, a przeglądarka nie pobrała jeszcze modelu, przed rozpoczęciem wersji demonstracyjnych pojawi się wskaźnik postępu.

Następny krok

Teraz, gdy wiesz już, jak używać interfejsu Prompt API z pakietem Vercel AI SDK, kolejnym krokiem jest wykorzystanie interfejsu pakietu AI SDK i elementów AI do dodania graficznego interfejsu użytkownika do aplikacji.

Interfejs pakietu AI SDK został zaprojektowany tak, aby ułatwiać tworzenie interaktywnych aplikacji do czatu, uzupełniania i asystentów. Jest to niezależny od platformy pakiet narzędzi, który ułatwia integrację zaawansowanych funkcji AI z aplikacjami.

AI Elements to biblioteka komponentów i rejestr niestandardowy, które pomogą Ci szybciej tworzyć aplikacje oparte na AI. Zawiera gotowe komponenty, takie jak rozmowy, wiadomości i inne.

Przeczytaj artykuł Korzystanie z interfejsu Vercel AI SDK UI i elementów AI z interfejsem Prompt API, aby dowiedzieć się, jak dodać do aplikacji graficzny interfejs użytkownika.