از Prompt API داخلی به همراه Vercel AI SDK استفاده کنید.

Thomas Steiner

منتشر شده: ۱۶ ژوئیه ۲۰۲۶

کیت توسعه نرم‌افزار Vercel AI یک جعبه‌ابزار TypeScript است که مستقل از ارائه‌دهنده خدمات طراحی شده است تا به شما در ساخت برنامه‌ها و عامل‌های مبتنی بر هوش مصنوعی با استفاده از چارچوب‌های رابط کاربری محبوب مانند Next.js، React، Svelte، Vue، Angular و runtimeهایی مانند Node.js کمک کند. در حالی که اکثر ارائه‌دهندگان مبتنی بر ابر هستند، این راهنمای اول از یک مجموعه دو قسمتی بر روی یک ارائه‌دهنده اجتماعی به نام Browser AI تمرکز دارد که توسط Jakob Hoeg Mørk (که توسط گوگل تأمین مالی شده است) ایجاد شده است. Browser AI به شما امکان می‌دهد از Prompt API با SDK هوش مصنوعی Vercel استفاده کنید. سپس بخش دوم این مجموعه نحوه اضافه کردن یک رابط کاربری گرافیکی به برنامه هوش مصنوعی شما را توضیح می‌دهد.

کتابخانه را نصب کنید

بسته @browser-ai/core ارائه دهنده AI SDK برای Prompt API است. می‌توانید آن را با npm نصب کنید. Vercel AI SDK زیربنایی به طور خودکار توسط این بسته به عنوان یک وابستگی همتا نصب می‌شود.

npm install @browser-ai/core

کاربرد اولیه

برای استفاده از ارائه دهنده:

1. سازنده‌ی browserAI را از پکیج @browser-ai/core وارد (import) کنید.
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 از خروجی ساختاریافته از طریق zod ، یک اعتبارسنجی طرحواره مبتنی بر TypeScript با استنتاج نوع استاتیک، پشتیبانی می‌کند. برای جزئیات بیشتر، مستندات Defining schemas مربوط به 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);
}

استفاده ترکیبی

جایی که کیت توسعه نرم‌افزار هوش مصنوعی ورسل واقعاً می‌درخشد، کاربرد ترکیبی است. این کیت یک لایه انتزاعی سطح بالاتر را روی پیاده‌سازی‌های سطح پایین‌تر ارائه‌دهندگان زیربنایی فراهم می‌کند. وقتی از API Prompt به عنوان ارائه‌دهنده استفاده می‌کنید، با فراخوانی سازنده browserAI یک model ایجاد می‌کنید.

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

const model = browserAI();

برای استفاده از یک ارائه‌دهنده‌ی دیگر، مثلاً ارائه‌دهنده‌ی هوش مصنوعی نسل گوگل ، باید موارد زیر را انجام دهید:

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

پشتیبان ابری

یک مورد استفاده ترکیبی کلاسیک، استفاده از 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 پخش می‌شود. اگر Built-in AI را انتخاب کنید و مرورگر شما هنوز مدل را دانلود نکرده باشد، قبل از شروع نسخه‌های آزمایشی، یک نشانگر پیشرفت ظاهر می‌شود.

مرحله بعدی

حالا که می‌دانید چگونه از Prompt API با Vercel AI SDK استفاده کنید، قدم بعدی استفاده از رابط کاربری AI SDK و عناصر AI برای اضافه کردن یک رابط کاربری گرافیکی به برنامه‌تان است.

رابط کاربری AI SDK به گونه‌ای طراحی شده است که به شما در ساخت آسان برنامه‌های چت تعاملی، تکمیل فرم و دستیار کمک کند. این یک جعبه ابزار مستقل از چارچوب است که ادغام قابلیت‌های پیشرفته هوش مصنوعی را در برنامه‌های شما ساده می‌کند.

عناصر هوش مصنوعی (AI Elements) یک کتابخانه کامپوننت و رجیستری سفارشی است که به شما کمک می‌کند برنامه‌های بومی هوش مصنوعی را سریع‌تر بسازید. این کتابخانه کامپوننت‌های از پیش ساخته شده مانند مکالمات، پیام‌ها و موارد دیگر را ارائه می‌دهد.

برای یادگیری نحوه افزودن رابط کاربری گرافیکی (GUI) به برنامه خود، بخش «استفاده از رابط کاربری Vercel AI SDK و عناصر هوش مصنوعی با Prompt API» را مطالعه کنید.