ai-sdk-5
Vercel AI SDK 5 patterns. Trigger: When building AI features with AI SDK v5 (chat, streaming, tools/function calling, UIMessage parts), including migration from v4.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Vercel AI SDK 5 patterns. Trigger: When building AI features with AI SDK v5 (chat, streaming, tools/function calling, UIMessage parts), including migration from v4.
How to use
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.
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".
Skonfiguruj hook useChat w komponencie React, przekazując transport z DefaultChatTransport i adresem API. Zainicjuj state dla inputu użytkownika za pomocą useState.
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.
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).
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.