שימוש ב-Prompt API המובנה עם Vercel AI SDK

Thomas Steiner

תאריך פרסום: 16 ביולי 2026

‫AI SDK של Vercel הוא ערכת כלים של TypeScript שאינה תלויה בספק, ומיועדת לעזור לכם ליצור אפליקציות וסוכנים מבוססי-AI באמצעות framework פופולריים של ממשקי משתמש כמו Next.js, ‏ React, ‏ Svelte, ‏ Vue, ‏ Angular וסביבות זמן ריצה כמו Node.js. רוב הספקים מבוססים על ענן, אבל המדריך הראשון מתוך שניים מתמקד בספק קהילתי בשם Browser AI, שנוצר על ידי Jakob Hoeg Mørk (שקיבל מימון מ-Google). ‫Browser AI מאפשר לכם להשתמש ב-Prompt API עם Vercel's AI SDK. בחלק השני של הסדרה מוסבר איך להוסיף ממשק משתמש גרפי לאפליקציית ה-AI.

התקנת הספרייה

חבילת @browser-ai/core היא ספק ה-SDK של AI עבור Prompt API. אפשר להתקין אותו באמצעות npm. החבילה מתקינה באופן אוטומטי את ה-SDK של Vercel AI כתלות ברמת העמיתים.

npm install @browser-ai/core

שימוש בסיסי

כדי להשתמש בספק:

1. מייבאים את ה-constructor‏ browserAI מהחבילה @browser-ai/core.
2. מייבאים את הפונקציות generateText() או streamText() מ-Vercel AI SDK. שתי הפונקציות יוצרות טקסט ומפעילות כלים עבור הנחיה נתונה באמצעות מודל שפה:

• הפונקציה 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 iterable אסינכרוני שבו מובטח שכל תוצאת ביניים תנותח כ-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);
}

שימוש היברידי

השימוש ההיברידי הוא המקום שבו Vercel's AI SDK באמת מצטיין. הוא מספק שכבת הפשטה ברמה גבוהה יותר מעל יישומי הרמה הנמוכה של הספקים הבסיסיים. כשמשתמשים ב-Prompt API כספק, יוצרים model על ידי קריאה ל-constructor‏ browserAI.

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

const model = browserAI();

כדי להשתמש בספק אחר, למשל ספק AI גנרטיבי של Google, צריך לבצע את הפעולות הבאות:

1. מתקינים את הספק שנבחר.

   npm install @ai-sdk/google
   

2. יוצרים מופע של model באמצעות בנאי הספק, שבדרך כלל כולל העברת מפתח API עבור ספקי ענן כמו Google Generative AI. במקרה של ספק ה-AI הגנרטיבי של Google, אפשר גם להעביר מזהה של מודל בענן, למשל, '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');
   

מעבר חזרה לענן

תרחיש שימוש היברידי קלאסי הוא שימוש ב-Prompt API כשהוא זמין, ומעבר לספק שירותי ענן בנסיבות אחרות. כדי לבדוק אם Prompt API זמין, חבילת @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');
})();

גיבוי מובנה

תרחיש שימוש היברידי נוסף הוא שימוש מועדף בספק שירותי ענן כשהמכשיר מחובר לאינטרנט, אבל מעבר לספק המובנה אם Prompt API נתמך.

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 מלחצני הבחירה, לוחצים על Run וצופים בדף שמתמלא בארבעה חלקים ברצף: בדיחה קצרה שנוצרה בבת אחת באמצעות generateText(), בדיחה ארוכה שמוזרמת טוקן אחר טוקן באמצעות streamText(), מתכון ללזניה שמוחזר כאובייקט JSON מלא, ואז אותו מתכון שמוזרם כ-JSON תקף באופן מצטבר באמצעות partialOutputStream. אם בוחרים באפשרות 'AI מובנה' והדפדפן עדיין לא הוריד את המודל, מופיע מד התקדמות לפני שההדגמות מתחילות.

השלב הבא

עכשיו, אחרי שלמדתם איך להשתמש ב-Prompt API עם Vercel AI SDK, השלב הבא הוא להשתמש בממשק המשתמש של AI SDK וברכיבי AI כדי להוסיף ממשק משתמש גרפי לאפליקציה.

ממשק המשתמש של AI SDK נועד לעזור לכם לבנות בקלות אפליקציות אינטראקטיביות של צ'אט, השלמה ועזרה. זהו ערכת כלים שאינה תלויה במסגרת מסוימת, שמייעלת את השילוב של פונקציות AI מתקדמות באפליקציות שלכם.

‫AI Elements היא ספריית רכיבים ורישום מותאם אישית שעוזרים לכם ליצור מהר יותר אפליקציות מבוססות-AI. הוא כולל רכיבים מוכנים מראש כמו שיחות, הודעות ועוד.

במאמר Use the Vercel AI SDK UI and AI Elements with the Prompt API (שימוש בממשק המשתמש של Vercel AI SDK וב-AI Elements עם Prompt API) מוסבר איך להוסיף ממשק משתמש גרפי לאפליקציה.