Vercel AI SDK के साथ, पहले से मौजूद Prompt API का इस्तेमाल करना

Thomas Steiner

पब्लिश किया गया: 16 जुलाई, 2026

Vercel AI SDK, TypeScript का एक ऐसा टूलकिट है जो किसी भी सेवा देने वाली कंपनी के साथ काम कर सकता है. इसे एआई की मदद से काम करने वाले ऐप्लिकेशन और एजेंट बनाने के लिए डिज़ाइन किया गया है. इसके लिए, Next.js, React, Svelte, Vue, और Angular जैसे लोकप्रिय यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क और Node.js जैसे रनटाइम का इस्तेमाल किया जाता है. ज़्यादातर सेवा देने वाली कंपनियां क्लाउड पर आधारित हैं. हालांकि, दो हिस्सों वाली इस सीरीज़ की पहली गाइड में, Browser AI नाम की कम्यूनिटी सेवा देने वाली कंपनी के बारे में बताया गया है. इसे Jakob Hoeg Mørk ने बनाया है. (Google ने इन्हें फ़ंड किया था). Browser AI की मदद से, Vercel के AI SDK के साथ Prompt API का इस्तेमाल किया जा सकता है. सीरीज़ के दूसरे हिस्से में, यह बताया गया है कि एआई ऐप्लिकेशन में, ग्राफ़िकल यूज़र इंटरफ़ेस (जीयूआई) कैसे जोड़ा जाए.

लाइब्रेरी इंस्टॉल करना

@browser-ai/core पैकेज, Prompt API के लिए एआई एसडीके की सेवा देने वाली कंपनी है. इसे npm की मदद से इंस्टॉल किया जा सकता है. Vercel AI SDK, पीयर डिपेंडेंसी के तौर पर पैकेज से अपने-आप इंस्टॉल हो जाता है.

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 कलेक्शन के कॉन्टेंट ऑब्जेक्ट में type: 'file' ऑब्जेक्ट का इस्तेमाल करके, मल्टीमॉडल इनपुट के साथ काम करता है.

content ऑब्जेक्ट फ़ील्ड (type: 'file')

फ़ील्ड स्वीकार की गई वैल्यू के टाइप ब्यौरा 

type


'file'

इस कॉन्टेंट ऑब्जेक्ट को फ़ाइल इनपुट के तौर पर मार्क करता है 

data


string | Uint8Array | Buffer | ArrayBuffer | URL

फ़ाइल का कॉन्टेंट, जो कई फ़ॉर्मैट में से किसी एक में हो सकता है

अगर data एक string है, तो यह इनमें से कोई एक होनी चाहिए:

फ़ॉर्मैट ब्यौरा
Base64 में एन्कोड किया गया कॉन्टेंट Base64 में एन्कोड किए गए रॉ फ़ाइल बाइट
Base64 डेटा यूआरएल उदाहरण के लिए, data:image/png;base64,...
http(s) यूआरएल कोई रिमोट यूआरएल, जिससे फ़ाइल फ़ेच की जाएगी

उदाहरण के लिए, यहां दिया गया कोड स्निपेट देखें:

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, TypeScript-first स्कीमा की पुष्टि करने वाला टूल है. इसमें स्टैटिक टाइप इन्फ़रेंस की सुविधा भी मिलती है. ज़्यादा जानकारी के लिए, zod का स्कीमा तय करने से जुड़ा दस्तावेज़ देखें.

अपने स्कीमा से मेल खाने वाला JSON ऑब्जेक्ट पाने के लिए, output: Output.object({ schema }) को generateText() या streamText() में पास करें:

  • Output.object() के साथ generateText() का इस्तेमाल करने पर, जनरेशन पूरा होने के बाद, output फ़ील्ड में फ़ाइनल JSON ऑब्जेक्ट दिखता है.
  • Output.object() के साथ streamText() का इस्तेमाल करने पर, 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);
}

हाइब्रिड इस्तेमाल

