Vercel AI SDK v5 дозволяє React-розробникам переносити виклики великих мовних моделей (LLM) на сервер, приховуючи API-ключі та суттєво знижуючи затримку, що виникає під час стрімінгу чанків тексту в браузері. Нова архітектура на основі транспортного рівня також відокремлює обробку стану, завдяки чому UI-код залишається легким, поки SDK керує стрімінгом, історією та викликами інструментів.

Чому старий підхід був недосконалим

Більшість React-чатботів, створених до версії v5, стрімили вихідні дані моделі безпосередньо клієнту. Це змушувало розробників вбудовувати секретний ключ LLM у фронтенд-код, що робило його видимим у мережевому інспекторі браузера. Команди також використовували useState для буферизації кожного вхідного токена, що спричиняло рендеринг при кожному мінімальному чанку. UI мерехтів, а код перетворювався на заплутану суміш колбеків.

Результат: будь-хто міг вкрасти ключ, а розмова гальмувала, поки розробники боролися з низькорівневою логікою управління станом.

Що змінюється «під капотом» у v5

  • Архітектура на основі транспортного рівня – Тепер SDK розглядає з'єднання з LLM як модульний транспортний шар. Виклики походять з API-маршруту на сервері, тому секретний ключ ніколи не залишає бекенд. Транспорт абстрагує протокол стрімінгу, надаючи фронтенду чистий типізований потік повідомлень.

  • Типізовані виклики інструментів – Коли модель вирішує викликати інструмент (наприклад, пошук погоди або отримання даних з календаря), SDK пакує запит у типізоване навантаження. Фронтенд зчитує структуру цього навантаження безпосередньо, що усуває необхідність у ручному парсингу та зменшує кількість помилок під час виконання.

  • Роз’єднане управління станом – Хук useChat більше не нав'язує єдине сховище стану. Він надає колбеки та утиліти, які може використовувати будь-яка бібліотека управління станом — Zustand, Redux або звичайний React context. UI-компоненти зосереджені на рендерингу, тоді як SDK бере на себе всю важку роботу.

Практичний робочий процес

  1. Логіка LLM на стороні сервера – В API-маршруті викличте streamText (або еквівалентний хелпер для стрімінгу). SDK передає вихідні дані моделі клієнту через захищене з'єднання, не випускаючи API-ключ за межі браузера.
  2. UI на стороні клієнта – Імпортуйте useChat у React-компонент. Хук повертає поточний список повідомлень, функцію для надсилання нового вводу користувача та прапорці статусу. Оскільки стан зберігається в іншому місці, ви можете підключити будь-який менеджер стану, який уже використовуєте.
  3. Обробка інструментів – Коли модель генерує виклик інструмента, SDK передає клієнту структурований об'єкт. Відображайте віджет погоди, вибір календаря або будь-який інший кастомний елемент UI без написання коду для ручної синхронізації.

Результатом є чіткий розподіл: сервер відповідає за всі взаємодії з LLM, а клієнт — лише за представлення. Більше ніякого парсингу сирого стріму, жодних випадкових витоків ключів і жодного мерехтіння UI через рендеринг кожного токена.

Хто отримає переваги, а хто може вагатися

На що звернути увагу далі

Підсумок

Vercel AI SDK v5 змінює підхід до розробки React-чатботів, переносячи виклики LLM на сервер, надаючи типізовані дані інструментів і звільняючи фронтенд від низькорівневого маніпулювання станом. Цей перехід вирішує дві найбільші проблеми — витік секретних даних та нестабільний UI — водночас дозволяючи розробникам зберігати контроль над власним стеком управління станом.