جیمنی اور ورسل سرور لیس فنکشنز کا استعمال کرتے ہوئے AI چیٹ بوٹ کیسے بنایا جائے

کچھ مہینے پہلے میں نے React، Node.js اور Vercel Serverless Functions کا استعمال کرتے ہوئے ایک چیٹ بوٹ ایپلی کیشن بنائی، جسے میں نے ایک ویب ایپ buildcv.makeadifference.app میں استعمال کیا۔

اس ٹیوٹوریل میں، میں آپ کو بالکل بتاؤں گا کہ میں نے اسے کیسے بنایا، بیک اینڈ سرور لیس فنکشن سے جو گوگل کے Gemini API سے بات کرتا ہے ایک React چیٹ ویجیٹ تک جو AI سے ردعمل ظاہر کرتا ہے۔

اس ٹیوٹوریل کو مکمل کرنے کے بعد، آپ سمجھ جائیں گے:

یہاں ایک Vercel Serverless فنکشن کو ترتیب دینے کا طریقہ ہے جو Gemini کو کال کرتا ہے اور اس کے جواب کو براؤزر میں متن کے چھوٹے ٹکڑوں کے طور پر بھیجتا ہے۔
یہ نقطہ نظر چیٹ بوٹ کو ایک ہی وقت میں پورے جواب کے واپس آنے کا انتظار کرنے سے زیادہ تیز اور زیادہ جوابدہ کیوں محسوس کرتا ہے؟
ایک React جزو کیسے بنایا جائے جو سٹریمنگ کے جوابات کو پڑھتا ہے اور نیا متن آنے پر چیٹ ونڈو کو حقیقی وقت میں اپ ڈیٹ کرتا ہے۔

ہم اس بات کا بھی احاطہ کریں گے کہ آپ کے UI کو جوڑنے سے پہلے اور اصل میں پوری چیز کو Vercel پر تعینات کرنے سے پہلے اپنے اختتامی نقطوں کو جانچنے کے لیے curl کا استعمال کیسے کریں۔

یہ تمام ٹکنالوجی کے ارد گرد مرکوز ہے جیسے: سادہ متن کا حصہ سلسلہ بندی. AI کا پورا جواب تیار کرنے کا انتظار کرنے اور پھر اسے ایک ساتھ براؤزر کو واپس بھیجنے کے بجائے، ایک سرور لیس فنکشن جواب کو متن کے چھوٹے ٹکڑوں کی ایک سیریز کے طور پر چلاتا ہے اور تیار ہوتے ہی ہر ایک کو براؤزر پر لکھ دیتا ہے۔

یہی چیز چیٹ بوٹس کو جدید AI چیٹ انٹرفیس میں پائی جانے والی جوابی "ٹائپنگ” کا احساس دیتی ہے۔ ایک طویل وقفے کے بعد پورا جواب ایک ساتھ ظاہر نہیں ہوتا۔

ہم کیا احاطہ کریں گے:

فن تعمیر کا جائزہ

ایپلیکیشن دو اہم حصوں پر مشتمل ہے: UI جزو ایک ری ایکٹ چیٹ ویجیٹ ہے جو اس وقت دوبارہ پیش کیا جاتا ہے جب صارف کوئی پیغام ٹائپ کرتا ہے، جس میں AI کے رسپانس اسٹریمنگ کے ساتھ ہوتا ہے۔ بیک اینڈ ایک Vercel سرور لیس فنکشن ہے، جیسے۔ api/chat) آنے والی درخواست کی توثیق کرتا ہے، جیمنی کو کال کرتا ہے، اور آؤٹ پٹ کو براؤزر پر واپس چلاتا ہے۔

آپ سرکاری دستاویزات میں ورسل کی سرور لیس خصوصیات کے بارے میں مزید جان سکتے ہیں۔

