ai-sdk-5

Umiejętność zawierająca gotowe wzorce do budowania funkcji AI z Vercel AI SDK v5. Obejmuje implementację czatów, streamowania, wywoływania funkcji oraz obsługę UIMessage parts. Zawiera konkretne przykłady migracji z wersji 4, pokazując zmiany w imporcie (z "ai" na "@ai-sdk/react") i strukturze transportu. Przeznaczona dla developerów pracujących nad interfejsami konwersacyjnymi opartymi na AI.

1. Zainstaluj umiejętność w swoim projekcie Vercel AI SDK v5, upewniając się, że masz dostęp do repozytorium prowler-cloud i możliwość odczytania plików ze ścieżki skills/ai-sdk-5.

2. Zaimportuj wymagane komponenty z nowych pakietów: useChat z "@ai-sdk/react" oraz DefaultChatTransport z "ai". To jest kluczowa zmiana w stosunku do wersji 4, gdzie useChat importowało się bezpośrednio z "ai".

3. Skonfiguruj hook useChat w komponencie React, przekazując transport z DefaultChatTransport i adresem API. Zainicjuj state dla inputu użytkownika za pomocą useState.

4. Zbuduj formularz z polem tekstowym i przyciskiem wysyłania. Powiąż input z state, obsłuż submit poprzez sendMessage z hooka useChat, a następnie wyczyść pole tekstowe.

5. Renderuj listę wiadomości z messages, mapując każdą wiadomość do komponentu Message. Dodaj obsługę stanów isLoading (wyłączenie inputu podczas przetwarzania) i error (wyświetlenie komunikatu błędu).

6. Przetestuj przepływ: wpisz wiadomość, wyślij ją poprzez formularz, sprawdź czy wiadomość pojawia się na liście i czy odpowiedź serwera jest obsługiwana poprawnie.