ai-sdk-5_skill
198
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill gentleman-programming/gentleman-skills --skill ai-sdk-5- SKILL.md5.4 KB
Overview
This skill documents migration patterns and examples for Vercel AI SDK 5. It highlights breaking changes from v4, client and server usage, streaming, tool integration, LangChain interoperability, and error handling. Use it as a concise reference when upgrading or building AI chat and completion features with the new SDK.
How this skill works
The skill explains how the v5 SDK replaces legacy hooks and payload shapes: useChat now accepts a transport instance instead of an api string, messages use a parts array instead of a single content string, and streaming endpoints return DataStream-compatible responses. It shows client-side state and form handling, server route handlers that stream model responses, tool wiring with zod validation, and converting messages to and from LangChain formats.
When to use it
- Upgrading an existing app from AI SDK v4 to v5
- Building new chat UIs that need streaming and tool calls
- Implementing server-side streaming endpoints for model responses
- Integrating LangChain models with UI message formats
- Adding structured tool calls with parameter validation
Best practices
- Create a DefaultChatTransport or DefaultCompletionTransport and pass it to hooks instead of old api props
- Treat messages as UIMessage with parts; extract text by concatenating text parts
- Return model streams as DataStreamResponse for efficient client updates
- Validate tool parameters with zod and expose tools to streamText for tool-aware generation
- Implement onError handlers to surface errors and offer retry actions
Example use cases
- Simple chat component using useChat with DefaultChatTransport and sendMessage
- Server route that streams model output with streamText and returns toDataStreamResponse
- LangChain route that converts UIMessage parts to HumanMessage/AIMessage and streams back a UI message stream
- Tool-enabled generation that defines tool schemas with zod and returns structured tool results
- Text generation UI using useCompletion and DefaultCompletionTransport to trigger completions
FAQ
Concatenate parts filtered for type 'text' and join their text values to form the message string.
What replaces the old useChat handlers like handleSubmit and input?
useChat now exposes messages, sendMessage, isLoading, and error; manage input state locally and call sendMessage({ text }) on submit.
How do I stream model responses from the server?
Use streamText with the chosen model and messages on the server, then return result.toDataStreamResponse() so the client receives streaming updates.