یہ ہے کہ شروع سے ختم ہونے تک پورا بہاؤ کیسے کام کرتا ہے: براؤزر ورسل فنکشن کو ایک درخواست بھیجتا ہے، ورسل فنکشن جیمنی API کو کال کرتا ہے، اور جیمنی کا جواب ٹکڑوں میں براؤزر پر واپس چلا جاتا ہے۔

عملی طور پر، اس کا مطلب یہ ہے کہ بیک اینڈ فرنٹ اینڈ کو جواب بھیجتا ہے جیسے ہی یہ دستیاب ہوتا ہے، بجائے اس کے کہ صارف کو کچھ بھی دیکھنے سے پہلے پورے جواب کے تیار ہونے کا انتظار کرے۔

شرائط

شروع کرنے سے پہلے، یقینی بنائیں کہ آپ کے پاس درج ذیل ہیں:

مقامی طور پر انسٹال کردہ Node.js (نوڈ 18 یا اس سے زیادہ)
Google AI اسٹوڈیو کے لیے Gemini API کلید
ورسل اکاؤنٹ اور ورسل سی ایل آئی
کہ @google/genai فنکشن کے پروجیکٹ میں نصب پیکجز (چل کر شامل کیے جا سکتے ہیں: npm install @google/genai

آپ کلید کو ماحول کے متغیر میں اس طرح ذخیرہ کرنا بھی چاہیں گے: process.env.GOOGLE_API_KEY اگر آپ مقامی ترقی کے لیے تعینات کرنے سے پہلے اپنے Vercel پروجیکٹ کے ڈیش بورڈ (ترتیبات، ماحولیاتی متغیرات کے تحت) میں اسی متغیر کو شامل کرتے ہیں، تو آپ کی ایپلیکیشن کی میزبانی کے بعد آپ کی API کلید کو صحیح طریقے سے اٹھایا جائے گا۔

API معاہدہ

کوڈ کو دیکھنے سے پہلے، فرنٹ اینڈ اور بیک اینڈ کے درمیان "معاہدہ” کو سمجھنے کے لیے ایک لمحہ نکالنا مفید ہے: فرنٹ اینڈ سے کیا بھیجنے کی توقع ہے اور اس کے بدلے میں بیک اینڈ سے کیا ملنے کی توقع ہے۔

جب کوئی صارف چیٹ ویجیٹ میں پیغام بھیجتا ہے، تو فرنٹ اینڈ POST کی درخواست بھیجتا ہے۔ /api/chat ایک JSON باڈی ہے جس میں صارف کا ابھی داخل کردہ پیغام اور ایپ میں پہلے سے ہی ریزیومے کا ڈیٹا بھرا ہوا ہے (چونکہ یہ مخصوص چیٹ بوٹ ریزیومے کوچ کے طور پر کام کرتا ہے)۔ اس کے بعد بیک اینڈ معلومات کے دو ٹکڑوں کو ایک ساتھ استعمال کرتا ہے ایک جواب پیدا کرنے کے لیے جو درحقیقت اس صارف کے ریزیومے سے متعلق ہو، بجائے اس کے کہ عام جواب کے۔

درخواست:

POST /api/chat
{
  "message": "How can I improve my resume summary?",
  "resume": { "name": "...", "experience": [...], "skills": [...] }
}

بیک اینڈ (ورسل سرور لیس فنکشنز)

یہ درخواست کا دل ہے۔ یعنی، ایک واحد Vercel سرور لیس فنکشن جو چیٹ کی درخواستیں وصول کرتا ہے، ان کی توثیق کرتا ہے، انہیں Gemini تک پہنچاتا ہے، اور AI کے پیدا کردہ جوابات کو براؤزر پر واپس بھیجتا ہے۔

ذیل میں مکمل ہینڈلر ہے۔ پورے ہینڈلر کو دیکھنے کے بعد، آئیے دیکھتے ہیں کہ ہینڈلر کا ہر حصہ کیا کرتا ہے۔

const { GoogleGenAI } = require("@google/genai");
const ai = new GoogleGenAI({
    apiKey: process.env.GOOGLE_API_KEY,  // GOOGLE_API_KEY can be configured in Vercel
});
const MAX_TEXT_LENGTH = 2000;
const MAX_ARRAY_LENGTH = 50;

function sanitizeString(input = "") {
    // sanitize your input string here
}

function sanitizeObject(obj = {}) {
    // sanitize your resume object
}

const allowCors = fn => async (req, res) => {

    res.setHeader('Access-Control-Allow-Origin', '<>');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    // ✅ Handle preflight request
    if (req.method === 'OPTIONS') {
        return res.status(200).end();
    }
    // another option
    res.setHeader('Access-Control-Allow-Methods', 'GET, HEAD, OPTIONS, POST, PUT, DELETE')
    res.setHeader(
        'Access-Control-Allow-Headers',
        'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
    )
    if (req.method === 'OPTIONS') {
        res.status(200).end()
        return
    }
    return await fn(req, res)
};

const handler = async (req, res) => {

    if (req.url === '/api/chat' && req.method === 'POST') {

        const { message, resume } = req.body || {};

        const safeMessage = sanitizeString(message);
        const safeResume = sanitizeObject(resume);

        if (!safeMessage) {
            return res.status(400).json({ error: "Invalid message" });
        }

        if (!safeMessage || !safeResume) {
            return res.status(400).json({ error: 'Missing message or resume data' });
        }

        try {
            const stream = await ai.models.generateContentStream({
                model: "<>",
                contents: `
            You are a professional Resume Coach AI.

            - Always respond clearly, politely, and professionally.
            - <>
            - Resume data:
${JSON.stringify(safeResume, null, 2)}

User question:
${safeMessage}
`,
            });
            res.setHeader("Content-Type", "text/plain; charset=utf-8");
            res.setHeader("Cache-Control", "no-cache");

            for await (const chunk of stream) {
                const text = chunk.text;
                if (text) {
                    res.write(text);
                }
            }

            res.end();
        } catch (error) {
            console.error('Gemini Error:', error);
            res.status(500).json({ error: 'AI request failed' });
        }
    }

    // I have added a health check for testing the handler
    if (req.url === '/api/chat?type=healthcheck' && req.method === 'GET') {
        res.status(200).json({ message: 'Hello from the chat endpoint!' });
    }
}

module.exports = allowCors(handler)

اب ایک ایک کرکے اسے توڑتے ہیں۔

جیمنی کلائنٹ کی ترتیبات: فائل کے اوپری حصے میں درج ذیل بنائیں: GoogleGenAI کلائنٹ پر ذخیرہ شدہ API کلید کا استعمال کرنا GOOGLE_API_KEY ماحولیاتی متغیرات۔ اس کلائنٹ کو فیچر کے باقی حصوں میں جیمنی سے بات کرنے کے لیے استعمال کیا جائے گا۔
ان پٹ کو حذف کرنا: آنے والی درخواست پر کارروائی کرنے سے پہلے، ہم پیغام چلاتے ہیں اور اس کے ذریعے دوبارہ شروع کرتے ہیں: sanitizeString اور sanitizeObject. یہ خصوصیات کسی بھی غیر متوقع یا اونچی آواز کو ختم کر دیتی ہیں، اس لیے آپ ناقابل اعتماد صارف کے ان پٹ کو پہلے چیک کیے بغیر براہ راست AI کو منتقل نہیں کرتے ہیں۔
CORS ہینڈلنگ: کہ allowCors ریپر فنکشن ہینڈلرز کے ارد گرد بیٹھتے ہیں اور کراس اوریجن ریسورس شیئرنگ کا انتظام کرتے ہیں۔ چیٹ ویجٹ خود Vercel خصوصیت کے علاوہ ڈومینز میں سرایت کر سکتے ہیں، لہذا آپ کو ان ڈومینز سے درخواستوں کی واضح طور پر اجازت دینی چاہیے۔ OPTIONS ایک پری فلائٹ درخواست جو براؤزر خود بخود اصل درخواست سے پہلے بھیجتا ہے۔ POST درخواست گزر جاتی ہے۔
توثیق کی درخواست کریں: ہینڈلر کے اندر ہی ہم دونوں کو چیک کرتے ہیں۔ message اور resume جراثیم کشی کامیابی سے مکمل ہو گئی ہے۔ اگر کوئی ایک غائب یا غلط ہے، تو یہ پہلے سے غلط درخواست پر جیمنی کال کو ضائع کرنے کے بجائے فوری طور پر 400 کی غلطی لوٹاتا ہے۔
جیمنی کال اور رسپانس اسٹریمنگ: یہ پورے ٹیوٹوریل کا کلیدی حصہ ہے۔ معمول کے "مواد تخلیق کریں” کے طریقہ کار کو کال کرنے اور مکمل جواب کے واپس آنے کا انتظار کرنے کے بجائے، ہم کال کرتے ہیں: generateContentStreamایک غیر مطابقت پذیر تکراری لوٹاتا ہے۔ ہم اس سلسلے کو اس طرح دہراتے ہیں: for await...of یہ ایک لوپ چلاتا ہے اور جب بھی متن کا کوئی نیا حصہ آتا ہے، یہ فوراً اسے جواب میں لکھ دیتا ہے۔ res.write(text). یہ وہی ہے جو براؤزر کو متن وصول کرنا شروع کرنے کی اجازت دیتا ہے اس سے پہلے کہ جیمنی مکمل جواب تیار کر لے۔
خرابی سے نمٹنے اور حیثیت کی جانچ: اگر جیمنی سے بات کرتے ہوئے کچھ غلط ہو جاتا ہے، تو یہ غلطی کو پکڑ کر لاگ ان کرے گا اور 500 جواب واپس کر دے گا تاکہ آپ کو معلوم ہو کہ فرنٹ اینڈ پر کوئی مسئلہ ہے۔ سادہ چیزیں بھی ہیں GET اس سے پہلے کہ آپ چیٹ کے اصل بہاؤ کی جانچ شروع کریں، آپ ہیلتھ چیک اینڈ پوائنٹ کو اس بات کو یقینی بنانے کے لیے مار سکتے ہیں کہ فعالیت چل رہی ہے۔

UI کو مربوط کرنے سے پہلے اختتامی پوائنٹس کی جانچ کریں۔

اس سے پہلے کہ آپ اپنا فرنٹ اینڈ بنانا شروع کریں، یہ تصدیق کرنا اچھا خیال ہے کہ آپ کا سرور لیس فنکشن درحقیقت توقع کے مطابق ٹکڑوں کو سٹریم کر رہا ہے۔ آپ اسے ایک سادہ کرل کی درخواست کے ساتھ کر سکتے ہیں۔

curl -N -X POST "https://YOUR_APP.vercel.app/api/chat?type=chat" 
  -H "Content-Type: application/json" 
  -d '{"message":"Give me 3 resume summary tips","resume":{"name":"Test"}}'

کہ -N جھنڈا کرل کی آؤٹ پٹ بفرنگ کو غیر فعال کر دیتا ہے، لہذا آپ دیکھیں گے کہ متن آپ کے ٹرمینل میں ایک ہی بار کی بجائے آہستہ آہستہ ظاہر ہوتا ہے۔ یہ یقینی بناتا ہے کہ آپ فرنٹ اینڈ کوڈ کی ایک لائن لکھنے سے پہلے آپ کی اسٹریمنگ اینڈ ٹو اینڈ کام کر رہی ہے۔

فرنٹ اینڈ: جوابی سلسلہ پڑھیں

ذیل میں چیٹ ویجیٹ UI کے اسکرین شاٹس ہیں جو میں نے React میں بنایا تھا:

ہم آپ کو یہاں شروع سے اس UI کی تعمیر کے ذریعے نہیں چلائیں گے۔ ترتیب، انداز، اور پیغام کی فہرست واقعی آپ اور آپ کی ڈیزائن کی ترجیحات پر منحصر ہے۔

ہم جس چیز کا احاطہ کریں گے وہ فعالیت ہے جو اسے اصل میں چلاتی ہے۔ بھیجیں بٹن کے پیچھے موجود کوڈ صارف کے ان پٹ کو سرور لیس فنکشن میں بھیجتا ہے اور سٹریمنگ کے جواب کو واپس پڑھتا ہے، جس سے ویجیٹ جب بھی آتا ہے AI کا ردعمل ظاہر کر سکتا ہے، جیسا کہ آپ اوپر اسکرین شاٹ میں دیکھتے ہیں۔

اس سے پہلے کہ ہم اس فنکشن میں جائیں، ہمارے اندر ایک شیل ہے تاکہ ہم دیکھ سکیں کہ اجزاء کہاں ہیں۔

function ChatWidget({ resume }) {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  async function sendMessage() {
    // ...actual function is added below
  }

  return (
    
      {/* message list, input box, and a send button that calls sendMessage() */}
    
  );
}

یہ وہ شیل ہے جس میں فنکشن رہتا ہے۔ پیغام کی فہرست، ان پٹ باکس، لوڈنگ پرچم، اور غلطی کی سلاٹ کی حیثیت۔ sendMessage جب آپ بھیجیں بٹن پر کلک کرتے ہیں تو یہ چلتا ہے۔

مکمل فعالیت مندرجہ ذیل ہے: sendMessageچلتا ہے جب بھی صارف پرامپٹ داخل کرتا ہے اور بھیجیں پر کلک کرتا ہے۔ یہ کوڈ کا ٹکڑا ہے جو اوپر دکھائے گئے UI کو اس بیک اینڈ سے جوڑتا ہے جسے ہم نے ابھی بنایا ہے۔

async function sendMessage() {
    const messageText = input.trim();
    if (!messageText || loading) return;

    const userMessage = { role: "user", text: messageText };
    setMessages((message) => [...message, userMessage]);
    setInput("");
    setLoading(true);
    setError(null);

    try {
      const res = await fetch("<>/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: messageText, resume })
      });

      if (!res.ok) {
        throw new Error(`Failed to get response: ${res.status}`);
      }

      const reader = res.body.getReader();
      const decoder = new TextDecoder();

      let fullText = "";
      setMessages((message) => [...message, { role: "assistant", text: "" }]);

      while (true) {
        const { value, done } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value);
        fullText += chunk;

        setMessages((message) => {
          const updated = [...message];
          updated[updated.length - 1] = { role: "assistant", text: fullText };
          return updated;
        });
      }

    } catch (err) {
      setError("Failed to send message. Please try again.");
      setMessages((m) => [...m, {
        role: "assistant",
        text: "Sorry, I encountered an error. Please try again later."
      }]);
    } finally {
      setLoading(false);
    }
  }

