vercel · Vercel AI SDK Docs
AI SDK UI: Chatbot Resume Streams
The provided content contains only technical boilerplate code for protecting code blocks from 1Password DOM flattening and does not contain the actual documentation content for Chatbot Resume Streams.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
AI SDK UI: Chatbot Resume Streams
The provided content contains only technical boilerplate code for protecting code blocks from 1Password DOM flattening and does not contain the actual documentation content for Chatbot Resume Streams.
When To Use
Use when you need to implement a mechanism to prevent password managers from flattening or corrupting code block DOM structures in a web application.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/ai-sdk-ui-chatbot-resume-streams-workflow-guide.md | A guide explaining how to implement stream resumption in the AI SDK UI to maintain ongoing generations after page reloads. | Questions about a guide explaining how to implement stream resumption in the AI SDK UI to maintain ongoing generations after page rel... |
examples/ai-sdk-ui-chatbot-resume-streams-react-component.text | A React client component demonstrating how to use the useChat hook to resume chat streams using existing message data. | Exact payloads, commands, or snippets shown in A React client component demonstrating how to use the useChat hook to resume chat streams using existing message data. |
examples/ai-sdk-ui-chatbot-resume-streams-nextjs.text | A Next.js route handler implementation demonstrating how to use resumable streams to resume chatbot message generation. | Exact payloads, commands, or snippets shown in A Next.js route handler implementation demonstrating how to use resumable streams to resume chatbot message generation. |
examples/ai-sdk-ui-chatbot-resume-streams-nextjs-route-handler.text | A Next.js route handler implementation demonstrating how to resume chat message streams using the AI SDK UI. | Exact payloads, commands, or snippets shown in A Next.js route handler implementation demonstrating how to resume chat message streams using the AI SDK UI. |
examples/ai-sdk-ui-chatbot-resume-streams-react.text | A React component implementation demonstrating how to use the useChat hook with the resume property to restore chat state and handle stream reconnection. | Exact payloads, commands, or snippets shown in A React component implementation demonstrating how to use the useChat hook with the resume property to restore chat s... |
What This Skill Covers
- useChat supports resuming ongoing streams after page reloads. Use this feature to build applications with long-running generations.
- Main sections:
How stream resumption works,Prerequisites,Implementation,1. Client-side: Enable stream resumption,2. Create the POST handler.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://ai-sdk.dev/docs/ai-sdk-ui/chatbot-resume-streams