Vercel AI SDK-এর সাথে বিল্ট-ইন প্রম্পট এপিআই ব্যবহার করুন

টমাস স্টেইনার

প্রকাশিত: ১৬ জুলাই, ২০২৬

ভার্সেল এআই এসডিকে হলো একটি প্রোভাইডার-অ্যাগনস্টিক টাইপস্ক্রিপ্ট টুলকিট, যা আপনাকে নেক্সট.জেএস, রিয়্যাক্ট, স্ভেল্ট, ভিউ, অ্যাঙ্গুলারের মতো জনপ্রিয় ইউআই ফ্রেমওয়ার্ক এবং নোড.জেএস-এর মতো রানটাইম ব্যবহার করে এআই-চালিত অ্যাপ্লিকেশন ও এজেন্ট তৈরি করতে সাহায্য করার জন্য ডিজাইন করা হয়েছে। যদিও বেশিরভাগ প্রোভাইডারই ক্লাউড-ভিত্তিক, দুই পর্বের এই সিরিজের প্রথম গাইডটি জ্যাকব হোগ মর্ক (যিনি গুগলের অর্থায়নে কাজ করেছেন) দ্বারা নির্মিত ব্রাউজার এআই নামক একটি কমিউনিটি প্রোভাইডারের উপর আলোকপাত করে। ব্রাউজার এআই আপনাকে ভার্সেলের এআই এসডিকে-এর সাথে প্রম্পট এপিআই ব্যবহার করার সুযোগ দেয়। সিরিজের দ্বিতীয় পর্বে আপনার এআই অ্যাপ্লিকেশনে কীভাবে একটি গ্রাফিক্যাল ইউজার ইন্টারফেস যুক্ত করতে হয়, তা ব্যাখ্যা করা হয়েছে।

লাইব্রেরিটি ইনস্টল করুন

@browser-ai/core প্যাকেজটি হলো প্রম্পট এপিআই (Prompt API)-এর এআই এসডিকে (AI SDK) প্রোভাইডার। আপনি এটি এনপিএম (npm) দিয়ে ইনস্টল করতে পারেন। এর অন্তর্নিহিত ভার্সেল এআই এসডিকে (Vercel AI SDK) প্যাকেজটির দ্বারা একটি পিয়ার ডিপেন্ডেন্সি (peer dependency) হিসেবে স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যায়।

npm install @browser-ai/core

মৌলিক ব্যবহার

প্রদানকারীকে ব্যবহার করতে:

  1. @browser-ai/core প্যাকেজ থেকে browserAI কনস্ট্রাক্টরটি ইম্পোর্ট করুন।
  2. Vercel AI SDK থেকে generateText() অথবা streamText() ফাংশনগুলো ইম্পোর্ট করুন। উভয় ফাংশনই একটি ল্যাঙ্গুয়েজ মডেল ব্যবহার করে প্রদত্ত প্রম্পটের জন্য টেক্সট তৈরি করে এবং টুলস কল করে:
  • 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 প্যাকেজটি messages অ্যারের content অবজেক্টগুলিতে type: 'file' অবজেক্ট ব্যবহার করে মাল্টিমোডাল ইনপুট সমর্থন করে।

content অবজেক্ট ফিল্ড ( type: 'file' )

মাঠ গৃহীত মানের প্রকার বর্ণনা 

type


'file'

এই কন্টেন্ট অবজেক্টটিকে একটি ফাইল ইনপুট হিসেবে চিহ্নিত করে। 

data


string | Uint8Array | Buffer | ArrayBuffer | URL

ফাইলটির বিষয়বস্তু, যা বিভিন্ন সমর্থিত ফরম্যাটের যেকোনো একটিতে থাকবে।

যখন data একটি string হয়, তখন তা নিম্নলিখিতগুলির মধ্যে একটি হতে হবে:

ফর্ম্যাট বর্ণনা
Base64-এনকোডেড বিষয়বস্তু বেস৬৪-এ এনকোড করা কাঁচা ফাইলের বাইট
Base64 ডেটা URL যেমন data:image/png;base64,...
http(s) URL একটি রিমোট ইউআরএল যেখান থেকে ফাইলটি আনা হবে

একটি উদাহরণের জন্য নিচের কোড স্নিপেটটি দেখুন:

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- এর মাধ্যমে স্ট্রাকচার্ড আউটপুট সমর্থন করে, যা স্ট্যাটিক টাইপ ইনফারেন্স সহ একটি টাইপস্ক্রিপ্ট-ফার্স্ট স্কিমা ভ্যালিডেশন। বিস্তারিত জানতে zod-এর 'ডিফাইনিং স্কিমাস' ডকুমেন্টেশন দেখুন।

আপনার স্কিমার সাথে মেলে এমন একটি JSON অবজেক্ট অনুরোধ করতে, generateText() বা streamText() ফাংশনে output: Output.object({ schema }) পাস করুন।

  • জেনারেশন সম্পন্ন হলে, generateText() এর সাথে Output.object() ব্যবহার করে চূড়ান্ত JSON অবজেক্টটি output ফিল্ডে ফেরত দেওয়া হয়।
  • Output.object() streamText() ) একটি partialOutputStream async 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);
}