یہاں قدم بہ قدم پیشرفت ہے:

سب سے پہلے، جب صارف بھیجیں پر کلک کرتا ہے، درج کردہ پیغام کو فوری طور پر بازیافت کیا جاتا ہے۔ messages ایک بار جب آپ ان کا بندوبست کر لیں گے، تو وہ فوراً چیٹ میں نظر آئیں گے۔

پھر ہم POST ہم سے پوچھیں /api/chat یہ پیغامات اور ریزیوم ڈیٹا کے ساتھ اختتامی نقطہ ہے۔ جب ہمیں جواب ملے گا، ہم آپ کو کال کریں گے۔ res.body.getReader() حاصل کرنے کے لئے ReadableStreamDefaultReader جوابی جسم میں ہمارے پاس ہے۔ TextDecoder خام بائٹس کے ہر ٹکڑے کو پڑھنے کے قابل متن میں تبدیل کرتا ہے۔

وہاں سے ہم دہراتے ہیں، ایک وقت میں ایک حصہ پڑھتے ہیں اور اسے بڑھتے ہوئے حصے میں شامل کرتے ہیں۔ fullText ہر بار جب آپ سٹرنگ استعمال کرتے ہیں اور اس پر اعادہ کرتے ہیں، تو یہ اس متن کے ساتھ چیٹ میں آخری پیغام کو اپ ڈیٹ کرتا ہے۔

