--- name: ai-sdk-5 description: > 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. license: Apache-2.0 metadata: scope: [root, ui] auto_invoke: "Building AI chat features" allowed-tools: Read, Edit, Write, Glob, Grep, Bash, WebFetch, WebSearch, Task --- ## Breaking Changes from AI SDK 4 ```typescript \/\/ ❌ AI SDK 4 (OLD) import { useChat } from "ai"; const { messages, handleSubmit, input, handleInputChange } = useChat({ api: "\/api\/chat", }); \/\/ ✅ AI SDK 5 (NEW) import { useChat } from "@ai-sdk\/react"; import { DefaultChatTransport } from "ai"; const { messages, sendMessage } = useChat({ transport: new DefaultChatTransport({ api: "\/api\/chat" }), }); ``` ## Client Setup ```typescript import { useChat } from "@ai-sdk\/react"; import { DefaultChatTransport } from "ai"; import { useState } from "react"; export function Chat() { const [input, setInput] = useState(""); const { messages, sendMessage, isLoading, error } = useChat({ transport: new DefaultChatTransport({ api: "\/api\/chat" }), }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!input.trim()) return; sendMessage({ text: input }); setInput(""); }; return (

{messages.map((message) => ( ))} <\/div>

setInput(e.target.value)} placeholder="Type a message..." disabled={isLoading} \/>