হাইব্রিড ব্যবহার

ভার্সেলের এআই এসডিকে-র আসল বিশেষত্ব হলো হাইব্রিড ব্যবহার। এটি অন্তর্নিহিত প্রোভাইডারদের নিম্ন-স্তরের ইমপ্লিমেন্টেশনের উপরে একটি উচ্চ-স্তরের অ্যাবস্ট্রাকশন লেয়ার প্রদান করে। যখন আপনি প্রোভাইডার হিসেবে প্রম্পট এপিআই ব্যবহার করেন, তখন browserAI কনস্ট্রাক্টরকে কল করে একটি model তৈরি করেন।

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

const model = browserAI();

অন্য কোনো প্রোভাইডার, যেমন গুগল জেনারেটিভ এআই প্রোভাইডার ব্যবহার করতে হলে, আপনাকে নিম্নলিখিত কাজগুলো করতে হবে:

  1. নির্বাচিত প্রদানকারীকে ইনস্টল করুন। 

    npm install @ai-sdk/google

  2. প্রোভাইডারের কনস্ট্রাক্টর ব্যবহার করে model ইনস্ট্যানশিয়েট করুন, যার জন্য গুগল জেনারেটিভ এআই-এর মতো ক্লাউড প্রোভাইডারদের ক্ষেত্রে সাধারণত একটি এপিআই কী পাস করতে হয়। গুগল জেনারেটিভ এআই প্রোভাইডারের ক্ষেত্রে, আপনি একটি ক্লাউড মডেল আইডেন্টিফায়ারও পাস করতে পারেন, যেমন, '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) উপলব্ধ থাকে তখন তা ব্যবহার করা এবং অন্যান্য পরিস্থিতিতে ক্লাউড প্রোভাইডারের উপর নির্ভর করা। প্রম্পট এপিআই উপলব্ধ আছে কিনা তা পরীক্ষা করার জন্য, @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);

ডেমো

লাইভ ডেমো আপনাকে দুটি প্রোভাইডারই পাশাপাশি চেষ্টা করার সুযোগ দেয়। রেডিও বাটনগুলো থেকে ক্লাউড এপিআই (জেমিনি ২.৫ ফ্ল্যাশ) অথবা বিল্ট-ইন এআই বেছে নিন, রান-এ ক্লিক করুন, এবং দেখুন পৃষ্ঠাটি ক্রমানুসারে চারটি অংশ পূরণ করছে: generateText() দিয়ে একবারে তৈরি একটি ছোট কৌতুক, streamText() দিয়ে টোকেন বাই টোকেন স্ট্রিম করা একটি দীর্ঘ কৌতুক, একটি সম্পূর্ণ JSON অবজেক্ট হিসাবে ফেরত আসা লাজানিয়ার রেসিপি, এবং তারপর partialOutputStream ব্যবহার করে সেই একই রেসিপিকে ক্রমবর্ধমানভাবে বৈধ JSON হিসাবে স্ট্রিম করা। আপনি যদি বিল্ট-ইন এআই বেছে নেন এবং আপনার ব্রাউজারটি এখনও মডেলটি ডাউনলোড না করে থাকে, তাহলে ডেমো শুরু হওয়ার আগে একটি অগ্রগতি সূচক প্রদর্শিত হবে।

ভার্সেল এআই ডেমো

পরবর্তী পদক্ষেপ

এখন যেহেতু আপনি জানেন কিভাবে Vercel AI SDK-এর সাথে Prompt API ব্যবহার করতে হয়, তাই পরবর্তী ধাপ হলো AI SDK UI এবং AI Elements ব্যবহার করে আপনার অ্যাপে একটি গ্রাফিক্যাল ইউজার ইন্টারফেস যুক্ত করা।

AI SDK UI আপনাকে সহজে ইন্টারেক্টিভ চ্যাট, কমপ্লিশন এবং অ্যাসিস্ট্যান্ট অ্যাপ্লিকেশন তৈরি করতে সাহায্য করার জন্য ডিজাইন করা হয়েছে। এটি একটি ফ্রেমওয়ার্ক-অ্যাগনস্টিক টুলকিট, যা আপনার অ্যাপ্লিকেশনগুলিতে উন্নত AI কার্যকারিতাগুলির ইন্টিগ্রেশনকে সুবিন্যস্ত করে।

এআই এলিমেন্টস হলো একটি কম্পোনেন্ট লাইব্রেরি এবং কাস্টম রেজিস্ট্রি যা আপনাকে আরও দ্রুত এআই-নেটিভ অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এটি কথোপকথন, বার্তা এবং আরও অনেক কিছুর মতো আগে থেকে তৈরি কম্পোনেন্ট সরবরাহ করে।

আপনার অ্যাপে কীভাবে একটি GUI যোগ করবেন তা জানতে, “Use the Vercel AI SDK UI and AI Elements with the Prompt API” পড়ুন।