یہ لوپ وہی ہے جو "ٹائپنگ” اثر پیدا کرتا ہے جو آپ اوپر اسکرین شاٹ میں دیکھتے ہیں۔ چیٹ ویجیٹ میں اسسٹنٹ کے پیغامات لفظ بہ لفظ نمایاں طور پر بڑھتے ہیں جیسے ہی نئے ٹکڑے آتے ہیں، نہ کہ ایک ساتھ۔ یہ پیٹرن عام پیٹرن سے تھوڑا مختلف ہے. fetch().then(res => res.json()) کال جانی پہچانی ہوگی، لہذا اگر آپ نے اس سے پہلے کبھی بازیافت کا جواب نہیں چلایا ہے، تو آپ ایک لمحے کے لیے روکنا چاہیں گے۔

تعیناتی

اس بات کو یقینی بنانے کے بعد کہ آپ کے افعال اور UI دونوں مقامی طور پر کام کرتے ہیں، تعیناتی میں تین مراحل شامل ہیں:

Vercel میں ماحولیاتی متغیرات سیٹ کریں۔ اپنے پروجیکٹ ڈیش بورڈ میں، ترتیبات، ماحولیاتی متغیرات پر جائیں اور انہیں شامل کریں۔ GOOGLE_API_KEY وہی اقدار استعمال کریں جو آپ مقامی طور پر استعمال کرتے ہیں۔
CORS کی اصل کو اپ ڈیٹ کریں اور URL حاصل کریں۔ بیک اینڈ میں پوائنٹس allowCorsایس Access-Control-Allow-Origin یہ اصل تعینات کردہ ڈومین کا ہیڈر ہے۔ سامنے والے سرے پر fetch لوکل ہوسٹ کے بجائے اسی تعینات کردہ فنکشن یو آر ایل کو کال کریں۔
تقسیمذیل کے دو اختیارات استعمال کریں جو آپ کے ورک فلو کے مطابق ہوں۔

