Integracja chatbotów AI z aplikacjami internetowymi: od podstawowego API do przesyłania strumieniowego odpowiedzi w Next.js

Integracja sztucznej inteligencji z aplikacjami internetowymi to obecnie jedna z najbardziej pożądanych funkcji. Od zautomatyzowanych botów obsługi klienta po inteligentnych asystentów osobistych – interfejsy czatu stają się standardem. Jednak oczekiwanie na wygenerowanie pełnej odpowiedzi przez LLM może zająć od 10 do 30 sekund, co powoduje pogorszenie komfortu użytkowania. Generowanie odpowiedzi strumieniowo rozwiązuje ten problem, wyświetlając słowa w trakcie ich generowania.

W tym artykule zbadamy różnice między prostymi odpowiedziami JSON a streamingiem i dowiemy się, jak zbudować interfejs chatbota w czasie rzeczywistym w Next.js przy użyciu zdarzeń wysyłanych przez serwer (SSE) i OpenAI SDK.

1. Połączenia standardowe JSON API a transmisja strumieniowa w czasie rzeczywistym

Gdy użytkownik wyzwala żądanie sztucznej inteligencji, można zastosować dwa główne podejścia do dostarczenia odpowiedzi:

• Standard JSON Fetch: Klient wysyła żądanie i czeka. Serwer komunikuje się z OpenAI, czeka na zakończenie całego zdania, kompiluje je w blok JSON i odsyła. Powoduje to długi wskaźnik ładowania i wysokie współczynniki odrzuceń.
• Przesyłanie strumieniowe ze zdarzeniami wysłanymi przez serwer (SSE): Serwer otwiera trwałe połączenie HTTP. Gdy tylko model AI wygeneruje nowy token (słowo lub jego część), serwer wypycha go do przeglądarki. Użytkownik widzi tekst pojawiający się natychmiast, co skraca postrzegany czas ładowania do milisekund.

2. Implementacja backendu w Next.js procedurach obsługi tras

Next.js App Router obsługuje natywnie przesyłanie strumieniowe odpowiedzi za pomocą strumieni internetowych. Oto jak wygląda uproszczony moduł obsługi tras do przesyłania strumieniowego:

Najpierw konfigurujemy klienta OpenAI i uruchamiamy zakończenie czatu flagą `stream: true`. Następnie przekształcamy czytelny strumień OpenAI w standardowy strumień odpowiedzi HTTP. Przeglądarka odczytuje fragmenty i przetwarza je na bieżąco.

3. Budowanie interfejsu czatu i strumienia przetwarzania na kliencie

W interfejsie używamy stanu React do przechowywania wiadomości i zarządzania strumieniem odpowiedzi. Standardowe `fetch` API umożliwia odczytywanie danych przesyłanych strumieniowo za pomocą czytnika `ReadableStream`:

• Przeczytaj czytnik treści odpowiedzi. Używając pętli `while(true)`, czytaj przychodzące fragmenty za pomocą `reader.read()`. Zdekoduj te fragmenty binarne na ciągi tekstowe za pomocą `TextDecoder`.
• Aktualizuj stan wiadomości w czasie rzeczywistym, dołączając nowe tokeny do ostatniej wiadomości po ich otrzymaniu, co powoduje, że React ponownie renderuje i dynamicznie wyświetla strumień słów.
• Podczas drukowania nowej zawartości automatycznie przewijaj do dołu kontenera czatu, dzięki czemu użytkownik zawsze widzi najnowsze linie.

4. Obsługa przypadków brzegowych i zarządzanie błędami

Tworzenie aplikacji do czatu klasy produkcyjnej wymaga szczególnej dbałości o szczegóły:

• Przerwy w połączeniu: Zaimplementuj logikę ponownego połączenia i stany alertów, jeśli strumień HTTP zostanie nieoczekiwanie przerwany podczas generowania.
• Przerwij żądania: w interfejsie użytkownika udostępnij przycisk „Zatrzymaj generowanie”. Użyj `AbortController` w swoich żądaniach pobrania, aby poinformować serwer, aby anulował żądanie LLM i przestał marnować API koszty.
• Markdown i renderowanie kodu: odpowiedzi LLM często zawierają tabele Markdown lub sformatowane bloki kodu. Użyj komponentów takich jak `react-markdown` i podświetlania składni, aby renderować układy strukturalne.

Wniosek: ulepsz swój UX dzięki strumieniowej sztucznej inteligencji

Przesyłanie strumieniowe odpowiedzi w czasie rzeczywistym jest koniecznością w przypadku nowoczesnych aplikacji internetowych opartych na sztucznej inteligencji. Wykorzystując zdarzenia wysyłane przez serwer, strumieniowanie tras Next.js i responsywne kontenery czatu React, możesz tworzyć interaktywne interfejsy, które sprawiają wrażenie szybkich, żywych i dopracowanych.

Chcesz zintegrować rozwiązania OpenAI, Anthropic lub niestandardowe rozwiązania lokalne LLM z funkcjami przesyłania strumieniowego ze swoją aplikacją biznesową? Skontaktuj się za pomocą poniższego formularza kontaktowego i zbudujmy go poprawnie!