Інтеграція AI-чатботів у веб-інтерфейси: від базового API до Streaming-відповідей у Next.js

Поставити ШІ у веб-застосунок – одна з найчастіших фіч сьогодні. Боти підтримки, асистенти: чат уже стандарт. Але чекати 10-30 секунд, поки LLM допише відповідь, убиває UX. Streaming показує слова, як вони народжуються.

Тут: простий JSON vs streaming, і як зібрати чат у реальному часі в Next.js через Server-Sent Events (SSE) і SDK OpenAI.

1. Стандартні JSON-запити проти потокового стримінгу

Коли користувач робить запит до штучного інтелекту, є два основні шляхи отримання відповіді:

• Звичайний Fetch-запит: Клієнт робить запит і чекає. Сервер звертається до API моделі, очікує завершення генерації всієї відповіді, формує JSON і надсилає назад. Результат - тривале очікування користувача та поганий UX.
• Потокова передача (SSE): Сервер відкриває тривале HTTP-з'єднання. Як тільки модель генерує новий токен (слово або його частину), сервер миттєво відправляє його браузеру. Користувач одразу бачить текст, що зводить очікування до мінімуму.

2. Реалізація бекенду в Route Handlers (Next.js)

Next.js App Router підтримує потокову передачу відповідей нативно за допомогою Web Streams. Ось як виглядає спрощений обробник маршруту для стримінгу:

Спочатку ми ініціалізуємо клієнт OpenAI та робимо запит до моделі з прапорцем `stream: true`. Далі ми перетворюємо потік даних від OpenAI у стандартний потік HTTP Response. Браузер зчитує ці чанки (шматочки тексту) в міру їх надходження.

3. Створення клієнтської частини: читання потоку

На фронтенді ми використовуємо стан React для збереження історії повідомлень. Стандартний API `fetch` дозволяє читати потокові дані за допомогою інтерфейсу `ReadableStream`:

• Отримуємо рідер з відповіді сервера. За допомогою циклу `while(true)` зчитуємо нові чанки через `reader.read()`. Декодуємо бінарні дані в текст за допомогою `TextDecoder`.
• Оновлюємо стан повідомлень у реальному часі, додаючи нові слова до останнього повідомлення, що змушує React перерендерити інтерфейс та створювати ефект плавного друку.
• Автоматично прокручуємо чат вниз по мірі появи нового контенту, щоб останні речення завжди були перед очима користувача.

4. Оптимізація та обробка помилок

Створення надійних чат-додатків вимагає уваги до деталей:

• Втрата з'єднання: Реалізуйте логіку повторного підключення та інформаційні повідомлення, якщо мережевий потік несподівано перерветься.
• Скасування запиту: Додайте кнопку «Зупинити генерацію». Використовуйте `AbortController` у Fetch-запиті, щоб повідомити сервер про зупинку та не витрачати кошти на зайві токени API.
• Рендеринг коду та розмітки: Відповіді ШІ часто містять Markdown чи блоки коду. Використовуйте плагіни на кшталт `react-markdown` та бібліотеки підсвічування коду для їх красивого відображення.

Висновок: виведіть UX на новий рівень завдяки потоковому ШІ

Потокова передача відповідей у реальному часі є необхідністю для сучасних веб-додатків із підтримкою ШІ. Використання Server-Sent Events, можливостей Next.js та інтерактивних інтерфейсів на React дозволяє створювати додатки, які відчуваються миттєвими, живими та професійними.

Хочете вбудувати OpenAI, Anthropic чи локальний LLM зі streaming у бізнес-застосунок? Напишіть мені через форму - зберемо це нормально.