اختیار A: CLI سے تعینات کریں۔

npm install -g vercel   # if you haven't already
vercel login
vercel --prod

vercel login اپنے کمپیوٹر کی تصدیق کریں۔ vercel --prod اپنی پروجیکٹ ڈائرکٹری سے ہی پروڈکشن میں بنائیں اور بھیجیں۔ یہ ایک بار کی تعیناتیوں کے لیے مثالی ہے یا جب آپ تعیناتی ہونے پر مکمل کنٹرول چاہتے ہیں۔

آپشن B: GitHub انضمام کے ذریعے تعینات کریں۔

اپنے پروجیکٹ کو اپنے GitHub ذخیرے میں دھکیلیں (اگر آپ کے پاس پہلے سے نہیں ہے)۔
ورسل ڈیش بورڈ سے نیا شامل کریں۔ پھر پروجیکٹ، پھر ایک ذخیرہ منتخب کریں۔
ورسل خود بخود آپ کے فریم ورک کی ترتیبات کا پتہ لگاتا ہے۔ چیک کریں اور کلک کریں۔ تقسیم.
اس کے بعد سے، ڈیفالٹ برانچ میں ہر دھکا ایک خودکار دوبارہ تعیناتی کو متحرک کرے گا۔

میں نے ہمیشہ اس آپشن کو ترجیح دی ہے، اگر آپ کسی پروجیکٹ پر فعال طور پر اعادہ کر رہے ہیں تو یہ زیادہ آسان ہے کیونکہ آپ کو خود deploy کمانڈ کو چلانے کے لیے یاد رکھنے کی ضرورت نہیں ہے۔

