vercel · Vercel AI SDK Docs
AI SDK UI: Chatbot
Teaches how to implement a conversational chat interface using the AI SDK UI components, including managing message state and handling streaming responses.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
AI SDK UI: Chatbot
Teaches how to implement a conversational chat interface using the AI SDK UI components, including managing message state and handling streaming responses.
When To Use
Use when building a real-time chat interface that requires managing message history and streaming AI responses to a frontend component.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/ai-sdk-ui-chatbot-workflow-guide.md | A guide explaining how to use the useChat hook to build conversational user interfaces with streaming message support and state management. | Questions about a guide explaining how to use the useChat hook to build conversational user interfaces with streaming message support... |
examples/ai-sdk-ui-chatbot-react-usechat-implementation.text | A React client component demonstrating the use of the useChat hook to implement a chatbot interface. | Exact payloads, commands, or snippets shown in A React client component demonstrating the use of the useChat hook to implement a chatbot interface. |
examples/ai-sdk-ui-chatbot-route-handler-typescript.text | A TypeScript implementation of a POST route handler using streamText to process UIMessage arrays for a chatbot interface. | Exact payloads, commands, or snippets shown in A TypeScript implementation of a POST route handler using streamText to process UIMessage arrays for a chatbot interf... |
examples/ai-sdk-ui-chatbot-react-usechat-implementation-2.text | A React client component demonstrating the use of the useChat hook to implement a chatbot interface with the AI SDK. | Exact payloads, commands, or snippets shown in A React client component demonstrating the use of the useChat hook to implement a chatbot interface with the AI SDK. |
examples/ai-sdk-ui-chatbot-react-usechat-implementation-3.text | A React client component demonstrating the use of the useChat hook to implement a chatbot interface. | Exact payloads, commands, or snippets shown in A React client component demonstrating the use of the useChat hook to implement a chatbot interface. |
examples/ai-sdk-ui-chatbot-react-usechat-implementation-4.text | A React code implementation demonstrating the use of the useChat hook to manage message state and render a chat interface. | Exact payloads, commands, or snippets shown in A React code implementation demonstrating the use of the useChat hook to manage message state and render a chat inter... |
examples/ai-sdk-ui-chatbot-react-usechat-hook-usage.text | A React code example demonstrating the implementation of the useChat hook to manage chatbot state and UI controls. | Exact payloads, commands, or snippets shown in A React code example demonstrating the implementation of the useChat hook to manage chatbot state and UI controls. |
examples/ai-sdk-ui-chatbot-usechat-regenerate.text | A React code example demonstrating the use of the useChat hook to implement a regenerate functionality within a chatbot interface. | Exact payloads, commands, or snippets shown in A React code example demonstrating the use of the useChat hook to implement a regenerate functionality within a chatb... |
examples/ai-sdk-ui-chatbot-usechat-throttle.text | A code example demonstrating how to use the experimental_throttle option within the useChat hook to limit message and data update frequency. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the experimentalthrottle option within the useChat hook to limit message and... |
examples/ai-sdk-ui-chatbot-usechat-callbacks.text | A React code example demonstrating the use of onFinish, onError, and onData callbacks within the useChat hook for building a chatbot UI. | Exact payloads, commands, or snippets shown in A React code example demonstrating the use of onFinish, onError, and onData callbacks within the useChat hook for bui... |
examples/ai-sdk-ui-chatbot-react-usechat-custom-transport.text | A React code example demonstrating how to use the useChat hook with a custom DefaultChatTransport configuration. | Exact payloads, commands, or snippets shown in A React code example demonstrating how to use the useChat hook with a custom DefaultChatTransport configuration. |
examples/ai-sdk-ui-chatbot-usechat-custom-transport-react.text | A React code example demonstrating how to use the useChat hook with a custom DefaultChatTransport and custom headers/body. | Exact payloads, commands, or snippets shown in A React code example demonstrating how to use the useChat hook with a custom DefaultChatTransport and custom headers/... |
examples/ai-sdk-ui-chatbot-send-message-options.text | A code snippet demonstrating how to pass headers, body, and metadata options to the sendMessage function within the AI SDK UI chatbot implementation. | Exact payloads, commands, or snippets shown in A code snippet demonstrating how to pass headers, body, and metadata options to the sendMessage function within the A... |
examples/ai-sdk-ui-chatbot-react-usechat-implementation-5.text | A React client component demonstrating the use of the useChat hook to manage chat messages and input state. | Exact payloads, commands, or snippets shown in A React client component demonstrating the use of the useChat hook to manage chat messages and input state. |
examples/ai-sdk-ui-chatbot-vercel-ai-sdk-ui-chatbot-route-handler-typescript.text | A TypeScript implementation of a POST route handler for a chatbot using the Vercel AI SDK UI. | Exact payloads, commands, or snippets shown in A TypeScript implementation of a POST route handler for a chatbot using the Vercel AI SDK UI. |
examples/ai-sdk-ui-chatbot-server-message-metadata-stream-response.text | A server-side implementation using toUIMessageStreamResponse to attach metadata like model name and token usage to message stream parts. | Exact payloads, commands, or snippets shown in A server-side implementation using toUIMessageStreamResponse to attach metadata like model name and token usage to me... |
examples/ai-sdk-ui-chatbot-vercel-ai-sdk-ui-chatbot-client-metadata-access.text | A React code snippet demonstrating how to access and render message metadata such as timestamps within an AI SDK chatbot interface. | Exact payloads, commands, or snippets shown in A React code snippet demonstrating how to access and render message metadata such as timestamps within an AI SDK chat... |
examples/ai-sdk-ui-chatbot-react-usechat-implementation-6.text | A React component implementation demonstrating the use of the useChat hook from the AI SDK to manage chatbot state and message transport. | Exact payloads, commands, or snippets shown in A React component implementation demonstrating the use of the useChat hook from the AI SDK to manage chatbot state an... |
examples/ai-sdk-ui-chatbot-vercel-ai-sdk-ui-chatbot-route-handler.text | A TypeScript implementation of a POST route handler using streamText to process chat messages for the AI SDK UI chatbot. | Exact payloads, commands, or snippets shown in A TypeScript implementation of a POST route handler using streamText to process chat messages for the AI SDK UI chatbot. |
examples/ai-sdk-ui-chatbot-react-usechat-implementation-7.text | A React component implementation demonstrating the use of the useChat hook from the AI SDK to manage chatbot state and message transport. | Exact payloads, commands, or snippets shown in A React component implementation demonstrating the use of the useChat hook from the AI SDK to manage chatbot state an... |
examples/ai-sdk-ui-chatbot-vercel-ai-sdk-ui-chatbot-route-handler-2.text | A TypeScript implementation of a POST route handler for managing chat messages and triggers in an AI SDK chatbot interface. | Exact payloads, commands, or snippets shown in A TypeScript implementation of a POST route handler for managing chat messages and triggers in an AI SDK chatbot inte... |
examples/ai-sdk-ui-chatbot-react-usechat.text | A React component implementation demonstrating the use of the useChat hook with a ToolLoopAgent for building a chatbot interface. | Exact payloads, commands, or snippets shown in A React component implementation demonstrating the use of the useChat hook with a ToolLoopAgent for building a chatbo... |
examples/ai-sdk-ui-chatbot-route-handler-implementation.text | A TypeScript implementation of a POST route handler using streamText and convertToModelMessages to process chatbot messages. | Exact payloads, commands, or snippets shown in A TypeScript implementation of a POST route handler using streamText and convertToModelMessages to process chatbot me... |
examples/ai-sdk-ui-chatbot-vercel-ai-sdk-ui-chatbot-custom-message-metadata-types.text | A TypeScript code example demonstrating how to extend the UIMessage type with custom metadata for a chatbot interface. | Exact payloads, commands, or snippets shown in A TypeScript code example demonstrating how to extend the UIMessage type with custom metadata for a chatbot interface. |
examples/ai-sdk-ui-chatbot-react-usechat-implementation-8.text | A React client component demonstrating the use of the useChat hook to implement a chatbot interface. | Exact payloads, commands, or snippets shown in A React client component demonstrating the use of the useChat hook to implement a chatbot interface. |
examples/ai-sdk-ui-chatbot-react-usechat-implementation-9.text | A React client component demonstrating the use of the useChat hook to implement a chatbot interface. | Exact payloads, commands, or snippets shown in A React client component demonstrating the use of the useChat hook to implement a chatbot interface. |
examples/ai-sdk-ui-chatbot-react-usechat-textstreamchattransport.text | A React client component demonstrating the use of the useChat hook with TextStreamChatTransport for building a chatbot interface. | Exact payloads, commands, or snippets shown in A React client component demonstrating the use of the useChat hook with TextStreamChatTransport for building a chatbo... |
examples/ai-sdk-ui-chatbot-route-handler-implementation-2.text | A TypeScript implementation of a POST route handler using streamText and convertToModelMessages to process chat messages. | Exact payloads, commands, or snippets shown in A TypeScript implementation of a POST route handler using streamText and convertToModelMessages to process chat messa... |
examples/ai-sdk-ui-chatbot-react-message-rendering-logic.text | A React code snippet demonstrating how to map through message parts to render text and reasoning content in a chatbot interface. | Exact payloads, commands, or snippets shown in A React code snippet demonstrating how to map through message parts to render text and reasoning content in a chatbot... |
examples/ai-sdk-ui-chatbot-route-handler-implementation-3.text | A TypeScript implementation of a POST route handler using streamText and convertToModelMessages to process chat messages. | Exact payloads, commands, or snippets shown in A TypeScript implementation of a POST route handler using streamText and convertToModelMessages to process chat messa... |
examples/ai-sdk-ui-chatbot-vercel-ai-sdk-ui-chatbot-react-component-implementatio.text | A React code implementation demonstrating how to map and render chat messages and their associated source parts in an AI SDK chatbot interface. | Exact payloads, commands, or snippets shown in A React code implementation demonstrating how to map and render chat messages and their associated source parts in an... |
examples/ai-sdk-ui-chatbot-react-message-rendering-logic-2.text | A React code snippet demonstrating how to map through message parts to render text and image content within a chatbot interface. | Exact payloads, commands, or snippets shown in A React code snippet demonstrating how to map through message parts to render text and image content within a chatbot... |
examples/ai-sdk-ui-chatbot-react-usechat-implementation-10.text | A React client component demonstrating the use of the useChat hook to build a chatbot interface. | Exact payloads, commands, or snippets shown in A React client component demonstrating the use of the useChat hook to build a chatbot interface. |
examples/ai-sdk-ui-chatbot-react-usechat-implementation-11.text | A React client component demonstrating the use of the useChat hook to manage chat messages and input state for a chatbot interface. | Exact payloads, commands, or snippets shown in A React client component demonstrating the use of the useChat hook to manage chat messages and input state for a chat... |
examples/ai-sdk-ui-chatbot-tool-inference.text | A code example demonstrating how to use Zod and InferUITool to infer types from a tool definition in the AI SDK UI chatbot implementation. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use Zod and InferUITool to infer types from a tool definition in the AI SDK UI ch... |
examples/ai-sdk-ui-chatbot-vercel-ai-sdk-ui-chatbot-tool-definition.text | A TypeScript code example demonstrating how to define tool schemas and execution logic for an AI SDK chatbot interface. | Exact payloads, commands, or snippets shown in A TypeScript code example demonstrating how to define tool schemas and execution logic for an AI SDK chatbot interface. |
examples/ai-sdk-ui-chatbot-typescript-types-definition.text | TypeScript type definitions for UIMessage, InferUITools, and UIDataTypes used in the AI SDK UI chatbot implementation. | Exact payloads, commands, or snippets shown in TypeScript type definitions for UIMessage, InferUITools, and UIDataTypes used in the AI SDK UI chatbot implementation. |
examples/ai-sdk-ui-chatbot-react-usechat-implementation-12.text | A React code example demonstrating the implementation of a chatbot interface using the useChat hook from the AI SDK. | Exact payloads, commands, or snippets shown in A React code example demonstrating the implementation of a chatbot interface using the useChat hook from the AI SDK. |
What This Skill Covers
- The useChat hook makes it effortless to create a conversational user interface for your chatbot application. It enables the streaming of chat messages from y...
- Main sections:
Example,Customized UI,Status,Error State,Modify messages.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://ai-sdk.dev/docs/ai-sdk-ui/chatbot