اگر امروز یک چت‌بات با React می‌سازید، احتمالاً کلیدهای امنیتی شما در تب Network مرورگر کاربران قابل مشاهده است. این حفره امنیتی که سال‌ها رویینتن بود، در ۲۱ اوت ۲۰۲۶ با انتشار نسخه پنجم Vercel AI SDK برای همیشه بسته شد. انتشار AI SDK v5 اکنون جداسازی سخت‌گیرانه بین رندرینگ سمت کلاینت و تعاملات LLM در سمت سرور را برای ایمن‌سازی رابط‌های هوش مصنوعی اجباری کرده است.
بسیاری از توسعه‌دهندگان پیش از این برای مدیریت متن‌های دریافتی از مدل، از useState استفاده می‌کردند؛ یعنی شبیه به کسی که هر کلمه از یک کتاب را تکه‌تکه می‌گیرد و هر بار کل میز کارش را برای جای دادن آن کلمه می‌لرزاند. این رویکرد باعث می‌شد با هر توکن (Token) — تکه‌های کوچکی از متن که مدل تکه‌تکه می‌خورد — یک رندر مجدد در React رخ دهد و رابط کاربری دچار لرزش شدید شود. این مسئله به‌ویژه هنگام فراخوانی ابزارهای پیچیده (Tool Calls)، منجر به افت شدید عملکرد و تجربه کاربری نامناسب می‌شد.
همان‌طور که در تحلیل قبلی ما درباره‌ی سازگاری SDKهای مدرن با React و نحوه فعال‌سازی آن توسط Grafana Go SDK اشاره کردیم، این به‌روزرسانی دیگر یک الگوی آزمایشی نیست، بلکه یک استاندارد امنیتی است که از الگوهای تجربی فراتر رفته است.
تله امنیتی مرورگر
طبق گزارش‌های فنی، مدیریت مستقیم فراخوانی‌های API در مرورگر یک آسیب‌پذیری بحرانی است. وقتی توسعه‌دهنده کلاینتِ مدل زبانی بزرگ (LLM) — مثل کتابخانه‌داری که میلیاردها صفحه را خوانده و حالا با همان لحن جواب می‌دهد — را درون useEffect یا هندلرهای رویداد (Event Handlers) تعریف می‌کند، کلیدهای مخفی API در کد سمت کلاینت باندل و جاسازی می‌شوند. هر کسی با یک بازرسی ساده در تب Network مرورگر می‌تواند این اعتبارنامه‌ها را استخراج کرده و از آن‌ها سوءاستفاده کند که منجر به هزینه‌های پیش‌بینی‌نشده و سرسام‌آور برای مالک پروژه می‌شود. این چالش‌ها در راستای تلاش‌های گسترده‌تر برای ایمن‌سازی اکوسیستم هوش مصنوعی است، مشابه آنچه در ابزار SkillGuard برای بستن حفره‌های امنیتی مهارت‌های عامل‌های هوش مصنوعی مشاهده می‌کنیم.
چرخش در معماری
به نقل از مستندات Vercel، نسخه پنجم این SDK الگوهای پرخطر را با یک معماری پایدار و مبتنی بر Transport جایگزین کرده است. این سیستم ماژولار، ادغام تنظیمات مختلف بک‌اند را تسهیل می‌کند و در عین حال محیطی امن و دارای Type-safe فراهم می‌آورد. هدف نهایی این است که تمام پردازش‌های سنگین به سرور منتقل شود و فرانت‌اند تنها خروجی‌های پالایش‌شده، پاک‌سازی‌شده و امن را دریافت کند.
بر اساس گزارش dev.to، این معماری بر دو رکن اصلی استوار است:
- streamText: تابعی در سمت سرور که منطق LLM را به‌صورت امن در مسیرهای API (مانند
app/api/chat/route.ts) اجرا می‌کند تا کلیدها هرگز سرور را ترک نکنند. این تابع اجازه می‌دهد ابزارهای خاصی تعریف شوند؛ برای مثال، تابعی مانندgetWeatherکه برای پارامترهای خود ازz.objectاستفاده می‌کند. بهینه‌سازی این جریان‌های داده در سمت سرور می‌تواند به کاهش هزینه‌های عملیاتی کمک کند، همان‌طور که مدل‌های قیمت‌گذاری مبتنی بر درخواست توانسته‌اند هزینه‌ی استریم مدل‌های سنگین را کاهش دهند. - useChat: یک هوک بازطراحی‌شده در سمت کلاینت که از Server-Sent Events (SSE) برای دریافت خروجی‌های پالایش‌شده استفاده می‌کند، بدون اینکه نیاز باشد وضعیت ورودی (Input State) را به‌صورت داخلی مدیریت کند.
فراخوانی ابزارهای تایپ‌شده
یکی از مهم‌ترین تغییرات فنی، حذف رشته‌های متنی ساده (Generic Strings) برای فراخوانی ابزارها است. اکنون فراخوانی‌ها بخش‌های کاملاً تایپ‌شده‌ای از جریان پیام هستند. SDK داده‌های ساختاریافته را استریم می‌کند و به فرانت‌اند اجازه می‌دهد فراخوانی یک ابزار را بلافاصله شناسایی کند.
- پاسخ آنی: رابط کاربری می‌تواند بدون نیاز به تجزیه (Parsing) متن خام، به فراخوانی‌های تایپ‌شده پاسخ دهد.
- ویجت‌های تعاملی: توسعه‌دهندگان می‌توانند با استفاده از کال‌بک
onToolCallو کمکیaddToolOutputویجت‌های تعاملی، مانند کامپوننت‌های آب‌وهوا یا تقویم‌ها را رندر کنند. - بهره‌وری: این سازوکار هزینه پردازشی همگام‌سازی دستی وضعیت (State Synchronization) را حذف می‌کند.
مدیریت وضعیت مجزا
با حذف مدیریت وضعیت داخلی از هوک useChat، ادغام با کتابخانه‌های خارجی مدیریت وضعیت مثل Zustand یا Redux بسیار ساده‌تر شده است. این ماژولار بودن تضمین می‌کند که حتی وقتی سیستم Transport در حال مدیریت جریان سنگین داده‌های هوش مصنوعی است، رابط کاربری همچنان پاسخگو و روان باقی می‌ماند.
این تغییر، نگاه مهندسان به AI در React را عوض می‌کند: مدل زبانی دیگر یک پلاگین فرانت‌اند نیست، بلکه یک سرویس بک‌اند امن است. برای توسعه‌دهنده، این به معنای پایان «تله امنیتی» است؛ جایی که پیش از این، عملکرد سیستم فدای سادگی پیاده‌سازی می‌شد. اثر ثانویه این تحول، حرکت به سمت رابط‌های پیچیده‌تر و چندابزاری است که به جای جعبه‌های متنی ساده، شبیه به اپلیکیشن‌های نیتیو عمل می‌کنند.
گام بعدی شما
- مقداردهی اولیه کلاینت LLM را از هوک‌های
useEffectبه مسیرهای API سمت سرور منتقل کنید. - فراخوانی‌های ابزارهای فعلی خود را با فرمت جدید Typed Stream در مستندات رسمی Vercel تطبیق دهید.
- برای مدیریت وضعیت‌های پیچیده، از ترکیب
useChatبا Zustand استفاده کنید.
اما داستان سخت‌افزاری این تحول حتی شگفت‌انگیزتر است — به تحلیل ما درباره‌ی تراشه‌های Blackwell مراجعه کنید.
گفتگو