تعیناتی مکمل ہونے کے بعد، Vercel آپ کو آپ کی ایپ کا اصل URL فراہم کرے گا۔ پہلے کی طرح ہی curl کمانڈ کا استعمال کرتے ہوئے پروڈکشن یو آر ایل کو تبدیل کرکے اس کی جانچ کریں، اور یقینی بنائیں کہ آپ کی اسٹریمنگ پروڈکشن میں صحیح طریقے سے کام کرتی ہے اس سے پہلے کہ آپ اسے مکمل سمجھیں۔

اگر آپ اس چیٹ ویجیٹ کو کسی ایسی ویب سائٹ میں ایمبیڈ کرنا چاہتے ہیں جو آپ کے Vercel ایپ سے مختلف ڈومین پر ہے (مثال کے طور پر مارکیٹنگ سائٹ پر ویجیٹ کے طور پر جب کہ فیچر خود کہیں اور تعینات ہے)، CORS پابندیاں بطور ڈیفالٹ لاگو ہوں گی۔ براؤزر دوسرے ذرائع سے درخواستوں کو روکتے ہیں جب تک کہ سرور واضح طور پر ان کی اجازت نہ دے۔

اسے صحیح طریقے سے سنبھالنے کے لیے، آپ کے سرور لیس فنکشن کو درج ذیل کا جواب دینا چاہیے: OPTIONS ایک پری فلائٹ درخواست جو براؤزر خود بخود اصل درخواست سے پہلے بھیجتا ہے۔ POST آپ کو ایک درخواست اور سیٹ کرنا ضروری ہے: Access-Control-Allow-Origin ایک ہیڈر جو اس ڈومین سے میل کھاتا ہے جس پر ویجیٹ دراصل چل رہا ہے۔ بس۔ allowCors اس کے بجائے اوپر والے بیک اینڈ کوڈ کے لیے ایک ریپر کیا جاتا ہے۔