Vercel का AI SDK, हाइब्रिड इस्तेमाल के लिए सबसे अच्छा है. यह, सेवा देने वाली कंपनियों के लोअर लेवल के लागू करने के तरीके के ऊपर, हायर लेवल का ऐब्स्ट्रैक्शन लेयर उपलब्ध कराता है. सेवा देने वाली कंपनी के तौर पर Prompt API का इस्तेमाल करने पर, browserAI कंस्ट्रक्टर को कॉल करके model बनाया जाता है.

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

const model = browserAI();

किसी दूसरी सेवा देने वाली कंपनी का इस्तेमाल करने के लिए, जैसे कि Google जनरेटिव एआई की सेवा देने वाली कंपनी, आपको यह करना होगा:

  1. चुनी गई सेवा देने वाली कंपनी को इंस्टॉल करें.

    npm install @ai-sdk/google

  2. सेवा देने वाली कंपनी के कंस्ट्रक्टर का इस्तेमाल करके, model को इंस्टैंशिएट करें. Google जनरेटिव एआई जैसी क्लाउड सेवा देने वाली कंपनियों के लिए, आम तौर पर एपीआई कुंजी पास करनी होती है. 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 का इस्तेमाल करना. हालांकि, अगर यह उपलब्ध नहीं है, तो क्लाउड सेवा देने वाली कंपनी का इस्तेमाल करना. @browser-ai/core पैकेज, doesBrowserSupportBuiltInAI() फ़ंक्शन उपलब्ध कराता है. इसकी मदद से यह देखा जा सकता है कि Prompt API उपलब्ध है या नहीं. इस फ़ंक्शन का इस्तेमाल करके, 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) या बिल्ट-इन एआई को चुनें. इसके बाद, चलाएं पर क्लिक करें. आपको दिखेगा कि पेज पर चार सेक्शन क्रम से भरते हैं: एक छोटा चुटकुला जो एक साथ जनरेट किया गया है generateText(), एक लंबा चुटकुला जो टोकन के हिसाब से स्ट्रीम किया गया है streamText(), एक लसान्या रेसिपी जो एक पूरे JSON ऑब्जेक्ट के तौर पर दिखाई गई है, और फिर वही रेसिपी जो partialOutputStream का इस्तेमाल करके, JSON के तौर पर स्ट्रीम की गई है. अगर आपने बिल्ट-इन एआई चुना है और आपके ब्राउज़र ने अब तक मॉडल डाउनलोड नहीं किया है, तो डेमो शुरू होने से पहले, प्रोग्रेस इंडिकेटर दिखता है.

Vercel AI Demo

अगला चरण

अब आपको पता है कि Vercel AI SDK के साथ Prompt API का इस्तेमाल कैसे किया जाता है. इसके बाद, अपने ऐप्लिकेशन में ग्राफ़िकल यूज़र इंटरफ़ेस (जीयूआई) जोड़ने के लिए, AI SDK यूज़र इंटरफ़ेस (यूआई) और एआई एलिमेंट का इस्तेमाल करें.

AI SDK यूज़र इंटरफ़ेस (यूआई) को, इंटरैक्टिव चैट, कंप्लीशन, और असिस्टेंट ऐप्लिकेशन आसानी से बनाने के लिए डिज़ाइन किया गया है. यह एक फ़्रेमवर्क-अग्नोस्टिक टूलकिट है. इससे आपके ऐप्लिकेशन में, एआई की ऐडवांस सुविधाओं को आसानी से इंटिग्रेट किया जा सकता है.

एआई एलिमेंट, कॉम्पोनेंट लाइब्रेरी और कस्टम रजिस्ट्री है. इसकी मदद से, एआई-नेटिव ऐप्लिकेशन तेज़ी से बनाए जा सकते हैं. इसमें पहले से बने कॉम्पोनेंट उपलब्ध हैं. जैसे, बातचीत, मैसेज वगैरह.

अपने ऐप्लिकेशन में जीयूआई जोड़ने का तरीका जानने के लिए, Prompt API के साथ Vercel AI SDK यूज़र इंटरफ़ेस (यूआई) और एआई एलिमेंट का इस्तेमाल करना, लेख पढ़ें.