[{"id":"/docs/ai-sdk-ui/overview","type":"page","content":"Overview","breadcrumbs":["Docs","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"Overview"}],"url":"/docs/ai-sdk-ui/overview"},{"id":"/docs/ai-sdk-ui/overview-12","content":"useChat","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}}],"type":"text","url":"/docs/ai-sdk-ui/overview#ui-framework-support"},{"id":"/docs/ai-sdk-ui/overview-6","content":"useChat offers real-time streaming of chat messages and manages message, loading, and error state. Manage input state in your component for seamless integration into any UI design.","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" offers real-time streaming of chat messages and manages message, loading, and error state. Manage input state in your component for seamless integration into any UI design."}],"type":"text","url":"/docs/ai-sdk-ui/overview"},{"id":"/docs/ai-sdk-ui/overview-5","content":"AI SDK UI provides robust abstractions that simplify the complex tasks of managing chat streams and UI updates on the frontend, enabling you to develop dynamic AI-driven interfaces more efficiently. With three main hooks — useChat, useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app.","contentWithHighlights":[{"type":"text","content":"AI SDK UI provides robust abstractions that simplify the complex tasks of managing chat streams and UI updates on the frontend, enabling you to develop dynamic AI-driven interfaces more efficiently. With three main hooks — "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app."}],"type":"text","url":"/docs/ai-sdk-ui/overview"},{"id":"/docs/getting-started/navigating-the-library","type":"page","content":"Navigating the Library","breadcrumbs":["Docs","Getting Started"],"contentWithHighlights":[{"type":"text","content":"Navigating the Library"}],"url":"/docs/getting-started/navigating-the-library"},{"id":"/docs/getting-started/navigating-the-library-45","content":"useChat","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}}],"type":"text","url":"/docs/getting-started/navigating-the-library#ai-sdk-ui-framework-compatibility"},{"id":"/docs/getting-started/navigating-the-library-46","content":"useChat tool calling","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" tool calling"}],"type":"text","url":"/docs/getting-started/navigating-the-library#ai-sdk-ui-framework-compatibility"},{"id":"/docs/getting-started/navigating-the-library-19","content":"Build streaming chat and generative UIs (e.g. useChat)","contentWithHighlights":[{"type":"text","content":"Build streaming chat and generative UIs (e.g. "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":")"}],"type":"text","url":"/docs/getting-started/navigating-the-library#choosing-the-right-tool-for-your-environment"},{"id":"/docs/troubleshooting/react-maximum-update-depth-exceeded","type":"page","content":"React error \"Maximum update depth exceeded\"","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"React error \"Maximum update depth exceeded\""}],"url":"/docs/troubleshooting/react-maximum-update-depth-exceeded"},{"id":"/docs/troubleshooting/react-maximum-update-depth-exceeded-4","content":"useChat","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}}],"type":"heading","url":"/docs/troubleshooting/react-maximum-update-depth-exceeded#usechat"},{"id":"/docs/troubleshooting/react-maximum-update-depth-exceeded-6","content":"I am using the AI SDK in a React project with the useChat or useCompletion hooks\nand I get the following error when AI responses stream in: Maximum update depth exceeded.","contentWithHighlights":[{"type":"text","content":"I am using the AI SDK in a React project with the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" or useCompletion hooks\nand I get the following error when AI responses stream in: Maximum update depth exceeded."}],"type":"text","url":"/docs/troubleshooting/react-maximum-update-depth-exceeded#issue"},{"id":"/docs/reference/ai-sdk-ui","type":"page","content":"AI SDK UI","breadcrumbs":["Docs","Reference","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"AI SDK UI"}],"url":"/docs/reference/ai-sdk-ui"},{"id":"/docs/reference/ai-sdk-ui-6","content":"useChat","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}}],"type":"text","url":"/docs/reference/ai-sdk-ui#ui-framework-support"},{"id":"/docs/reference/ai-sdk-ui/use-chat","type":"page","content":"useChat","breadcrumbs":["Docs","Reference","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}}],"url":"/docs/reference/ai-sdk-ui/use-chat"},{"id":"/docs/reference/ai-sdk-ui/use-chat-0","content":"API reference for the useChat hook.","contentWithHighlights":[{"type":"text","content":"API reference for the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook."}],"type":"text","url":"/docs/reference/ai-sdk-ui/use-chat"},{"id":"/docs/reference/ai-sdk-ui/use-chat-8","content":"The useChat API has been significantly updated in AI SDK 5.0. It now uses a\ntransport-based architecture and no longer manages input state internally. See\nthe migration\nguide for\ndetails.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" API has been significantly updated in AI SDK 5.0. It now uses a\ntransport-based architecture and no longer manages input state internally. See\nthe migration\nguide for\ndetails."}],"type":"text","url":"/docs/reference/ai-sdk-ui/use-chat"},{"id":"/docs/reference/ai-sdk-ui/use-chat-10","content":"Each useChat({ chat }) call subscribes independently. Consumers sharing a Chat\ncan display different message snapshots when they use different throttle intervals.\nA functional setMessages updater receives the Chat's latest messages, which may be\nnewer than the messages in the current render.","contentWithHighlights":[{"type":"text","content":"Each "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"({ chat }) call subscribes independently. Consumers sharing a Chat\ncan display different message snapshots when they use different throttle intervals.\nA functional setMessages updater receives the Chat's latest messages, which may be\nnewer than the messages in the current render."}],"type":"text","url":"/docs/reference/ai-sdk-ui/use-chat#react-rendering-and-shared-chat-instances"},{"id":"/docs/migration-guides/migration-guide-4-0","type":"page","content":"Migrate AI SDK 3.4 to 4.0","breadcrumbs":["Docs","Migration Guides"],"contentWithHighlights":[{"type":"text","content":"Migrate AI SDK 3.4 to 4.0"}],"url":"/docs/migration-guides/migration-guide-4-0"},{"id":"/docs/migration-guides/migration-guide-4-0-50","content":"useChat hook","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook"}],"type":"heading","url":"/docs/migration-guides/migration-guide-4-0#usechat-hook"},{"id":"/docs/migration-guides/migration-guide-4-0-280","content":"useChat hook","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook"}],"type":"text","url":"/docs/migration-guides/migration-guide-4-0#codemod-table"},{"id":"/docs/migration-guides/migration-guide-4-0-168","content":"The following options have been removed from the useChat hook:","contentWithHighlights":[{"type":"text","content":"The following options have been removed from the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook:"}],"type":"text","url":"/docs/migration-guides/migration-guide-4-0#replaced-roundtrip-setting-with-maxsteps"},{"id":"/docs/migration-guides/migration-guide-4-0-174","content":"The experimental_addToolResult method has been removed from the useChat hook.\nPlease use the addToolResult method instead.","contentWithHighlights":[{"type":"text","content":"The experimental_addToolResult method has been removed from the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook.\nPlease use the addToolResult method instead."}],"type":"text","url":"/docs/migration-guides/migration-guide-4-0#removed-experimental_addtoolresult-method"},{"id":"/docs/migration-guides/migration-guide-4-0-167","content":"The streamMode options has been removed from the useChat hook.\nPlease use the streamProtocol parameter instead.","contentWithHighlights":[{"type":"text","content":"The streamMode options has been removed from the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook.\nPlease use the streamProtocol parameter instead."}],"type":"text","url":"/docs/migration-guides/migration-guide-4-0#removed-streammode-setting"},{"id":"/docs/migration-guides/migration-guide-4-0-173","content":"The options parameter in the useChat hook has been removed.\nPlease use the headers and body parameters instead.","contentWithHighlights":[{"type":"text","content":"The options parameter in the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook has been removed.\nPlease use the headers and body parameters instead."}],"type":"text","url":"/docs/migration-guides/migration-guide-4-0#removed-options-setting"},{"id":"/docs/migration-guides/migration-guide-4-0-190","content":"The legacy function_call and tools options have been removed from useChat and Message.\nThe name property from the Message type has been removed.\nPlease use the AI SDK Core tool calling instead.","contentWithHighlights":[{"type":"text","content":"The legacy function_call and tools options have been removed from "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and Message.\nThe name property from the Message type has been removed.\nPlease use the AI SDK Core tool calling instead."}],"type":"text","url":"/docs/migration-guides/migration-guide-4-0#removed-2x-legacy-function-and-tool-calling"},{"id":"/docs/migration-guides/migration-guide-5-0","type":"page","content":"Migrate AI SDK 4.x to 5.0","breadcrumbs":["Docs","Migration Guides"],"contentWithHighlights":[{"type":"text","content":"Migrate AI SDK 4.x to 5.0"}],"url":"/docs/migration-guides/migration-guide-5-0"},{"id":"/docs/migration-guides/migration-guide-5-0-50","content":"useChat Changes","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" Changes"}],"type":"heading","url":"/docs/migration-guides/migration-guide-5-0#usechat-changes"},{"id":"/docs/migration-guides/migration-guide-5-0-71","content":"useChat Replaced with Chat Class","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" Replaced with Chat Class"}],"type":"heading","url":"/docs/migration-guides/migration-guide-5-0#usechat-replaced-with-chat-class"},{"id":"/docs/migration-guides/migration-guide-5-0-222","content":"The onResponse callback has been removed from useChat and useCompletion.","contentWithHighlights":[{"type":"text","content":"The onResponse callback has been removed from "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and useCompletion."}],"type":"text","url":"/docs/migration-guides/migration-guide-5-0#onresponse-removal"},{"id":"/docs/migration-guides/migration-guide-5-0-234","content":"The maxSteps parameter has been removed from the Chat component and useChat hook","contentWithHighlights":[{"type":"text","content":"The maxSteps parameter has been removed from the Chat component and "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook"}],"type":"text","url":"/docs/migration-guides/migration-guide-5-0#tool-result-submission-changes"},{"id":"/docs/migration-guides/migration-guide-5-0-242","content":"You can also access your metadata from the onFinish callback of useChat:","contentWithHighlights":[{"type":"text","content":"You can also access your metadata from the onFinish callback of "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":":"}],"type":"text","url":"/docs/migration-guides/migration-guide-5-0#usage-information"},{"id":"/docs/migration-guides/migration-guide-5-0-219","content":"The useChat hook no longer manages input state internally. You must now manage input state manually.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook no longer manages input state internally. You must now manage input state manually."}],"type":"text","url":"/docs/migration-guides/migration-guide-5-0#removed-managed-input-state"},{"id":"/docs/migration-guides/migration-guide-5-0-244","content":"The Vue.js integration has been completely restructured, replacing the useChat composable with a Chat class.","contentWithHighlights":[{"type":"text","content":"The Vue.js integration has been completely restructured, replacing the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" composable with a Chat class."}],"type":"text","url":"/docs/migration-guides/migration-guide-5-0#ai-sdkvue-changes"},{"id":"/docs/migration-guides/migration-guide-5-0-215","content":"In v4, you could share chat state between components by using the same id parameter in multiple useChat hooks.","contentWithHighlights":[{"type":"text","content":"In v4, you could share chat state between components by using the same id parameter in multiple "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hooks."}],"type":"text","url":"/docs/migration-guides/migration-guide-5-0#sharing-chat-instances"},{"id":"/docs/troubleshooting/ontoolcall-type-narrowing","type":"page","content":"Type Error with onToolCall","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"Type Error with onToolCall"}],"url":"/docs/troubleshooting/ontoolcall-type-narrowing"},{"id":"/docs/troubleshooting/ontoolcall-type-narrowing-14","content":"useChat Reference","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" Reference"}],"type":"text","url":"/docs/troubleshooting/ontoolcall-type-narrowing#related"},{"id":"/providers/community-providers/cencori","type":"page","content":"Cencori","breadcrumbs":["Docs","Community Providers"],"contentWithHighlights":[{"type":"text","content":"Cencori"}],"url":"/providers/community-providers/cencori"},{"id":"/providers/community-providers/cencori-10","content":"useChat Hook","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" Hook"}],"type":"heading","url":"/providers/community-providers/cencori#usechat-hook"},{"id":"/docs/agents/tool-approvals","type":"page","content":"Tool Approvals","breadcrumbs":["Docs","Agents"],"contentWithHighlights":[{"type":"text","content":"Tool Approvals"}],"url":"/docs/agents/tool-approvals"},{"id":"/docs/agents/tool-approvals-7","content":"Use with useChat","contentWithHighlights":[{"type":"text","content":"Use with "},{"type":"text","content":"useChat","styles":{"highlight":true}}],"type":"heading","url":"/docs/agents/tool-approvals#use-with-usechat"},{"id":"/docs/agents/tool-approvals-48","content":"In the standard useChat pattern, the server rebuilds the conversation from the messages the client sends each turn. The server does not persist conversation state between requests. This means the message history is client-controlled input.","contentWithHighlights":[{"type":"text","content":"In the standard "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" pattern, the server rebuilds the conversation from the messages the client sends each turn. The server does not persist conversation state between requests. This means the message history is client-controlled input."}],"type":"text","url":"/docs/agents/tool-approvals#trust-model"},{"id":"/docs/troubleshooting/use-chat-tools-no-response","type":"page","content":"useChat No Response","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" No Response"}],"url":"/docs/troubleshooting/use-chat-tools-no-response"},{"id":"/docs/troubleshooting/use-chat-tools-no-response-3","content":"I am using useChat.\nWhen I log the incoming messages on the server, I can see the tool call and the tool result, but the model does not respond with anything.","contentWithHighlights":[{"type":"text","content":"I am using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":".\nWhen I log the incoming messages on the server, I can see the tool call and the tool result, but the model does not respond with anything."}],"type":"text","url":"/docs/troubleshooting/use-chat-tools-no-response#issue"},{"id":"/docs/reference/ai-sdk-core/dynamic-tool","type":"page","content":"dynamicTool","breadcrumbs":["Docs","Reference","AI SDK Core"],"contentWithHighlights":[{"type":"text","content":"dynamicTool"}],"url":"/docs/reference/ai-sdk-core/dynamic-tool"},{"id":"/docs/reference/ai-sdk-core/dynamic-tool-6","content":"Usage with useChat","contentWithHighlights":[{"type":"text","content":"Usage with "},{"type":"text","content":"useChat","styles":{"highlight":true}}],"type":"heading","url":"/docs/reference/ai-sdk-core/dynamic-tool#usage-with-usechat"},{"id":"/docs/reference/ai-sdk-core/dynamic-tool-15","content":"When used with useChat (UIMessage format), dynamic tools appear as dynamic-tool parts:","contentWithHighlights":[{"type":"text","content":"When used with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" (UIMessage format), dynamic tools appear as dynamic-tool parts:"}],"type":"text","url":"/docs/reference/ai-sdk-core/dynamic-tool#usage-with-usechat"},{"id":"/docs/ai-sdk-harnesses/harness-agent","type":"page","content":"HarnessAgent","breadcrumbs":["Docs","AI SDK Harnesses"],"contentWithHighlights":[{"type":"text","content":"HarnessAgent"}],"url":"/docs/ai-sdk-harnesses/harness-agent"},{"id":"/docs/ai-sdk-harnesses/harness-agent-96","content":"UI for useChat integration.","contentWithHighlights":[{"type":"text","content":"UI for "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" integration."}],"type":"text","url":"/docs/ai-sdk-harnesses/harness-agent#next-steps"},{"id":"/docs/ai-sdk-harnesses/overview","type":"page","content":"Overview","breadcrumbs":["Docs","AI SDK Harnesses"],"contentWithHighlights":[{"type":"text","content":"Overview"}],"url":"/docs/ai-sdk-harnesses/overview"},{"id":"/docs/ai-sdk-harnesses/overview-37","content":"UI for useChat routes.","contentWithHighlights":[{"type":"text","content":"UI for "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" routes."}],"type":"text","url":"/docs/ai-sdk-harnesses/overview#next-steps"},{"id":"/docs/ai-sdk-harnesses/overview-9","content":"The two abstractions are decoupled, but they use compatible primitives where\npossible. Harness output is projected into AI SDK stream and response types, so\nsurfaces that consume AI SDK model streams can also consume harness streams. For\nexample, you can pass a HarnessAgent stream to toUIMessageStream and render\nit with useChat. The API is designed to feel familiar to AI SDK users, but\nharness runtimes have different concepts from lower-level language models.\nConfiguration follows AI SDK patterns where they fit and diverges where the\nharness runtime has different behavior.","contentWithHighlights":[{"type":"text","content":"The two abstractions are decoupled, but they use compatible primitives where\npossible. Harness output is projected into AI SDK stream and response types, so\nsurfaces that consume AI SDK model streams can also consume harness streams. For\nexample, you can pass a HarnessAgent stream to toUIMessageStream and render\nit with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":". The API is designed to feel familiar to AI SDK users, but\nharness runtimes have different concepts from lower-level language models.\nConfiguration follows AI SDK patterns where they fit and diverges where the\nharness runtime has different behavior."}],"type":"text","url":"/docs/ai-sdk-harnesses/overview"},{"id":"/docs/troubleshooting/use-chat-an-error-occurred","type":"page","content":"useChat \"An error occurred\"","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" \"An error occurred\""}],"url":"/docs/troubleshooting/use-chat-an-error-occurred"},{"id":"/docs/troubleshooting/use-chat-an-error-occurred-0","content":"Troubleshooting errors related to the \"An error occurred\" error in useChat.","contentWithHighlights":[{"type":"text","content":"Troubleshooting errors related to the \"An error occurred\" error in "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/troubleshooting/use-chat-an-error-occurred"},{"id":"/docs/troubleshooting/use-chat-an-error-occurred-4","content":"I am using useChat and I get the error \"An error occurred\".","contentWithHighlights":[{"type":"text","content":"I am using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and I get the error \"An error occurred\"."}],"type":"text","url":"/docs/troubleshooting/use-chat-an-error-occurred#issue"},{"id":"/docs/reference/ai-sdk-workflow/workflow-chat-transport","type":"page","content":"WorkflowChatTransport","breadcrumbs":["Docs","Reference","AI SDK Workflow"],"contentWithHighlights":[{"type":"text","content":"WorkflowChatTransport"}],"url":"/docs/reference/ai-sdk-workflow/workflow-chat-transport"},{"id":"/docs/reference/ai-sdk-workflow/workflow-chat-transport-15","content":"Basic Usage with useChat","contentWithHighlights":[{"type":"text","content":"Basic Usage with "},{"type":"text","content":"useChat","styles":{"highlight":true}}],"type":"heading","url":"/docs/reference/ai-sdk-workflow/workflow-chat-transport#basic-usage-with-usechat"},{"id":"/docs/reference/ai-sdk-workflow/workflow-chat-transport-18","content":"A ChatTransport implementation for useChat that enables automatic stream reconnection for workflow-based chat apps. It posts messages to a chat endpoint, extracts the x-workflow-run-id response header, and reconnects to a /{runId}/stream endpoint on interruption (network failures, page refreshes, function timeouts).","contentWithHighlights":[{"type":"text","content":"A ChatTransport implementation for "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" that enables automatic stream reconnection for workflow-based chat apps. It posts messages to a chat endpoint, extracts the x-workflow-run-id response header, and reconnects to a /{runId}/stream endpoint on interruption (network failures, page refreshes, function timeouts)."}],"type":"text","url":"/docs/reference/ai-sdk-workflow/workflow-chat-transport"},{"id":"/docs/migration-guides/migration-guide-3-3","type":"page","content":"Migrate AI SDK 3.2 to 3.3","breadcrumbs":["Docs","Migration Guides"],"contentWithHighlights":[{"type":"text","content":"Migrate AI SDK 3.2 to 3.3"}],"url":"/docs/migration-guides/migration-guide-3-3"},{"id":"/docs/migration-guides/migration-guide-3-3-16","content":"Fix useChat's reload function, now correctly sending data, body, and headers.","contentWithHighlights":[{"type":"text","content":"Fix "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"'s reload function, now correctly sending data, body, and headers."}],"type":"text","url":"/docs/migration-guides/migration-guide-3-3#ai-sdk-ui-improvements"},{"id":"/docs/migration-guides/migration-guide-3-3-34","content":"Svelte: Added tool calling support to useChat.","contentWithHighlights":[{"type":"text","content":"Svelte: Added tool calling support to "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/migration-guides/migration-guide-3-3#ui-framework-support-expansion"},{"id":"/docs/migration-guides/migration-guide-3-3-20","content":"Added onFinish to useChat hook for access to token usage and finish reason.","contentWithHighlights":[{"type":"text","content":"Added onFinish to "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook for access to token usage and finish reason."}],"type":"text","url":"/docs/migration-guides/migration-guide-3-3#ai-sdk-ui-improvements"},{"id":"/docs/migration-guides/migration-guide-3-3-31","content":"SolidJS: Updated useChat and useCompletion to achieve feature parity with React implementations.","contentWithHighlights":[{"type":"text","content":"SolidJS: Updated "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and useCompletion to achieve feature parity with React implementations."}],"type":"text","url":"/docs/migration-guides/migration-guide-3-3#ui-framework-support-expansion"},{"id":"/docs/migration-guides/migration-guide-3-3-14","content":"Enhanced useChat with experimental support for attachments and streaming tool calls, providing more versatile chat functionalities.","contentWithHighlights":[{"type":"text","content":"Enhanced "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" with experimental support for attachments and streaming tool calls, providing more versatile chat functionalities."}],"type":"text","url":"/docs/migration-guides/migration-guide-3-3#ai-sdk-ui-improvements"},{"id":"/docs/migration-guides/migration-guide-3-3-15","content":"Patched useChat to prevent empty submissions, improving the quality of user interactions by ensuring that only intended inputs are processed.","contentWithHighlights":[{"type":"text","content":"Patched "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" to prevent empty submissions, improving the quality of user interactions by ensuring that only intended inputs are processed."}],"type":"text","url":"/docs/migration-guides/migration-guide-3-3#ai-sdk-ui-improvements"},{"id":"/docs/migration-guides/migration-guide-3-3-18","content":"Documented the stream data protocol for useChat and useCompletion, allowing developers to use these functions with any backend. The stream data protocol also enables the use of custom frontends with streamText.","contentWithHighlights":[{"type":"text","content":"Documented the stream data protocol for "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and useCompletion, allowing developers to use these functions with any backend. The stream data protocol also enables the use of custom frontends with streamText."}],"type":"text","url":"/docs/migration-guides/migration-guide-3-3#ai-sdk-ui-improvements"},{"id":"/docs/ai-sdk-core/tools-and-tool-calling","type":"page","content":"Tool Calling","breadcrumbs":["Docs","AI SDK Core"],"contentWithHighlights":[{"type":"text","content":"Tool Calling"}],"url":"/docs/ai-sdk-core/tools-and-tool-calling"},{"id":"/docs/ai-sdk-core/tools-and-tool-calling-10","content":"Tool Execution Approval with useChat","contentWithHighlights":[{"type":"text","content":"Tool Execution Approval with "},{"type":"text","content":"useChat","styles":{"highlight":true}}],"type":"heading","url":"/docs/ai-sdk-core/tools-and-tool-calling#tool-execution-approval-with-usechat"},{"id":"/docs/ai-sdk-core/tools-and-tool-calling-104","content":"When using useChat, the approval flow is handled through UI state. See Chatbot Tool Usage for details on handling approvals in your UI with addToolApprovalResponse.","contentWithHighlights":[{"type":"text","content":"When using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", the approval flow is handled through UI state. See Chatbot Tool Usage for details on handling approvals in your UI with addToolApprovalResponse."}],"type":"text","url":"/docs/ai-sdk-core/tools-and-tool-calling#tool-execution-approval-with-usechat"},{"id":"/docs/troubleshooting/repeated-assistant-messages","type":"page","content":"Repeated assistant messages in useChat","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"Repeated assistant messages in "},{"type":"text","content":"useChat","styles":{"highlight":true}}],"url":"/docs/troubleshooting/repeated-assistant-messages"},{"id":"/docs/troubleshooting/repeated-assistant-messages-0","content":"Troubleshooting duplicate assistant messages when using useChat with streamText","contentWithHighlights":[{"type":"text","content":"Troubleshooting duplicate assistant messages when using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" with streamText"}],"type":"text","url":"/docs/troubleshooting/repeated-assistant-messages"},{"id":"/docs/troubleshooting/repeated-assistant-messages-4","content":"When using useChat with streamText on the server, the assistant's messages appear duplicated in the UI - showing both the previous message and the new message, or showing the same message multiple times. This can occur when using tool calls or complex message flows.","contentWithHighlights":[{"type":"text","content":"When using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" with streamText on the server, the assistant's messages appear duplicated in the UI - showing both the previous message and the new message, or showing the same message multiple times. This can occur when using tool calls or complex message flows."}],"type":"text","url":"/docs/troubleshooting/repeated-assistant-messages#issue"},{"id":"/docs/troubleshooting/use-chat-failed-to-parse-stream","type":"page","content":"useChat Failed to Parse Stream","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" Failed to Parse Stream"}],"url":"/docs/troubleshooting/use-chat-failed-to-parse-stream"},{"id":"/docs/troubleshooting/use-chat-failed-to-parse-stream-6","content":"You can switch useChat and useCompletion to raw text stream processing with the streamProtocol parameter.\nSet it to text as follows:","contentWithHighlights":[{"type":"text","content":"You can switch "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and useCompletion to raw text stream processing with the streamProtocol parameter.\nSet it to text as follows:"}],"type":"text","url":"/docs/troubleshooting/use-chat-failed-to-parse-stream#solution"},{"id":"/docs/troubleshooting/use-chat-failed-to-parse-stream-4","content":"I am using useChat or useCompletion, and I am getting a \"Failed to parse stream string. Invalid code\" error. I am using version 3.0.20 or newer of the AI SDK.","contentWithHighlights":[{"type":"text","content":"I am using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" or useCompletion, and I am getting a \"Failed to parse stream string. Invalid code\" error. I am using version 3.0.20 or newer of the AI SDK."}],"type":"text","url":"/docs/troubleshooting/use-chat-failed-to-parse-stream#issue"},{"id":"/docs/troubleshooting/use-chat-failed-to-parse-stream-5","content":"The AI SDK has switched to the stream data protocol in version 3.0.20.\nuseChat and useCompletion expect stream parts that support data, tool calls, etc.\nWhat you see is a failure to parse the stream.\nThis can be caused by using an older version of the AI SDK in the backend, by providing a text stream using a custom provider, or by using a raw LangChain stream result.","contentWithHighlights":[{"type":"text","content":"The AI SDK has switched to the stream data protocol in version 3.0.20.\n"},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and useCompletion expect stream parts that support data, tool calls, etc.\nWhat you see is a failure to parse the stream.\nThis can be caused by using an older version of the AI SDK in the backend, by providing a text stream using a custom provider, or by using a raw LangChain stream result."}],"type":"text","url":"/docs/troubleshooting/use-chat-failed-to-parse-stream#background"},{"id":"/docs/troubleshooting/use-chat-stale-body-data","type":"page","content":"Stale body values with useChat","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"Stale body values with "},{"type":"text","content":"useChat","styles":{"highlight":true}}],"url":"/docs/troubleshooting/use-chat-stale-body-data"},{"id":"/docs/troubleshooting/use-chat-stale-body-data-0","content":"Troubleshooting stale values when passing information via the body parameter of useChat","contentWithHighlights":[{"type":"text","content":"Troubleshooting stale values when passing information via the body parameter of "},{"type":"text","content":"useChat","styles":{"highlight":true}}],"type":"text","url":"/docs/troubleshooting/use-chat-stale-body-data"},{"id":"/docs/troubleshooting/use-chat-stale-body-data-6","content":"When using useChat and passing dynamic information via the body parameter at the hook level, the data remains stale and only reflects the value from the initial component render. This occurs because the body configuration is captured once when the hook is initialized and doesn't update with subsequent component re-renders.","contentWithHighlights":[{"type":"text","content":"When using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and passing dynamic information via the body parameter at the hook level, the data remains stale and only reflects the value from the initial component render. This occurs because the body configuration is captured once when the hook is initialized and doesn't update with subsequent component re-renders."}],"type":"text","url":"/docs/troubleshooting/use-chat-stale-body-data#issue"},{"id":"/cookbook/next/send-custom-body-from-use-chat","type":"page","content":"Send Custom Body from useChat","breadcrumbs":["Docs","Next.js"],"contentWithHighlights":[{"type":"text","content":"Send Custom Body from "},{"type":"text","content":"useChat","styles":{"highlight":true}}],"url":"/cookbook/next/send-custom-body-from-use-chat"},{"id":"/cookbook/next/send-custom-body-from-use-chat-0","content":"Learn how to send a custom body from the useChat hook using the AI SDK and Next.js","contentWithHighlights":[{"type":"text","content":"Learn how to send a custom body from the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook using the AI SDK and Next.js"}],"type":"text","url":"/cookbook/next/send-custom-body-from-use-chat"},{"id":"/cookbook/next/send-custom-body-from-use-chat-5","content":"By default, useChat sends all messages as well as information from the request to the server.\nHowever, it is often desirable to control the entire body content that is sent to the server, e.g. to:","contentWithHighlights":[{"type":"text","content":"By default, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" sends all messages as well as information from the request to the server.\nHowever, it is often desirable to control the entire body content that is sent to the server, e.g. to:"}],"type":"text","url":"/cookbook/next/send-custom-body-from-use-chat"},{"id":"/cookbook/next/use-shared-chat-context","type":"page","content":"Share useChat State Across Components","breadcrumbs":["Docs","Next.js"],"contentWithHighlights":[{"type":"text","content":"Share "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" State Across Components"}],"url":"/cookbook/next/use-shared-chat-context"},{"id":"/cookbook/next/use-shared-chat-context-0","content":"Learn how to share a chat instance across multiple components with useChat and easily reset the chat.","contentWithHighlights":[{"type":"text","content":"Learn how to share a chat instance across multiple components with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and easily reset the chat."}],"type":"text","url":"/cookbook/next/use-shared-chat-context"},{"id":"/docs/ai-sdk-harnesses/ui","type":"page","content":"UI","breadcrumbs":["Docs","AI SDK Harnesses"],"contentWithHighlights":[{"type":"text","content":"UI"}],"url":"/docs/ai-sdk-harnesses/ui"},{"id":"/docs/ai-sdk-harnesses/ui-0","content":"Use AI SDK harnesses with useChat.","contentWithHighlights":[{"type":"text","content":"Use AI SDK harnesses with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/ai-sdk-harnesses/ui"},{"id":"/docs/ai-sdk-harnesses/ui-24","content":"Then use useChat<HarnessMessage>() on the client.","contentWithHighlights":[{"type":"text","content":"Then use "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"<HarnessMessage>() on the client."}],"type":"text","url":"/docs/ai-sdk-harnesses/ui#type-safe-tool-parts"},{"id":"/docs/ai-sdk-harnesses/ui-8","content":"Harness streams are compatible with AI SDK UI message streams. You can use\nuseChat() on the client and stream HarnessAgent output from a server route.","contentWithHighlights":[{"type":"text","content":"Harness streams are compatible with AI SDK UI message streams. You can use\n"},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"() on the client and stream HarnessAgent output from a server route."}],"type":"text","url":"/docs/ai-sdk-harnesses/ui"},{"id":"/docs/agents/subagents","type":"page","content":"Subagents","breadcrumbs":["Docs","Agents"],"contentWithHighlights":[{"type":"text","content":"Subagents"}],"url":"/docs/agents/subagents"},{"id":"/docs/agents/subagents-15","content":"Rendering Subagents in the UI (with useChat)","contentWithHighlights":[{"type":"text","content":"Rendering Subagents in the UI (with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":")"}],"type":"heading","url":"/docs/agents/subagents#rendering-subagents-in-the-ui-with-usechat"},{"id":"/docs/ai-sdk-ui/chatbot","type":"page","content":"Chatbot","breadcrumbs":["Docs","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"Chatbot"}],"url":"/docs/ai-sdk-ui/chatbot"},{"id":"/docs/ai-sdk-ui/chatbot-0","content":"Learn how to use the useChat hook.","contentWithHighlights":[{"type":"text","content":"Learn how to use the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot"},{"id":"/docs/ai-sdk-ui/chatbot-34","content":"To summarize, the useChat hook provides the following features:","contentWithHighlights":[{"type":"text","content":"To summarize, the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook provides the following features:"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot"},{"id":"/docs/ai-sdk-ui/chatbot-122","content":"Pass the custom type to useChat or createUIMessageStream:","contentWithHighlights":[{"type":"text","content":"Pass the custom type to "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" or createUIMessageStream:"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot#using-inferred-types"},{"id":"/docs/ai-sdk-ui/chatbot-43","content":"The useChat hook returns a status. It has the following possible values:","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook returns a status. It has the following possible values:"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot#status"},{"id":"/docs/ai-sdk-ui/chatbot-100","content":"You can also access your metadata from the onFinish callback of useChat:","contentWithHighlights":[{"type":"text","content":"You can also access your metadata from the onFinish callback of "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":":"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot#usage-information"},{"id":"/docs/ai-sdk-ui/chatbot-101","content":"useChat can handle plain text streams by setting the streamProtocol option to text:","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" can handle plain text streams by setting the streamProtocol option to text:"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot#text-streams"},{"id":"/docs/ai-sdk-ui/chatbot-63","content":"useChat provides optional event callbacks that you can use to handle different stages of the chatbot lifecycle:","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" provides optional event callbacks that you can use to handle different stages of the chatbot lifecycle:"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot#event-callbacks"},{"id":"/docs/ai-sdk-ui/chatbot-60","content":"Similarly, you can also request the AI provider to reprocess the last message by calling the regenerate function returned by the useChat hook:","contentWithHighlights":[{"type":"text","content":"Similarly, you can also request the AI provider to reprocess the last message by calling the regenerate function returned by the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook:"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot#cancellation-and-regeneration"},{"id":"/docs/ai-sdk-ui/transport","type":"page","content":"Transport","breadcrumbs":["Docs","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"Transport"}],"url":"/docs/ai-sdk-ui/transport"},{"id":"/docs/ai-sdk-ui/transport-0","content":"Learn how to use custom transports with useChat.","contentWithHighlights":[{"type":"text","content":"Learn how to use custom transports with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/ai-sdk-ui/transport"},{"id":"/docs/ai-sdk-ui/transport-12","content":"By default, useChat uses HTTP POST requests to send messages to /api/chat:","contentWithHighlights":[{"type":"text","content":"By default, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" uses HTTP POST requests to send messages to /api/chat:"}],"type":"text","url":"/docs/ai-sdk-ui/transport#default-transport"},{"id":"/docs/ai-sdk-ui/transport-11","content":"The useChat transport system provides fine-grained control over how messages are sent to your API endpoints and how responses are processed. This is particularly useful for alternative communication protocols like WebSockets, custom authentication patterns, or specialized backend integrations.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" transport system provides fine-grained control over how messages are sent to your API endpoints and how responses are processed. This is particularly useful for alternative communication protocols like WebSockets, custom authentication patterns, or specialized backend integrations."}],"type":"text","url":"/docs/ai-sdk-ui/transport"},{"id":"/docs/migration-guides/migration-guide-7-0","type":"page","content":"Migrate AI SDK 6.x to 7.0","breadcrumbs":["Docs","Migration Guides"],"contentWithHighlights":[{"type":"text","content":"Migrate AI SDK 6.x to 7.0"}],"url":"/docs/migration-guides/migration-guide-7-0"},{"id":"/docs/migration-guides/migration-guide-7-0-71","content":"Chat Class Deprecated in Favor of useChat Composable","contentWithHighlights":[{"type":"text","content":"Chat Class Deprecated in Favor of "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" Composable"}],"type":"heading","url":"/docs/migration-guides/migration-guide-7-0#chat-class-deprecated-in-favor-of-usechat-composable"},{"id":"/docs/migration-guides/migration-guide-7-0-331","content":"The Chat class exported from @ai-sdk/vue is deprecated in AI SDK 7 in favor of the new useChat composable. useChat exposes reactive refs for messages, status, and error, and automatically recreates the underlying chat when its init object changes — so reactive inputs (a route param, a selected model, etc.) flow through without manual orchestration.","contentWithHighlights":[{"type":"text","content":"The Chat class exported from @ai-sdk/vue is deprecated in AI SDK 7 in favor of the new "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" composable. "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" exposes reactive refs for messages, status, and error, and automatically recreates the underlying chat when its init object changes — so reactive inputs (a route param, a selected model, etc.) flow through without manual orchestration."}],"type":"text","url":"/docs/migration-guides/migration-guide-7-0#chat-class-deprecated-in-favor-of-usechat-composable"},{"id":"/docs/reference/ai-sdk-ui/infer-ui-tools","type":"page","content":"InferUITools","breadcrumbs":["Docs","Reference","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"InferUITools"}],"url":"/docs/reference/ai-sdk-ui/infer-ui-tools"},{"id":"/docs/reference/ai-sdk-ui/infer-ui-tools-13","content":"useChat - Chat hook that supports typed tools","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" - Chat hook that supports typed tools"}],"type":"text","url":"/docs/reference/ai-sdk-ui/infer-ui-tools#related"},{"id":"/docs/agents/building-agents","type":"page","content":"Building Agents","breadcrumbs":["Docs","Agents"],"contentWithHighlights":[{"type":"text","content":"Building Agents"}],"url":"/docs/agents/building-agents"},{"id":"/docs/agents/building-agents-77","content":"Use this type in your client components with useChat:","contentWithHighlights":[{"type":"text","content":"Use this type in your client components with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":":"}],"type":"text","url":"/docs/agents/building-agents#end-to-end-type-safety"},{"id":"/docs/agents/building-agents-43","content":"For manual approvals, automatic approvals and denials, dynamic policy functions,\nand useChat integration, see Tool\nApprovals.","contentWithHighlights":[{"type":"text","content":"For manual approvals, automatic approvals and denials, dynamic policy functions,\nand "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" integration, see Tool\nApprovals."}],"type":"text","url":"/docs/agents/building-agents#tools-that-use-experimental-sandboxes"},{"id":"/docs/ai-sdk-ui/chatbot-message-persistence","type":"page","content":"Chatbot Message Persistence","breadcrumbs":["Docs","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"Chatbot Message Persistence"}],"url":"/docs/ai-sdk-ui/chatbot-message-persistence"},{"id":"/docs/ai-sdk-ui/chatbot-message-persistence-31","content":"The chat component uses the useChat hook to manage the conversation:","contentWithHighlights":[{"type":"text","content":"The chat component uses the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook to manage the conversation:"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-message-persistence#displaying-the-chat"},{"id":"/docs/ai-sdk-ui/chatbot-message-persistence-32","content":"useChat sends the chat id and the messages to the backend.","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" sends the chat id and the messages to the backend."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-message-persistence#storing-messages"},{"id":"/docs/ai-sdk-ui/chatbot-message-persistence-39","content":"User message IDs are generated by the useChat hook on the client","contentWithHighlights":[{"type":"text","content":"User message IDs are generated by the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook on the client"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-message-persistence#client-side-vs-server-side-id-generation"},{"id":"/docs/ai-sdk-ui/chatbot-message-persistence-40","content":"AI response message IDs are also generated by useChat on the client, unless\nthe server sends one in the stream (see below)","contentWithHighlights":[{"type":"text","content":"AI response message IDs are also generated by "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" on the client, unless\nthe server sends one in the stream (see below)"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-message-persistence#client-side-vs-server-side-id-generation"},{"id":"/docs/ai-sdk-ui/chatbot-message-persistence-33","content":"The useChat message format is different from the ModelMessage format. The\nuseChat message format is designed for frontend display, and contains\nadditional fields such as id and createdAt. We recommend storing the\nmessages in the useChat message format.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" message format is different from the ModelMessage format. The\n"},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" message format is designed for frontend display, and contains\nadditional fields such as id and createdAt. We recommend storing the\nmessages in the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" message format."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-message-persistence#storing-messages"},{"id":"/docs/ai-sdk-ui/chatbot-message-persistence-17","content":"Being able to store and load chat messages is crucial for most AI chatbots.\nIn this guide, we'll show how to implement message persistence with useChat and streamText.","contentWithHighlights":[{"type":"text","content":"Being able to store and load chat messages is crucial for most AI chatbots.\nIn this guide, we'll show how to implement message persistence with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and streamText."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-message-persistence"},{"id":"/docs/ai-sdk-ui/chatbot-message-persistence-42","content":"The server-side options below control IDs for generated assistant response\nmessages. User message IDs are created by useChat before the request is sent\nto your API route, so keep those client-generated IDs when saving incoming\nrequest messages, or generate and persist your own user message IDs before\nsending/storing them.","contentWithHighlights":[{"type":"text","content":"The server-side options below control IDs for generated assistant response\nmessages. User message IDs are created by "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" before the request is sent\nto your API route, so keep those client-generated IDs when saving incoming\nrequest messages, or generate and persist your own user message IDs before\nsending/storing them."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-message-persistence#client-side-vs-server-side-id-generation"},{"id":"/docs/ai-sdk-ui/chatbot-tool-usage","type":"page","content":"Chatbot Tool Usage","breadcrumbs":["Docs","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"Chatbot Tool Usage"}],"url":"/docs/ai-sdk-ui/chatbot-tool-usage"},{"id":"/docs/ai-sdk-ui/chatbot-tool-usage-0","content":"Learn how to use tools with the useChat hook.","contentWithHighlights":[{"type":"text","content":"Learn how to use tools with the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-tool-usage"},{"id":"/docs/ai-sdk-ui/chatbot-tool-usage-15","content":"With useChat and streamText, you can use tools in your chatbot application.\nThe AI SDK supports three tool execution patterns in this context:","contentWithHighlights":[{"type":"text","content":"With "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and streamText, you can use tools in your chatbot application.\nThe AI SDK supports three tool execution patterns in this context:"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-tool-usage"},{"id":"/docs/ai-sdk-ui/chatbot-tool-usage-56","content":"If nothing happens after you approve a tool execution, make sure you either\ncall sendMessage manually or configure sendAutomaticallyWhen on the\nuseChat hook.","contentWithHighlights":[{"type":"text","content":"If nothing happens after you approve a tool execution, make sure you either\ncall sendMessage manually or configure sendAutomaticallyWhen on the\n"},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-tool-usage#auto-submit-after-approval"},{"id":"/docs/ai-sdk-ui/chatbot-tool-usage-35","content":"The client-side page uses the useChat hook to create a chatbot application with real-time message streaming.\nTool calls are displayed in the chat UI as typed tool parts.\nPlease make sure to render the messages using the parts property of the message.","contentWithHighlights":[{"type":"text","content":"The client-side page uses the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook to create a chatbot application with real-time message streaming.\nTool calls are displayed in the chat UI as typed tool parts.\nPlease make sure to render the messages using the parts property of the message."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-tool-usage#client-side-page"},{"id":"/docs/ai-sdk-ui/chatbot-tool-usage-64","content":"With tool call streaming enabled, partial tool calls are streamed as part of the data stream.\nThey are available through the useChat hook.\nThe typed tool parts of assistant messages will also contain partial tool calls.\nYou can use the state property of the tool part to render the correct UI.","contentWithHighlights":[{"type":"text","content":"With tool call streaming enabled, partial tool calls are streamed as part of the data stream.\nThey are available through the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook.\nThe typed tool parts of assistant messages will also contain partial tool calls.\nYou can use the state property of the tool part to render the correct UI."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-tool-usage#tool-call-streaming"},{"id":"/docs/ai-sdk-ui/chatbot-tool-usage-54","content":"In the useChat pattern, the client sends the full message history to the server each turn. Without additional protection, a modified client could fabricate an approval response. For tools that perform sensitive operations, add experimental_toolApprovalSecret to your streamText call so the server cryptographically verifies that it issued the approval:","contentWithHighlights":[{"type":"text","content":"In the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" pattern, the client sends the full message history to the server each turn. Without additional protection, a modified client could fabricate an approval response. For tools that perform sensitive operations, add experimental_toolApprovalSecret to your streamText call so the server cryptographically verifies that it issued the approval:"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-tool-usage#securing-approvals-for-sensitive-tools"},{"id":"/docs/troubleshooting/strange-stream-output","type":"page","content":"useChat/useCompletion stream output contains 0:... instead of text","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"/useCompletion stream output contains 0:... instead of text"}],"url":"/docs/troubleshooting/strange-stream-output"},{"id":"/docs/troubleshooting/streaming-status-delay","type":"page","content":"Streaming Status Shows But No Text Appears","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"Streaming Status Shows But No Text Appears"}],"url":"/docs/troubleshooting/streaming-status-delay"},{"id":"/docs/troubleshooting/streaming-status-delay-0","content":"Why useChat shows \"streaming\" status without any visible content","contentWithHighlights":[{"type":"text","content":"Why "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" shows \"streaming\" status without any visible content"}],"type":"text","url":"/docs/troubleshooting/streaming-status-delay"},{"id":"/docs/troubleshooting/streaming-status-delay-5","content":"When using useChat, the status changes to \"streaming\" immediately, but no text appears for several seconds.","contentWithHighlights":[{"type":"text","content":"When using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", the status changes to \"streaming\" immediately, but no text appears for several seconds."}],"type":"text","url":"/docs/troubleshooting/streaming-status-delay#issue"},{"id":"/docs/troubleshooting/use-chat-custom-request-options","type":"page","content":"Custom headers, body, and credentials not working with useChat","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"Custom headers, body, and credentials not working with "},{"type":"text","content":"useChat","styles":{"highlight":true}}],"url":"/docs/troubleshooting/use-chat-custom-request-options"},{"id":"/docs/troubleshooting/use-chat-custom-request-options-0","content":"Troubleshooting errors related to custom request configuration in useChat hook","contentWithHighlights":[{"type":"text","content":"Troubleshooting errors related to custom request configuration in "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook"}],"type":"text","url":"/docs/troubleshooting/use-chat-custom-request-options"},{"id":"/docs/troubleshooting/use-chat-custom-request-options-10","content":"There are three ways to properly configure request options with useChat:","contentWithHighlights":[{"type":"text","content":"There are three ways to properly configure request options with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":":"}],"type":"text","url":"/docs/troubleshooting/use-chat-custom-request-options#solution"},{"id":"/docs/troubleshooting/use-chat-custom-request-options-8","content":"When using the useChat hook, custom request options like headers, body fields, and credentials configured directly on the hook are not being sent with the request:","contentWithHighlights":[{"type":"text","content":"When using the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook, custom request options like headers, body fields, and credentials configured directly on the hook are not being sent with the request:"}],"type":"text","url":"/docs/troubleshooting/use-chat-custom-request-options#issue"},{"id":"/docs/troubleshooting/use-chat-custom-request-options-9","content":"The useChat hook has changed its API for configuring request options. Direct options like headers, body, and credentials on the hook itself are no longer supported. Instead, you need to use the transport configuration with DefaultChatTransport or pass options at the request level.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook has changed its API for configuring request options. Direct options like headers, body, and credentials on the hook itself are no longer supported. Instead, you need to use the transport configuration with DefaultChatTransport or pass options at the request level."}],"type":"text","url":"/docs/troubleshooting/use-chat-custom-request-options#background"},{"id":"/cookbook/guides/multi-modal-chatbot","type":"page","content":"Multi-Modal Agent","breadcrumbs":["Docs","Guides"],"contentWithHighlights":[{"type":"text","content":"Multi-Modal Agent"}],"url":"/cookbook/guides/multi-modal-chatbot"},{"id":"/cookbook/guides/multi-modal-chatbot-54","content":"Configure useChat with DefaultChatTransport to specify the API endpoint.","contentWithHighlights":[{"type":"text","content":"Configure "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" with DefaultChatTransport to specify the API endpoint."}],"type":"text","url":"/cookbook/guides/multi-modal-chatbot#add-file-upload"},{"id":"/cookbook/guides/multi-modal-chatbot-44","content":"This page utilizes the useChat hook, configured with DefaultChatTransport to specify the API endpoint. The useChat hook provides multiple utility functions and state variables:","contentWithHighlights":[{"type":"text","content":"This page utilizes the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook, configured with DefaultChatTransport to specify the API endpoint. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook provides multiple utility functions and state variables:"}],"type":"text","url":"/cookbook/guides/multi-modal-chatbot#wire-up-the-ui"},{"id":"/cookbook/guides/multi-modal-chatbot-41","content":"Now that you have a Route Handler that can query a large language model (LLM), it's time to setup your frontend.  AI SDK UI  abstracts the complexity of a chat interface into one hook, useChat.","contentWithHighlights":[{"type":"text","content":"Now that you have a Route Handler that can query a large language model (LLM), it's time to setup your frontend.  AI SDK UI  abstracts the complexity of a chat interface into one hook, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/cookbook/guides/multi-modal-chatbot#wire-up-the-ui"},{"id":"/docs/ai-sdk-ui/generative-user-interfaces","type":"page","content":"Generative User Interfaces","breadcrumbs":["Docs","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"Generative User Interfaces"}],"url":"/docs/ai-sdk-ui/generative-user-interfaces"},{"id":"/docs/ai-sdk-ui/generative-user-interfaces-18","content":"Start with a basic chat implementation using the useChat hook:","contentWithHighlights":[{"type":"text","content":"Start with a basic chat implementation using the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook:"}],"type":"text","url":"/docs/ai-sdk-ui/generative-user-interfaces#basic-chat-implementation"},{"id":"/docs/reference/ai-sdk-ui/convert-to-model-messages","type":"page","content":"convertToModelMessages","breadcrumbs":["Docs","Reference","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"convertToModelMessages"}],"url":"/docs/reference/ai-sdk-ui/convert-to-model-messages"},{"id":"/docs/reference/ai-sdk-ui/convert-to-model-messages-0","content":"Convert useChat messages to ModelMessages for AI functions (API Reference)","contentWithHighlights":[{"type":"text","content":"Convert "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" messages to ModelMessages for AI functions (API Reference)"}],"type":"text","url":"/docs/reference/ai-sdk-ui/convert-to-model-messages"},{"id":"/docs/reference/ai-sdk-ui/convert-to-model-messages-12","content":"The convertToModelMessages function is used to transform an array of UI messages from the useChat hook into an array of ModelMessage objects. These ModelMessage objects are compatible with AI core functions like streamText.","contentWithHighlights":[{"type":"text","content":"The convertToModelMessages function is used to transform an array of UI messages from the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook into an array of ModelMessage objects. These ModelMessage objects are compatible with AI core functions like streamText."}],"type":"text","url":"/docs/reference/ai-sdk-ui/convert-to-model-messages"},{"id":"/providers/adapters/langchain","type":"page","content":"LangChain","breadcrumbs":["Docs","Adapters"],"contentWithHighlights":[{"type":"text","content":"LangChain"}],"url":"/providers/adapters/langchain"},{"id":"/providers/adapters/langchain-26","content":"Then, use the AI SDK's useChat hook in the page component:","contentWithHighlights":[{"type":"text","content":"Then, use the AI SDK's "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook in the page component:"}],"type":"text","url":"/providers/adapters/langchain#example-basic-chat"},{"id":"/providers/adapters/langchain-61","content":"A ChatTransport implementation for LangSmith/LangGraph deployments. Use this with the useChat hook's transport option.","contentWithHighlights":[{"type":"text","content":"A ChatTransport implementation for LangSmith/LangGraph deployments. Use this with the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook's transport option."}],"type":"text","url":"/providers/adapters/langchain#langsmithdeploymenttransport"},{"id":"/docs/ai-sdk-ui/chatbot-resume-streams","type":"page","content":"Chatbot Resume Streams","breadcrumbs":["Docs","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"Chatbot Resume Streams"}],"url":"/docs/ai-sdk-ui/chatbot-resume-streams"},{"id":"/docs/ai-sdk-ui/chatbot-resume-streams-19","content":"A resume option in useChat that automatically reconnects to active streams","contentWithHighlights":[{"type":"text","content":"A resume option in "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" that automatically reconnects to active streams"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-resume-streams#how-stream-resumption-works"},{"id":"/docs/ai-sdk-ui/chatbot-resume-streams-15","content":"useChat supports resuming ongoing streams after page reloads. Use this feature to build applications with long-running generations.","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" supports resuming ongoing streams after page reloads. Use this feature to build applications with long-running generations."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-resume-streams"},{"id":"/docs/ai-sdk-ui/chatbot-resume-streams-59","content":"useChat includes a stop() function that aborts the current client request. In a resumable stream setup, that abort is a disconnect signal, not a request to stop generation.","contentWithHighlights":[{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" includes a stop() function that aborts the current client request. In a resumable stream setup, that abort is a disconnect signal, not a request to stop generation."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-resume-streams#stop-an-active-resumable-stream"},{"id":"/docs/ai-sdk-ui/chatbot-resume-streams-31","content":"Use the resume option in the useChat hook to enable stream resumption. When resume is true, the hook automatically attempts to reconnect to any active stream for the chat on mount:","contentWithHighlights":[{"type":"text","content":"Use the resume option in the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook to enable stream resumption. When resume is true, the hook automatically attempts to reconnect to any active stream for the chat on mount:"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-resume-streams#client-side-enable-stream-resumption"},{"id":"/docs/ai-sdk-ui/chatbot-resume-streams-33","content":"When you enable resume, the useChat hook makes a GET request to /api/chat/[id]/stream on mount to check for and resume any active streams.","contentWithHighlights":[{"type":"text","content":"When you enable resume, the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook makes a GET request to /api/chat/[id]/stream on mount to check for and resume any active streams."}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-resume-streams#client-side-enable-stream-resumption"},{"id":"/docs/ai-sdk-ui/chatbot-resume-streams-53","content":"By default, the useChat hook makes a GET request to /api/chat/[id]/stream when resuming. Customize this endpoint, credentials, and headers, using the prepareReconnectToStreamRequest option in DefaultChatTransport:","contentWithHighlights":[{"type":"text","content":"By default, the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook makes a GET request to /api/chat/[id]/stream when resuming. Customize this endpoint, credentials, and headers, using the prepareReconnectToStreamRequest option in DefaultChatTransport:"}],"type":"text","url":"/docs/ai-sdk-ui/chatbot-resume-streams#customize-the-resume-endpoint"},{"id":"/cookbook/guides/claude-4","type":"page","content":"Get started with Claude 4","breadcrumbs":["Docs","Guides"],"contentWithHighlights":[{"type":"text","content":"Get started with Claude 4"}],"url":"/cookbook/guides/claude-4"},{"id":"/cookbook/guides/claude-4-27","content":"Finally, update the root page (app/page.tsx) to use the useChat hook:","contentWithHighlights":[{"type":"text","content":"Finally, update the root page (app/page.tsx) to use the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook:"}],"type":"text","url":"/cookbook/guides/claude-4#building-interactive-interfaces"},{"id":"/cookbook/guides/claude-4-22","content":"With three main hooks — useChat, useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, and streamed JSON into your app.","contentWithHighlights":[{"type":"text","content":"With three main hooks — "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, and streamed JSON into your app."}],"type":"text","url":"/cookbook/guides/claude-4#building-interactive-interfaces"},{"id":"/cookbook/guides/claude-4-29","content":"The useChat hook on your root page (app/page.tsx) will make a request to your LLM provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook on your root page (app/page.tsx) will make a request to your LLM provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI."}],"type":"text","url":"/cookbook/guides/claude-4#building-interactive-interfaces"},{"id":"/cookbook/guides/deepseek-v3-2","type":"page","content":"Get started with DeepSeek V3.2","breadcrumbs":["Docs","Guides"],"contentWithHighlights":[{"type":"text","content":"Get started with DeepSeek V3.2"}],"url":"/cookbook/guides/deepseek-v3-2"},{"id":"/cookbook/guides/deepseek-v3-2-47","content":"Finally, update the root page (app/page.tsx) to use the useChat hook:","contentWithHighlights":[{"type":"text","content":"Finally, update the root page (app/page.tsx) to use the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook:"}],"type":"text","url":"/cookbook/guides/deepseek-v3-2#building-interactive-interfaces"},{"id":"/cookbook/guides/deepseek-v3-2-43","content":"With three main hooks — useChat, useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app.","contentWithHighlights":[{"type":"text","content":"With three main hooks — "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app."}],"type":"text","url":"/cookbook/guides/deepseek-v3-2#building-interactive-interfaces"},{"id":"/cookbook/guides/deepseek-v3-2-48","content":"The useChat hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI."}],"type":"text","url":"/cookbook/guides/deepseek-v3-2#building-interactive-interfaces"},{"id":"/cookbook/guides/gemini","type":"page","content":"Get started with Gemini 3","breadcrumbs":["Docs","Guides"],"contentWithHighlights":[{"type":"text","content":"Get started with Gemini 3"}],"url":"/cookbook/guides/gemini"},{"id":"/cookbook/guides/gemini-32","content":"Finally, update the root page (app/page.tsx) to use the useChat hook:","contentWithHighlights":[{"type":"text","content":"Finally, update the root page (app/page.tsx) to use the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook:"}],"type":"text","url":"/cookbook/guides/gemini#building-interactive-interfaces"},{"id":"/cookbook/guides/gemini-28","content":"With three main hooks — useChat, useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, and streamed JSON into your app.","contentWithHighlights":[{"type":"text","content":"With three main hooks — "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, and streamed JSON into your app."}],"type":"text","url":"/cookbook/guides/gemini#building-interactive-interfaces"},{"id":"/cookbook/guides/gemini-33","content":"The useChat hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI."}],"type":"text","url":"/cookbook/guides/gemini#building-interactive-interfaces"},{"id":"/cookbook/guides/gpt-5","type":"page","content":"Get started with GPT-5","breadcrumbs":["Docs","Guides"],"contentWithHighlights":[{"type":"text","content":"Get started with GPT-5"}],"url":"/cookbook/guides/gpt-5"},{"id":"/cookbook/guides/gpt-5-55","content":"Finally, update the root page (app/page.tsx) to use the useChat hook:","contentWithHighlights":[{"type":"text","content":"Finally, update the root page (app/page.tsx) to use the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook:"}],"type":"text","url":"/cookbook/guides/gpt-5#building-interactive-interfaces"},{"id":"/cookbook/guides/gpt-5-51","content":"With three main hooks — useChat, useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app.","contentWithHighlights":[{"type":"text","content":"With three main hooks — "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app."}],"type":"text","url":"/cookbook/guides/gpt-5#building-interactive-interfaces"},{"id":"/cookbook/guides/gpt-5-56","content":"The useChat hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI."}],"type":"text","url":"/cookbook/guides/gpt-5#building-interactive-interfaces"},{"id":"/cookbook/guides/o3","type":"page","content":"Get started with OpenAI o3-mini","breadcrumbs":["Docs","Guides"],"contentWithHighlights":[{"type":"text","content":"Get started with OpenAI o3-mini"}],"url":"/cookbook/guides/o3"},{"id":"/cookbook/guides/o3-51","content":"Finally, update the root page (app/page.tsx) to use the useChat hook:","contentWithHighlights":[{"type":"text","content":"Finally, update the root page (app/page.tsx) to use the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook:"}],"type":"text","url":"/cookbook/guides/o3#building-interactive-interfaces"},{"id":"/cookbook/guides/o3-47","content":"With three main hooks — useChat, useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app.","contentWithHighlights":[{"type":"text","content":"With three main hooks — "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app."}],"type":"text","url":"/cookbook/guides/o3#building-interactive-interfaces"},{"id":"/cookbook/guides/o3-52","content":"The useChat hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI."}],"type":"text","url":"/cookbook/guides/o3#building-interactive-interfaces"},{"id":"/cookbook/guides/r1","type":"page","content":"Get started with DeepSeek R1","breadcrumbs":["Docs","Guides"],"contentWithHighlights":[{"type":"text","content":"Get started with DeepSeek R1"}],"url":"/cookbook/guides/r1"},{"id":"/cookbook/guides/r1-64","content":"Finally, update the root page (app/page.tsx) to use the useChat hook:","contentWithHighlights":[{"type":"text","content":"Finally, update the root page (app/page.tsx) to use the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook:"}],"type":"text","url":"/cookbook/guides/r1#building-interactive-interfaces"},{"id":"/cookbook/guides/r1-59","content":"With three main hooks — useChat, useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app.","contentWithHighlights":[{"type":"text","content":"With three main hooks — "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app."}],"type":"text","url":"/cookbook/guides/r1#building-interactive-interfaces"},{"id":"/cookbook/guides/r1-66","content":"The useChat hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI."}],"type":"text","url":"/cookbook/guides/r1#building-interactive-interfaces"},{"id":"/cookbook/guides/sonnet-3-7","type":"page","content":"Get started with Claude 3.7 Sonnet","breadcrumbs":["Docs","Guides"],"contentWithHighlights":[{"type":"text","content":"Get started with Claude 3.7 Sonnet"}],"url":"/cookbook/guides/sonnet-3-7"},{"id":"/cookbook/guides/sonnet-3-7-22","content":"Finally, update the root page (app/page.tsx) to use the useChat hook:","contentWithHighlights":[{"type":"text","content":"Finally, update the root page (app/page.tsx) to use the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook:"}],"type":"text","url":"/cookbook/guides/sonnet-3-7#building-interactive-interfaces"},{"id":"/cookbook/guides/sonnet-3-7-17","content":"With three main hooks — useChat, useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app.","contentWithHighlights":[{"type":"text","content":"With three main hooks — "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app."}],"type":"text","url":"/cookbook/guides/sonnet-3-7#building-interactive-interfaces"},{"id":"/cookbook/guides/sonnet-3-7-24","content":"The useChat hook on your root page (app/page.tsx) will make a request to your LLM provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook on your root page (app/page.tsx) will make a request to your LLM provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI."}],"type":"text","url":"/cookbook/guides/sonnet-3-7#building-interactive-interfaces"},{"id":"/docs/migration-guides/migration-guide-4-2","type":"page","content":"Migrate AI SDK 4.1 to 4.2","breadcrumbs":["Docs","Migration Guides"],"contentWithHighlights":[{"type":"text","content":"Migrate AI SDK 4.1 to 4.2"}],"url":"/docs/migration-guides/migration-guide-4-2"},{"id":"/docs/migration-guides/migration-guide-4-2-22","content":"You can use the useChat hook with the new message parts as follows:","contentWithHighlights":[{"type":"text","content":"You can use the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook with the new message parts as follows:"}],"type":"text","url":"/docs/migration-guides/migration-guide-4-2#migration"},{"id":"/docs/migration-guides/migration-guide-4-2-15","content":"In AI SDK 4.2, we've redesigned how useChat handles model outputs with message parts and multiple steps.\nThis is a significant improvement that simplifies rendering complex, multi-modal AI responses in your UI.","contentWithHighlights":[{"type":"text","content":"In AI SDK 4.2, we've redesigned how "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" handles model outputs with message parts and multiple steps.\nThis is a significant improvement that simplifies rendering complex, multi-modal AI responses in your UI."}],"type":"text","url":"/docs/migration-guides/migration-guide-4-2#ui-message-parts"},{"id":"/docs/migration-guides/migration-guide-4-2-19","content":"Previously, useChat stored different output types separately, which made it challenging to maintain the correct sequence in your UI when these elements were interleaved in a response,\nand led to multiple consecutive assistant messages when there were tool calls. For example:","contentWithHighlights":[{"type":"text","content":"Previously, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" stored different output types separately, which made it challenging to maintain the correct sequence in your UI when these elements were interleaved in a response,\nand led to multiple consecutive assistant messages when there were tool calls. For example:"}],"type":"text","url":"/docs/migration-guides/migration-guide-4-2#benefits-of-the-new-approach"},{"id":"/docs/troubleshooting/tool-invocation-missing-result","type":"page","content":"Tool Invocation Missing Result Error","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"Tool Invocation Missing Result Error"}],"url":"/docs/troubleshooting/tool-invocation-missing-result"},{"id":"/docs/troubleshooting/tool-invocation-missing-result-5","content":"The error occurs when you define a tool without an execute function and don't provide the result through other means (like useChat's onToolCall or addToolOutput functions).","contentWithHighlights":[{"type":"text","content":"The error occurs when you define a tool without an execute function and don't provide the result through other means (like "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"'s onToolCall or addToolOutput functions)."}],"type":"text","url":"/docs/troubleshooting/tool-invocation-missing-result#cause"},{"id":"/docs/troubleshooting/tool-invocation-missing-result-9","content":"Client-side execution with useChat (omitting the execute function), you must provide results using addToolOutput:","contentWithHighlights":[{"type":"text","content":"Client-side execution with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" (omitting the execute function), you must provide results using addToolOutput:"}],"type":"text","url":"/docs/troubleshooting/tool-invocation-missing-result#solution"},{"id":"/cookbook/next/human-in-the-loop","type":"page","content":"Human-in-the-Loop with Next.js","breadcrumbs":["Docs","Next.js"],"contentWithHighlights":[{"type":"text","content":"Human-in-the-Loop with Next.js"}],"url":"/cookbook/next/human-in-the-loop"},{"id":"/cookbook/next/human-in-the-loop-12","content":"On the frontend, use the useChat hook to manage the message state and user interaction.","contentWithHighlights":[{"type":"text","content":"On the frontend, use the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook to manage the message state and user interaction."}],"type":"text","url":"/cookbook/next/human-in-the-loop#background"},{"id":"/cookbook/next/human-in-the-loop-18","content":"On the frontend, check for the approval-requested state and render approve/deny buttons. Use addToolApprovalResponse from the useChat hook to send the user's decision.","contentWithHighlights":[{"type":"text","content":"On the frontend, check for the approval-requested state and render approve/deny buttons. Use addToolApprovalResponse from the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook to send the user's decision."}],"type":"text","url":"/cookbook/next/human-in-the-loop#client-side-approval-ui"},{"id":"/cookbook/next/human-in-the-loop-27","content":"If nothing happens after you approve a tool execution, make sure you either\ncall sendMessage manually or configure sendAutomaticallyWhen on the\nuseChat hook.","contentWithHighlights":[{"type":"text","content":"If nothing happens after you approve a tool execution, make sure you either\ncall sendMessage manually or configure sendAutomaticallyWhen on the\n"},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook."}],"type":"text","url":"/cookbook/next/human-in-the-loop#auto-submit-after-approval"},{"id":"/cookbook/next/stream-text-with-image-prompt","type":"page","content":"Stream Text with Image Prompt","breadcrumbs":["Docs","Next.js"],"contentWithHighlights":[{"type":"text","content":"Stream Text with Image Prompt"}],"url":"/cookbook/next/stream-text-with-image-prompt"},{"id":"/cookbook/next/stream-text-with-image-prompt-6","content":"On the client side, we use the new useChat hook and send multimodal messages using the parts array.","contentWithHighlights":[{"type":"text","content":"On the client side, we use the new "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook and send multimodal messages using the parts array."}],"type":"text","url":"/cookbook/next/stream-text-with-image-prompt#client"},{"id":"/cookbook/next/stream-text-with-image-prompt-4","content":"Vision models such as GPT-6 Astra can process both text and images. In this example, we will show you how to send an image URL along with the user's message to the model with useChat.","contentWithHighlights":[{"type":"text","content":"Vision models such as GPT-6 Astra can process both text and images. In this example, we will show you how to send an image URL along with the user's message to the model with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/cookbook/next/stream-text-with-image-prompt"},{"id":"/docs/agents/workflow-agent","type":"page","content":"WorkflowAgent","breadcrumbs":["Docs","Agents"],"contentWithHighlights":[{"type":"text","content":"WorkflowAgent"}],"url":"/docs/agents/workflow-agent"},{"id":"/docs/agents/workflow-agent-78","content":"WorkflowAgent.stream() expects ModelMessage[], not UIMessage[]. When receiving messages from the client (via useChat), convert them first:","contentWithHighlights":[{"type":"text","content":"WorkflowAgent.stream() expects ModelMessage[], not UIMessage[]. When receiving messages from the client (via "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"), convert them first:"}],"type":"text","url":"/docs/agents/workflow-agent#message-conversion"},{"id":"/docs/advanced/caching","type":"page","content":"Caching","breadcrumbs":["Docs","Advanced"],"contentWithHighlights":[{"type":"text","content":"Caching"}],"url":"/docs/advanced/caching"},{"id":"/docs/advanced/caching-13","content":"Both the cached and the fresh responses use the\ntext stream protocol,\nso use TextStreamChatTransport when calling this route with useChat.","contentWithHighlights":[{"type":"text","content":"Both the cached and the fresh responses use the\ntext stream protocol,\nso use TextStreamChatTransport when calling this route with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/advanced/caching#using-lifecycle-callbacks"},{"id":"/docs/ai-sdk-ui/stream-protocol","type":"page","content":"Stream Protocols","breadcrumbs":["Docs","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"Stream Protocols"}],"url":"/docs/ai-sdk-ui/stream-protocol"},{"id":"/docs/ai-sdk-ui/stream-protocol-137","content":"The data stream protocol is supported\nby useChat and useCompletion on the frontend and used by default.\nuseCompletion only supports the text and data stream parts.","contentWithHighlights":[{"type":"text","content":"The data stream protocol is supported\nby "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and useCompletion on the frontend and used by default.\nuseCompletion only supports the text and data stream parts."}],"type":"text","url":"/docs/ai-sdk-ui/stream-protocol#stream-termination"},{"id":"/docs/ai-sdk-ui/stream-protocol-40","content":"Text streams are supported by useChat, useCompletion, and useObject.\nTo enable text streaming, use TextStreamChatTransport with useChat, or set\nthe streamProtocol option to text with useCompletion.","contentWithHighlights":[{"type":"text","content":"Text streams are supported by "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", useCompletion, and useObject.\nTo enable text streaming, use TextStreamChatTransport with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", or set\nthe streamProtocol option to text with useCompletion."}],"type":"text","url":"/docs/ai-sdk-ui/stream-protocol#text-stream-protocol"},{"id":"/docs/ai-sdk-ui/stream-protocol-122","content":"This part is necessary to correctly process multiple stitched assistant calls, e.g. when calling tools in the backend, and using steps in useChat at the same time.","contentWithHighlights":[{"type":"text","content":"This part is necessary to correctly process multiple stitched assistant calls, e.g. when calling tools in the backend, and using steps in "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" at the same time."}],"type":"text","url":"/docs/ai-sdk-ui/stream-protocol#finish-step-part"},{"id":"/docs/ai-sdk-ui/stream-protocol-35","content":"AI SDK UI functions such as useChat and useCompletion support both text streams and data streams.\nThe stream protocol defines how the data is streamed to the frontend on top of the HTTP protocol.","contentWithHighlights":[{"type":"text","content":"AI SDK UI functions such as "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and useCompletion support both text streams and data streams.\nThe stream protocol defines how the data is streamed to the frontend on top of the HTTP protocol."}],"type":"text","url":"/docs/ai-sdk-ui/stream-protocol"},{"id":"/docs/ai-sdk-rsc/migrating-to-ui","type":"page","content":"Migrating from RSC to UI","breadcrumbs":["Docs","AI SDK RSC"],"contentWithHighlights":[{"type":"text","content":"Migrating from RSC to UI"}],"url":"/docs/ai-sdk-rsc/migrating-to-ui"},{"id":"/docs/ai-sdk-rsc/migrating-to-ui-54","content":"The streamText function streams the props data as response to the client, while useChat decode the stream as toolInvocations and renders the chat interface.","contentWithHighlights":[{"type":"text","content":"The streamText function streams the props data as response to the client, while "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" decode the stream as toolInvocations and renders the chat interface."}],"type":"text","url":"/docs/ai-sdk-rsc/migrating-to-ui#after-replace-with-route-handler-and-stream-props-data-to-client"},{"id":"/docs/ai-sdk-rsc/migrating-to-ui-63","content":"AI SDK UI uses the messages field of useChat to store messages. To load messages when useChat is mounted, you should use initialMessages.","contentWithHighlights":[{"type":"text","content":"AI SDK UI uses the messages field of "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" to store messages. To load messages when "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" is mounted, you should use initialMessages."}],"type":"text","url":"/docs/ai-sdk-rsc/migrating-to-ui#before-load-chat-from-database-using-callback-function-of-context-provider"},{"id":"/docs/ai-sdk-rsc/migrating-to-ui-56","content":"After switching to AI SDK UI, these messages are synced by initializing the useChat hook in the component with the same id as the parent component.","contentWithHighlights":[{"type":"text","content":"After switching to AI SDK UI, these messages are synced by initializing the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook in the component with the same id as the parent component."}],"type":"text","url":"/docs/ai-sdk-rsc/migrating-to-ui#after-use-another-chat-hook-with-same-id-from-the-component"},{"id":"/docs/ai-sdk-rsc/migrating-to-ui-46","content":"The streamUI function combines generating text and rendering the user interface. To migrate to AI SDK UI, you need to separate these concerns – streaming generations with streamText and rendering the UI with useChat.","contentWithHighlights":[{"type":"text","content":"The streamUI function combines generating text and rendering the user interface. To migrate to AI SDK UI, you need to separate these concerns – streaming generations with streamText and rendering the UI with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/ai-sdk-rsc/migrating-to-ui#before-call-server-action-and-update-ui-state"},{"id":"/docs/ai-sdk-rsc/migrating-to-ui-47","content":"The streamText function executes as part of a route handler and streams the response to the client. The useChat hook on the client decodes this stream and renders the response within the chat interface.","contentWithHighlights":[{"type":"text","content":"The streamText function executes as part of a route handler and streams the response to the client. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook on the client decodes this stream and renders the response within the chat interface."}],"type":"text","url":"/docs/ai-sdk-rsc/migrating-to-ui#after-replace-server-action-with-route-handler"},{"id":"/docs/ai-sdk-rsc/migrating-to-ui-49","content":"With AI SDK UI, useChat comes with built-in support for parallel tool calls. You can define multiple tools in the streamText and have them called them in parallel. The useChat hook will then handle the parallel tool calls for you automatically.","contentWithHighlights":[{"type":"text","content":"With AI SDK UI, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" comes with built-in support for parallel tool calls. You can define multiple tools in the streamText and have them called them in parallel. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook will then handle the parallel tool calls for you automatically."}],"type":"text","url":"/docs/ai-sdk-rsc/migrating-to-ui#parallel-tool-calls"},{"id":"/docs/ai-sdk-rsc/migrating-to-ui-51","content":"With AI SDK UI, useChat comes with built-in support for multi-step tool calls. You can set stopWhen in the streamText function to define when the model should stop making tool calls. The useChat hook will then handle the multi-step tool calls for you automatically.","contentWithHighlights":[{"type":"text","content":"With AI SDK UI, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" comes with built-in support for multi-step tool calls. You can set stopWhen in the streamText function to define when the model should stop making tool calls. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook will then handle the multi-step tool calls for you automatically."}],"type":"text","url":"/docs/ai-sdk-rsc/migrating-to-ui#multi-step-tool-calls"},{"id":"/docs/ai-sdk-ui/streaming-data","type":"page","content":"Streaming Custom Data","breadcrumbs":["Docs","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"Streaming Custom Data"}],"url":"/docs/ai-sdk-ui/streaming-data"},{"id":"/docs/ai-sdk-ui/streaming-data-27","content":"Transient parts are sent to the client but not added to the message history. They are only accessible via the onData useChat handler:","contentWithHighlights":[{"type":"text","content":"Transient parts are sent to the client but not added to the message history. They are only accessible via the onData "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" handler:"}],"type":"text","url":"/docs/ai-sdk-ui/streaming-data#transient-data-parts-ephemeral"},{"id":"/providers/adapters","type":"page","content":"Adapters","breadcrumbs":["Docs","Adapters"],"contentWithHighlights":[{"type":"text","content":"Adapters"}],"url":"/providers/adapters"},{"id":"/providers/adapters-1","content":"Adapters are lightweight integrations that enable you to use\nthe AI SDK UI functions (useChat and useCompletion)\nwith 3rd party libraries.","contentWithHighlights":[{"type":"text","content":"Adapters are lightweight integrations that enable you to use\nthe AI SDK UI functions ("},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and useCompletion)\nwith 3rd party libraries."}],"type":"text","url":"/providers/adapters"},{"id":"/cookbook/next/chat-with-pdf","type":"page","content":"Chat with PDFs","breadcrumbs":["Docs","Next.js"],"contentWithHighlights":[{"type":"text","content":"Chat with PDFs"}],"url":"/cookbook/next/chat-with-pdf"},{"id":"/cookbook/next/chat-with-pdf-8","content":"The code uses the useChat hook which handles the file upload and message streaming. The experimental_attachments option allows you to send files alongside messages.","contentWithHighlights":[{"type":"text","content":"The code uses the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook which handles the file upload and message streaming. The experimental_attachments option allows you to send files alongside messages."}],"type":"text","url":"/cookbook/next/chat-with-pdf#client"},{"id":"/cookbook/next/track-agent-token-usage","type":"page","content":"Track Agent Token Usage","breadcrumbs":["Docs","Next.js"],"contentWithHighlights":[{"type":"text","content":"Track Agent Token Usage"}],"url":"/cookbook/next/track-agent-token-usage"},{"id":"/cookbook/next/track-agent-token-usage-9","content":"And a basic chat interface using useChat. Pass AgentUIMessage as a generic to get type-safe access to messages, including typed tool invocations and results.","contentWithHighlights":[{"type":"text","content":"And a basic chat interface using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":". Pass AgentUIMessage as a generic to get type-safe access to messages, including typed tool invocations and results."}],"type":"text","url":"/cookbook/next/track-agent-token-usage#start-with-a-basic-agent"},{"id":"/docs/ai-sdk-ui/error-handling","type":"page","content":"Error Handling","breadcrumbs":["Docs","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"Error Handling"}],"url":"/docs/ai-sdk-ui/error-handling"},{"id":"/docs/ai-sdk-ui/error-handling-47","content":"Errors can be processed by passing an onError callback function as an option to the useChat or useCompletion hooks.\nThe callback function receives an error object as an argument.","contentWithHighlights":[{"type":"text","content":"Errors can be processed by passing an onError callback function as an option to the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" or useCompletion hooks.\nThe callback function receives an error object as an argument."}],"type":"text","url":"/docs/ai-sdk-ui/error-handling#error-handling-callback"},{"id":"/cookbook/guides/rag-chatbot","type":"page","content":"RAG Agent","breadcrumbs":["Docs","Guides"],"contentWithHighlights":[{"type":"text","content":"RAG Agent"}],"url":"/cookbook/guides/rag-chatbot"},{"id":"/cookbook/guides/rag-chatbot-118","content":"Great! Let's build the frontend. The AI SDK’s useChat hook allows you to easily create a conversational user interface for your agent.","contentWithHighlights":[{"type":"text","content":"Great! Let's build the frontend. The AI SDK’s "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook allows you to easily create a conversational user interface for your agent."}],"type":"text","url":"/cookbook/guides/rag-chatbot#create-root-page"},{"id":"/cookbook/guides/rag-chatbot-120","content":"The useChat hook enables the streaming of chat messages from your AI provider (you will be using OpenAI via the Vercel AI Gateway) and updates the UI automatically as new messages are received. Manage chat input state in your component.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook enables the streaming of chat messages from your AI provider (you will be using OpenAI via the Vercel AI Gateway) and updates the UI automatically as new messages are received. Manage chat input state in your component."}],"type":"text","url":"/cookbook/guides/rag-chatbot#create-root-page"},{"id":"/cookbook/guides/rag-chatbot-122","content":"Head to http://localhost:3000. You should see an empty screen with an input bar floating at the bottom. Try to send a message. The message shows up in the UI for a fraction of a second and then disappears. This is because you haven’t set up the corresponding API route to call the model! By default, useChat will send a POST request to the /api/chat endpoint with the messages as the request body.","contentWithHighlights":[{"type":"text","content":"Head to http://localhost:3000. You should see an empty screen with an input bar floating at the bottom. Try to send a message. The message shows up in the UI for a fraction of a second and then disappears. This is because you haven’t set up the corresponding API route to call the model! By default, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" will send a POST request to the /api/chat endpoint with the messages as the request body."}],"type":"text","url":"/cookbook/guides/rag-chatbot#create-root-page"},{"id":"/providers/ai-sdk-providers/anthropic","type":"page","content":"Anthropic","breadcrumbs":["Docs","AI SDK Providers"],"contentWithHighlights":[{"type":"text","content":"Anthropic"}],"url":"/providers/ai-sdk-providers/anthropic"},{"id":"/providers/ai-sdk-providers/anthropic-207","content":"When using useChat or other UI hooks, compaction summaries appear as regular text parts with providerMetadata. You can style them differently in your UI:","contentWithHighlights":[{"type":"text","content":"When using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" or other UI hooks, compaction summaries appear as regular text parts with providerMetadata. You can style them differently in your UI:"}],"type":"text","url":"/providers/ai-sdk-providers/anthropic#compaction-in-ui-applications"},{"id":"/providers/ai-sdk-providers/anthropic-223","content":"Because the UIMessage type (used by AI SDK UI hooks like useChat) does not\nsupport the providerOptions property, you can use convertToModelMessages\nfirst before passing the messages to functions like generateText or\nstreamText. For more details on providerOptions usage, see\nhere.","contentWithHighlights":[{"type":"text","content":"Because the UIMessage type (used by AI SDK UI hooks like "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":") does not\nsupport the providerOptions property, you can use convertToModelMessages\nfirst before passing the messages to functions like generateText or\nstreamText. For more details on providerOptions usage, see\nhere."}],"type":"text","url":"/providers/ai-sdk-providers/anthropic#limitations"},{"id":"/docs/advanced/stopping-streams","type":"page","content":"Stopping Streams","breadcrumbs":["Docs","Advanced"],"contentWithHighlights":[{"type":"text","content":"Stopping Streams"}],"url":"/docs/advanced/stopping-streams"},{"id":"/docs/advanced/stopping-streams-11","content":"Stream abort functionality is not compatible with stream resumption. If you're\nusing resume: true in useChat, the abort functionality will break the\nresumption mechanism. Choose either abort or resume functionality, but not\nboth.","contentWithHighlights":[{"type":"text","content":"Stream abort functionality is not compatible with stream resumption. If you're\nusing resume: true in "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", the abort functionality will break the\nresumption mechanism. Choose either abort or resume functionality, but not\nboth."}],"type":"text","url":"/docs/advanced/stopping-streams#ai-sdk-ui"},{"id":"/docs/advanced/stopping-streams-10","content":"The hooks, e.g. useChat or useCompletion, provide a stop helper function that can be used to cancel a stream.\nThis aborts the HTTP request from the client. To also stop the model request on the server, your server runtime must propagate the client disconnect to the request's AbortSignal, and your route must forward that signal to the AI SDK Core call as shown above.","contentWithHighlights":[{"type":"text","content":"The hooks, e.g. "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" or useCompletion, provide a stop helper function that can be used to cancel a stream.\nThis aborts the HTTP request from the client. To also stop the model request on the server, your server runtime must propagate the client disconnect to the request's AbortSignal, and your route must forward that signal to the AI SDK Core call as shown above."}],"type":"text","url":"/docs/advanced/stopping-streams#ai-sdk-ui"},{"id":"/docs/reference/ai-sdk-ui/websocket-chat-transport","type":"page","content":"WebSocketChatTransport","breadcrumbs":["Docs","Reference","AI SDK UI"],"contentWithHighlights":[{"type":"text","content":"WebSocketChatTransport"}],"url":"/docs/reference/ai-sdk-ui/websocket-chat-transport"},{"id":"/docs/reference/ai-sdk-ui/websocket-chat-transport-57","content":"WebSocketChatTransport is separate from the experimental Realtime APIs.\nRealtime transports implement provider realtime sessions; this transport\ncarries the provider-independent AI SDK UI message protocol used by useChat.","contentWithHighlights":[{"type":"text","content":"WebSocketChatTransport is separate from the experimental Realtime APIs.\nRealtime transports implement provider realtime sessions; this transport\ncarries the provider-independent AI SDK UI message protocol used by "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/reference/ai-sdk-ui/websocket-chat-transport#authentication-and-deployment"},{"id":"/docs/reference/ai-sdk-ui/websocket-chat-transport-22","content":"The code that creates a transport owns its lifecycle. React and Vue useChat\ndo not close caller-supplied transports during replacement or cleanup, because\none transport can be shared by multiple chats. Call close() after its final\nconsumer is gone.","contentWithHighlights":[{"type":"text","content":"The code that creates a transport owns its lifecycle. React and Vue "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"\ndo not close caller-supplied transports during replacement or cleanup, because\none transport can be shared by multiple chats. Call close() after its final\nconsumer is gone."}],"type":"text","url":"/docs/reference/ai-sdk-ui/websocket-chat-transport#close"},{"id":"/providers/ai-sdk-providers/openai","type":"page","content":"OpenAI","breadcrumbs":["Docs","AI SDK Providers"],"contentWithHighlights":[{"type":"text","content":"OpenAI"}],"url":"/providers/ai-sdk-providers/openai"},{"id":"/providers/ai-sdk-providers/openai-414","content":"When using useChat or other UI hooks, compaction items appear as text parts with providerMetadata. You can detect and style them differently in your UI:","contentWithHighlights":[{"type":"text","content":"When using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" or other UI hooks, compaction items appear as text parts with providerMetadata. You can detect and style them differently in your UI:"}],"type":"text","url":"/providers/ai-sdk-providers/openai#compaction-in-ui-applications"},{"id":"/providers/ai-sdk-providers/openai-497","content":"Because the UIMessage type (used by AI SDK UI hooks like useChat) does not\nsupport the providerOptions property, you can use convertToModelMessages\nfirst before passing the messages to functions like generateText or\nstreamText. For more details on providerOptions usage, see\nhere.","contentWithHighlights":[{"type":"text","content":"Because the UIMessage type (used by AI SDK UI hooks like "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":") does not\nsupport the providerOptions property, you can use convertToModelMessages\nfirst before passing the messages to functions like generateText or\nstreamText. For more details on providerOptions usage, see\nhere."}],"type":"text","url":"/providers/ai-sdk-providers/openai#image-detail"},{"id":"/cookbook/guides/llama-3_1","type":"page","content":"Get started with Llama 3.1","breadcrumbs":["Docs","Guides"],"contentWithHighlights":[{"type":"text","content":"Get started with Llama 3.1"}],"url":"/cookbook/guides/llama-3_1"},{"id":"/cookbook/guides/llama-3_1-45","content":"With three main hooks — useChat, useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app.","contentWithHighlights":[{"type":"text","content":"With three main hooks — "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app."}],"type":"text","url":"/cookbook/guides/llama-3_1#building-interactive-interfaces"},{"id":"/cookbook/guides/llama-3_1-47","content":"The useChat hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then streamed back in real-time and displayed in the chat UI.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then streamed back in real-time and displayed in the chat UI."}],"type":"text","url":"/cookbook/guides/llama-3_1#building-interactive-interfaces"},{"id":"/cookbook/guides/o1","type":"page","content":"Get started with OpenAI o1","breadcrumbs":["Docs","Guides"],"contentWithHighlights":[{"type":"text","content":"Get started with OpenAI o1"}],"url":"/cookbook/guides/o1"},{"id":"/cookbook/guides/o1-49","content":"With three main hooks — useChat, useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app.","contentWithHighlights":[{"type":"text","content":"With three main hooks — "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":", useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app."}],"type":"text","url":"/cookbook/guides/o1#building-interactive-interfaces"},{"id":"/cookbook/guides/o1-51","content":"The useChat hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI.","contentWithHighlights":[{"type":"text","content":"The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook on your root page (app/page.tsx) will make a request to your AI provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI."}],"type":"text","url":"/cookbook/guides/o1#building-interactive-interfaces"},{"id":"/cookbook/next/caching-middleware","type":"page","content":"Caching Middleware","breadcrumbs":["Docs","Next.js"],"contentWithHighlights":[{"type":"text","content":"Caching Middleware"}],"url":"/cookbook/next/caching-middleware"},{"id":"/cookbook/next/caching-middleware-5","content":"Let's create a simple chat interface that allows users to send messages to the assistant and receive responses. You will integrate the useChat hook from @ai-sdk/react to stream responses.","contentWithHighlights":[{"type":"text","content":"Let's create a simple chat interface that allows users to send messages to the assistant and receive responses. You will integrate the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook from @ai-sdk/react to stream responses."}],"type":"text","url":"/cookbook/next/caching-middleware#client"},{"id":"/docs/advanced/vercel-deployment-guide","type":"page","content":"Vercel Deployment Guide","breadcrumbs":["Docs","Advanced"],"contentWithHighlights":[{"type":"text","content":"Vercel Deployment Guide"}],"url":"/docs/advanced/vercel-deployment-guide"},{"id":"/docs/advanced/vercel-deployment-guide-46","content":"AI SDK UI helpers such as useChat and useCompletion abort the client request when you call stop(). To propagate that cancellation to a Vercel Function and its model request, you must:","contentWithHighlights":[{"type":"text","content":"AI SDK UI helpers such as "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" and useCompletion abort the client request when you call stop(). To propagate that cancellation to a Vercel Function and its model request, you must:"}],"type":"text","url":"/docs/advanced/vercel-deployment-guide#request-cancellation"},{"id":"/docs/getting-started/svelte","type":"page","content":"Svelte","breadcrumbs":["Docs","Getting Started"],"contentWithHighlights":[{"type":"text","content":"Svelte"}],"url":"/docs/getting-started/svelte"},{"id":"/docs/getting-started/svelte-94","content":"The surface-level difference is that Svelte uses classes to manage state, whereas React uses hooks, so useChat in React is Chat in Svelte. Other than that, there are a few things to keep in mind:","contentWithHighlights":[{"type":"text","content":"The surface-level difference is that Svelte uses classes to manage state, whereas React uses hooks, so "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" in React is Chat in Svelte. Other than that, there are a few things to keep in mind:"}],"type":"text","url":"/docs/getting-started/svelte#how-does-ai-sdksvelte-differ-from-ai-sdkreact"},{"id":"/docs/getting-started/svelte-52","content":"Now that you have an API route that can query an LLM, it's time to set up your frontend. The AI SDK's UI package abstracts the complexity of a chat interface into one class, Chat.\nIts properties and API are largely the same as React's useChat.","contentWithHighlights":[{"type":"text","content":"Now that you have an API route that can query an LLM, it's time to set up your frontend. The AI SDK's UI package abstracts the complexity of a chat interface into one class, Chat.\nIts properties and API are largely the same as React's "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/getting-started/svelte#wire-up-the-ui"},{"id":"/docs/getting-started/svelte-99","content":"In React, hook instances with the same id are synchronized -- so two instances of useChat will have the same messages, status, etc. if they have the same id.\nFor most use cases, you probably don't need this behavior -- but if you do, you can create a context in your root layout file using createAIContext:","contentWithHighlights":[{"type":"text","content":"In React, hook instances with the same id are synchronized -- so two instances of "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" will have the same messages, status, etc. if they have the same id.\nFor most use cases, you probably don't need this behavior -- but if you do, you can create a context in your root layout file using createAIContext:"}],"type":"text","url":"/docs/getting-started/svelte#instance-synchronization-requires-context"},{"id":"/docs/getting-started/nuxt","type":"page","content":"Vue.js (Nuxt)","breadcrumbs":["Docs","Getting Started"],"contentWithHighlights":[{"type":"text","content":"Vue.js (Nuxt)"}],"url":"/docs/getting-started/nuxt"},{"id":"/docs/getting-started/nuxt-47","content":"This page utilizes the useChat hook, which will, by default, use the API route you created earlier (/api/chat). The hook provides functions and state for handling user input and form submission. The useChat hook provides multiple utility functions and state variables:","contentWithHighlights":[{"type":"text","content":"This page utilizes the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook, which will, by default, use the API route you created earlier (/api/chat). The hook provides functions and state for handling user input and form submission. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook provides multiple utility functions and state variables:"}],"type":"text","url":"/docs/getting-started/nuxt#wire-up-the-ui"},{"id":"/docs/getting-started/nuxt-44","content":"Now that you have an API route that can query an LLM, it's time to set up your frontend. The AI SDK's  UI  package abstracts the complexity of a chat interface into one hook, useChat.","contentWithHighlights":[{"type":"text","content":"Now that you have an API route that can query an LLM, it's time to set up your frontend. The AI SDK's  UI  package abstracts the complexity of a chat interface into one hook, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/getting-started/nuxt#wire-up-the-ui"},{"id":"/docs/getting-started/expo","type":"page","content":"Expo","breadcrumbs":["Docs","Getting Started"],"contentWithHighlights":[{"type":"text","content":"Expo"}],"url":"/docs/getting-started/expo"},{"id":"/docs/getting-started/expo-49","content":"Now that you have an API route that can query an LLM, it's time to setup your frontend. The AI SDK's  UI  package abstracts the complexity of a chat interface into one hook, useChat.","contentWithHighlights":[{"type":"text","content":"Now that you have an API route that can query an LLM, it's time to setup your frontend. The AI SDK's  UI  package abstracts the complexity of a chat interface into one hook, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/getting-started/expo#wire-up-the-ui"},{"id":"/docs/getting-started/expo-51","content":"This page utilizes the useChat hook, which will, by default, use the POST API route you created earlier (/api/chat). The hook provides functions and state for handling user input and form submission. The useChat hook provides multiple utility functions and state variables:","contentWithHighlights":[{"type":"text","content":"This page utilizes the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook, which will, by default, use the POST API route you created earlier (/api/chat). The hook provides functions and state for handling user input and form submission. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook provides multiple utility functions and state variables:"}],"type":"text","url":"/docs/getting-started/expo#wire-up-the-ui"},{"id":"/docs/getting-started/nextjs-app-router","type":"page","content":"Next.js App Router","breadcrumbs":["Docs","Getting Started"],"contentWithHighlights":[{"type":"text","content":"Next.js App Router"}],"url":"/docs/getting-started/nextjs-app-router"},{"id":"/docs/getting-started/nextjs-app-router-48","content":"Now that you have a Route Handler that can query an LLM, it's time to setup your frontend. The AI SDK's  UI  package abstracts the complexity of a chat interface into one hook, useChat.","contentWithHighlights":[{"type":"text","content":"Now that you have a Route Handler that can query an LLM, it's time to setup your frontend. The AI SDK's  UI  package abstracts the complexity of a chat interface into one hook, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/getting-started/nextjs-app-router#wire-up-the-ui"},{"id":"/docs/getting-started/nextjs-app-router-51","content":"This page utilizes the useChat hook, which will, by default, use the POST API route you created earlier (/api/chat). The hook provides functions and state for handling user input and form submission. The useChat hook provides multiple utility functions and state variables:","contentWithHighlights":[{"type":"text","content":"This page utilizes the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook, which will, by default, use the POST API route you created earlier (/api/chat). The hook provides functions and state for handling user input and form submission. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook provides multiple utility functions and state variables:"}],"type":"text","url":"/docs/getting-started/nextjs-app-router#wire-up-the-ui"},{"id":"/docs/getting-started/nextjs-pages-router","type":"page","content":"Next.js Pages Router","breadcrumbs":["Docs","Getting Started"],"contentWithHighlights":[{"type":"text","content":"Next.js Pages Router"}],"url":"/docs/getting-started/nextjs-pages-router"},{"id":"/docs/getting-started/nextjs-pages-router-51","content":"This page utilizes the useChat hook, which will, by default, use the POST API route you created earlier (/api/chat). The hook provides functions and state for handling user input and form submission. The useChat hook provides multiple utility functions and state variables:","contentWithHighlights":[{"type":"text","content":"This page utilizes the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook, which will, by default, use the POST API route you created earlier (/api/chat). The hook provides functions and state for handling user input and form submission. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook provides multiple utility functions and state variables:"}],"type":"text","url":"/docs/getting-started/nextjs-pages-router#wire-up-the-ui"},{"id":"/docs/getting-started/nextjs-pages-router-49","content":"Now that you have an API route that can query an LLM, it's time to set up your frontend. The AI SDK's  UI  package abstracts the complexity of a chat interface into one hook, useChat.","contentWithHighlights":[{"type":"text","content":"Now that you have an API route that can query an LLM, it's time to set up your frontend. The AI SDK's  UI  package abstracts the complexity of a chat interface into one hook, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/getting-started/nextjs-pages-router#wire-up-the-ui"},{"id":"/docs/getting-started/tanstack-start","type":"page","content":"TanStack Start","breadcrumbs":["Docs","Getting Started"],"contentWithHighlights":[{"type":"text","content":"TanStack Start"}],"url":"/docs/getting-started/tanstack-start"},{"id":"/docs/getting-started/tanstack-start-47","content":"Now that you have a Route Handler that can query an LLM, it's time to setup your frontend. The AI SDK's  UI  package abstracts the complexity of a chat interface into one hook, useChat.","contentWithHighlights":[{"type":"text","content":"Now that you have a Route Handler that can query an LLM, it's time to setup your frontend. The AI SDK's  UI  package abstracts the complexity of a chat interface into one hook, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":"."}],"type":"text","url":"/docs/getting-started/tanstack-start#wire-up-the-ui"},{"id":"/docs/getting-started/tanstack-start-49","content":"This page utilizes the useChat hook, which will, by default, use the POST API route you created earlier (/api/chat). The hook provides functions and state for handling user input and form submission. The useChat hook provides multiple utility functions and state variables:","contentWithHighlights":[{"type":"text","content":"This page utilizes the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook, which will, by default, use the POST API route you created earlier (/api/chat). The hook provides functions and state for handling user input and form submission. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook provides multiple utility functions and state variables:"}],"type":"text","url":"/docs/getting-started/tanstack-start#wire-up-the-ui"},{"id":"/cookbook/next/generate-image-with-chat-prompt","type":"page","content":"Generate Image with Chat Prompt","breadcrumbs":["Docs","Next.js"],"contentWithHighlights":[{"type":"text","content":"Generate Image with Chat Prompt"}],"url":"/cookbook/next/generate-image-with-chat-prompt"},{"id":"/cookbook/next/generate-image-with-chat-prompt-6","content":"Let's create a simple chat interface with useChat. You will call the /api/chat endpoint to generate the assistant's response. If the assistant's response contains a generateImage tool invocation, you will display the tool result (the image in base64 format and the prompt) using the Next Image component.","contentWithHighlights":[{"type":"text","content":"Let's create a simple chat interface with "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":". You will call the /api/chat endpoint to generate the assistant's response. If the assistant's response contains a generateImage tool invocation, you will display the tool result (the image in base64 format and the prompt) using the Next Image component."}],"type":"text","url":"/cookbook/next/generate-image-with-chat-prompt#client"},{"id":"/cookbook/next/stream-text-with-chat-prompt","type":"page","content":"Stream Text with Chat Prompt","breadcrumbs":["Docs","Next.js"],"contentWithHighlights":[{"type":"text","content":"Stream Text with Chat Prompt"}],"url":"/cookbook/next/stream-text-with-chat-prompt"},{"id":"/cookbook/next/stream-text-with-chat-prompt-4","content":"Let's create a React component that imports the useChat hook from the @ai-sdk/react module. The useChat hook will call the /api/chat endpoint when the user sends a message. The endpoint will generate the assistant's response based on the conversation history and stream it to the client.","contentWithHighlights":[{"type":"text","content":"Let's create a React component that imports the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook from the @ai-sdk/react module. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook will call the /api/chat endpoint when the user sends a message. The endpoint will generate the assistant's response based on the conversation history and stream it to the client."}],"type":"text","url":"/cookbook/next/stream-text-with-chat-prompt#client"},{"id":"/docs/foundations/prompts","type":"page","content":"Prompts","breadcrumbs":["Docs","Foundations"],"contentWithHighlights":[{"type":"text","content":"Prompts"}],"url":"/docs/foundations/prompts"},{"id":"/docs/foundations/prompts-43","content":"AI SDK UI hooks like useChat return\narrays of UIMessage objects, which do not support provider options. We\nrecommend using the\nconvertToModelMessages\nfunction to convert UIMessage objects to\nModelMessage objects before\napplying or appending message(s) or message parts with providerOptions.","contentWithHighlights":[{"type":"text","content":"AI SDK UI hooks like "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" return\narrays of UIMessage objects, which do not support provider options. We\nrecommend using the\nconvertToModelMessages\nfunction to convert UIMessage objects to\nModelMessage objects before\napplying or appending message(s) or message parts with providerOptions."}],"type":"text","url":"/docs/foundations/prompts#message-part-level"},{"id":"/docs/troubleshooting/abort-breaks-resumable-streams","type":"page","content":"Abort and resumable streams","breadcrumbs":["Docs","Troubleshooting"],"contentWithHighlights":[{"type":"text","content":"Abort and resumable streams"}],"url":"/docs/troubleshooting/abort-breaks-resumable-streams"},{"id":"/docs/troubleshooting/abort-breaks-resumable-streams-5","content":"When using useChat with resume: true for stream resumption, client-side aborts are treated as disconnects. Closing a tab, refreshing the page, navigating away, or calling stop() closes the current HTTP connection, but it should not cancel the underlying generation.","contentWithHighlights":[{"type":"text","content":"When using "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" with resume: true for stream resumption, client-side aborts are treated as disconnects. Closing a tab, refreshing the page, navigating away, or calling stop() closes the current HTTP connection, but it should not cancel the underlying generation."}],"type":"text","url":"/docs/troubleshooting/abort-breaks-resumable-streams#issue"},{"id":"/docs/ai-sdk-harnesses/tools","type":"page","content":"Tools","breadcrumbs":["Docs","AI SDK Harnesses"],"contentWithHighlights":[{"type":"text","content":"Tools"}],"url":"/docs/ai-sdk-harnesses/tools"},{"id":"/docs/ai-sdk-harnesses/tools-51","content":"When approval is required, the stream pauses after a tool-approval-request.\nContinue the same session by sending a tool approval response message. In UI\nflows, useChat sends those messages for you when you add the approval result.\nIn direct agent code, pass the approval response as messages on the next\nstream() or generate() call.","contentWithHighlights":[{"type":"text","content":"When approval is required, the stream pauses after a tool-approval-request.\nContinue the same session by sending a tool approval response message. In UI\nflows, "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" sends those messages for you when you add the approval result.\nIn direct agent code, pass the approval response as messages on the next\nstream() or generate() call."}],"type":"text","url":"/docs/ai-sdk-harnesses/tools#tool-approvals"},{"id":"/cookbook/next/call-tools-multiple-steps","type":"page","content":"Call Tools in Multiple Steps","breadcrumbs":["Docs","Next.js"],"contentWithHighlights":[{"type":"text","content":"Call Tools in Multiple Steps"}],"url":"/cookbook/next/call-tools-multiple-steps"},{"id":"/cookbook/next/call-tools-multiple-steps-4","content":"Let's create a React component that imports the useChat hook from the @ai-sdk/react module. The useChat hook will call the /api/chat endpoint when the user sends a message. The endpoint will generate the assistant's response based on the conversation history and stream it to the client. If the assistant responds with a tool call, the hook will automatically display them as well.","contentWithHighlights":[{"type":"text","content":"Let's create a React component that imports the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook from the @ai-sdk/react module. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook will call the /api/chat endpoint when the user sends a message. The endpoint will generate the assistant's response based on the conversation history and stream it to the client. If the assistant responds with a tool call, the hook will automatically display them as well."}],"type":"text","url":"/cookbook/next/call-tools-multiple-steps#client"},{"id":"/cookbook/next/call-tools","type":"page","content":"Call Tools","breadcrumbs":["Docs","Next.js"],"contentWithHighlights":[{"type":"text","content":"Call Tools"}],"url":"/cookbook/next/call-tools"},{"id":"/cookbook/next/call-tools-4","content":"Let's create a React component that imports the useChat hook from the @ai-sdk/react module. The useChat hook will call the /api/chat endpoint when the user sends a message. The endpoint will generate the assistant's response based on the conversation history and stream it to the client. If the assistant responds with a tool call, the hook will automatically display them as well.","contentWithHighlights":[{"type":"text","content":"Let's create a React component that imports the "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook from the @ai-sdk/react module. The "},{"type":"text","content":"useChat","styles":{"highlight":true}},{"type":"text","content":" hook will call the /api/chat endpoint when the user sends a message. The endpoint will generate the assistant's response based on the conversation history and stream it to the client. If the assistant responds with a tool call, the hook will automatically display them as well."}],"type":"text","url":"/cookbook/next/call-tools#client"}]