نتیجہ

سادہ متن کے ٹکڑوں کو سٹریم کرنا وہ چیز ہے جو ورسل میں چیٹ بوٹ کو جوابدہ محسوس کرتی ہے۔ صارفین جوابات کو بتدریج ظاہر ہوتے دیکھ سکتے ہیں، اس لیے انہیں اسکرین پر آئٹمز کے ظاہر ہونے سے پہلے مکمل جواب تیار ہونے کا انتظار نہیں کرنا پڑے گا۔

اگر آپ اس کی تعمیر جاری رکھنا چاہتے ہیں تو، یہاں غور کرنے کے لیے کچھ قدرتی اگلے اقدامات ہیں: ان میں اختتامی نقطہ کے غلط استعمال کو روکنے کے لیے شرح کی حد کو شامل کرنا، KV، Redis یا Postgres جیسے بات چیت کی استقامت کو شامل کرنا تاکہ یہ یقینی بنایا جا سکے کہ چیٹ کی سرگزشت ریفریش پر ضائع نہ ہو، اور ویجیٹ میں ایک اسٹاپ بٹن شامل کریں تاکہ صارف پہلے سے تیار کردہ جواب کو منسوخ کر سکے۔

اگر آپ اس نقطہ نظر کے ساتھ کچھ بناتے ہیں، تو میں اس کے بارے میں سننا پسند کروں گا! جیمنی اور ورسل کے ساتھ آپ کیا بنانے کا ارادہ رکھتے ہیں؟

امید ہے کہ آپ کا ہفتہ خوشگوار گزرے!