ai-sdk-ui

In v5, useChat no longer manages input state, so you create your own useState for input and call sendMessage({ content: input }) on submit. Import it from 'ai/react' and point the api option at your streaming route handler.

This error occurs when the API route does not return a proper data stream response. In App Router return result.toDataStreamResponse(), and in Pages Router use result.pipeDataStreamToResponse(res) instead of a plain Response.

v5 removed input, handleInputChange, and handleSubmit from useChat, replaced append() with sendMessage(), removed onResponse in favor of onFinish, and dropped maxSteps from the client. Input state must now be managed manually with useState.

Yes, useChat works with both routers, but the server-side streaming method differs. Pages Router API handlers use pipeDataStreamToResponse(res), while App Router route handlers return toDataStreamResponse().

Pass an id and initialMessages loaded from localStorage to useChat, then save messages to localStorage in a useEffect whenever they change. The skill includes SSR-safe helper functions and a full persistence template.

Avoid these hooks for backend-only AI logic, which belongs in ai-sdk-core with streamText and generateObject. They also do not cover Generative UI with React Server Components or non-React frameworks like Svelte and Vue.