Используйте встроенный API Prompt с SDK Vercel AI.

Thomas Steiner

Опубликовано: 16 июля 2026 г.

Vercel AI SDK — это независимый от провайдера инструментарий на TypeScript, разработанный для создания приложений и агентов на основе ИИ с использованием популярных фреймворков пользовательского интерфейса, таких как Next.js, React, Svelte, Vue, Angular, и сред выполнения, таких как Node.js. Хотя большинство провайдеров работают в облаке, это первое руководство из двух частей посвящено провайдеру от сообщества под названием Browser AI, созданному Якобом Хоэгом Мёрком ( при финансовой поддержке Google ). Browser AI позволяет использовать API Prompt с SDK Vercel AI. Во второй части серии объясняется, как добавить графический пользовательский интерфейс в ваше приложение ИИ.

Установите библиотеку

Пакет @browser-ai/core — это поставщик SDK для искусственного интеллекта для API Prompt. Его можно установить с помощью npm. Базовый SDK Vercel для искусственного интеллекта автоматически устанавливается этим пакетом в качестве зависимостей.

npm install @browser-ai/core

Основное использование

Для использования услуг провайдера:

1. Импортируйте конструктор browserAI из пакета @browser-ai/core .
2. Импортируйте функции generateText() или streamText() из SDK Vercel AI. Обе функции генерируют текст и вызывают инструменты для заданной подсказки, используя языковую модель:

• Функция generateText() не использует потоковую передачу данных и идеально подходит для коротких выходных данных или для случаев, когда продолжение работы возможно только после получения всего текста.
• Функция streamText() генерирует текст потоком из языковой модели. Вы можете использовать эту функцию в интерактивных сценариях, таких как чат-боты и другие приложения, работающие в режиме реального времени.

Для создания экземпляра модели:

1. Вызовите browserAI() . Примечание: В качестве лучшей практики всегда проверяйте availability() , что позволяет использовать резервный вариант (см. Использование в гибридном режиме ), когда модель 'unavailable' , или отображать обновление прогресса, когда модель 'downloadable' или 'downloading' .

2. Затем вы можете вызвать generateText() или streamText() . Полный список параметров см. в документации Vercel AI SDK. Например, вместо прямой передачи prompt , как в приведенном ниже примере кода, вы можете передать более сложный объект messages для многократного запроса или 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);
  }
})();

Мультимодальное использование

Пакет @browser-ai/core поддерживает многомодальный ввод с использованием объекта type: 'file' в объектах содержимого массива messages .

Поля объекта content ( type: 'file' )

type

'file'

data

string | Uint8Array | Buffer | ArrayBuffer | URL

Если data представляют собой string , то они должны соответствовать одному из следующих значений:

Пример кода смотрите в следующем фрагменте:

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

Структурированный вывод

Vercel AI SDK поддерживает структурированный вывод с помощью zod — проверки схемы, основанной на TypeScript, со статическим выводом типов. Подробности см. в документации zod по определению схем .

Чтобы запросить JSON-объект, соответствующий вашей схеме, передайте output: Output.object({ schema }) в функции generateText() или streamText() :

• generateText() с Output.object() возвращает итоговый JSON-объект в поле output после завершения генерации.
• streamText() с Output.object() предоставляет асинхронный итерируемый объект partialOutputStream , в котором гарантируется корректная обработка каждого промежуточного результата как JSON. Например, если ваша схема требует массив из двух чисел, вы получите [] в качестве первого частичного результата, [123] в качестве второго и [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);
}

Гибридное использование

Главное преимущество SDK для искусственного интеллекта от Vercel заключается в гибридном использовании. Он предоставляет более высокий уровень абстракции поверх низкоуровневых реализаций базовых поставщиков. При использовании API Prompt в качестве поставщика вы создаете model , вызывая конструктор browserAI .

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

const model = browserAI();

Чтобы использовать другого поставщика, например, поставщика генеративного искусственного интеллекта Google , необходимо выполнить следующие действия:

1. Установите выбранного поставщика.

   npm install @ai-sdk/google
   

2. Создайте экземпляр model , используя конструктор провайдера, что для облачных провайдеров, таких как Google Generative AI, обычно включает передачу ключа API. В случае с провайдером Google Generative AI вы также можете передать идентификатор облачной модели, например, 'gemini-2.5-flash' . Весь остальной код, например, вызовы streamText() , остаются точно такими же.

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

Резервный вариант в облаке

Классический пример гибридного использования — это использование API Prompt, когда он доступен, и переключение на облачного провайдера в других случаях. Чтобы проверить доступность API Prompt, пакет @browser-ai/core предоставляет функцию doesBrowserSupportBuiltInAI() . Вы можете использовать эту функцию для динамического создания экземпляра 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');
})();

Встроенный резервный вариант

Ещё один гибридный вариант использования — предпочтительно использовать облачного провайдера при подключении к сети, но переключаться на встроенный провайдер, если поддерживается API Prompt.

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

Демо

В демонстрационной версии вы можете попробовать оба провайдера одновременно. Выберите Cloud API (Gemini 2.5 Flash) или Built-in AI из переключателей, нажмите «Запустить» и наблюдайте, как страница последовательно заполняет четыре раздела: короткую шутку, сгенерированную сразу с помощью generateText() , длинную шутку, передаваемую по токенам с помощью streamText() , рецепт лазаньи, возвращаемый в виде полного JSON-объекта, а затем тот же рецепт, передаваемый в виде постепенно корректного JSON с помощью partialOutputStream . Если вы выберете Built-in AI, и ваш браузер еще не загрузил модель, перед началом демонстрации появится индикатор выполнения.

Следующий шаг

Теперь, когда вы знаете, как использовать API Prompt с SDK Vercel AI, следующим шагом будет использование UI и AI Elements из SDK AI для добавления графического пользовательского интерфейса в ваше приложение.

AI SDK UI разработан для того, чтобы помочь вам с легкостью создавать интерактивные приложения для чата, автозаполнения и голосового помощника. Это независимый от фреймворков инструментарий, упрощающий интеграцию передовых функций искусственного интеллекта в ваши приложения.

AI Elements — это библиотека компонентов и реестр пользовательских компонентов, которые помогут вам быстрее создавать приложения, разработанные специально для ИИ. Она предоставляет готовые компоненты, такие как диалоги, сообщения и многое другое.

Прочитайте статью «Использование пользовательского интерфейса и элементов ИИ из Vercel AI SDK с помощью Prompt API» , чтобы узнать, как добавить графический интерфейс пользователя в ваше приложение.