vercel · Vercel AI SDK Docs
AI SDK UI: Chatbot Tool Usage
Implements tool calling within a chatbot UI using the AI SDK, including handling tool results and updating the chat interface to reflect tool execution states.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
AI SDK UI: Chatbot Tool Usage
Implements tool calling within a chatbot UI using the AI SDK, including handling tool results and updating the chat interface to reflect tool execution states.
When To Use
Use when you need to build a chat interface that can trigger functions, display tool execution status, and render tool outputs to the user.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/ai-sdk-ui-chatbot-tool-usage-workflow-guide.md | Documentation explaining how to implement and manage different types of tool execution within an AI SDK chatbot interface using useChat and streamText. | Questions about documentation explaining how to implement and manage different types of tool execution within an AI SDK chatbot inter... |
examples/ai-sdk-ui-chatbot-tool-usage-vercel-ai-sdk-ui-chatbot-tool-usage-typescr.text | A TypeScript implementation demonstrating how to handle tool calls and message conversion within an AI SDK UI chatbot route. | Exact payloads, commands, or snippets shown in A TypeScript implementation demonstrating how to handle tool calls and message conversion within an AI SDK UI chatbot... |
examples/ai-sdk-ui-chatbot-tool-usage-react.text | A React client component demonstrating how to implement tool usage within a chatbot interface using the AI SDK UI hooks. | Exact payloads, commands, or snippets shown in A React client component demonstrating how to implement tool usage within a chatbot interface using the AI SDK UI hooks. |
examples/ai-sdk-ui-chatbot-tool-usage-react-usechat.text | A React client component demonstrating how to use the useChat hook to handle tool calls and tool outputs within a chatbot interface. | Exact payloads, commands, or snippets shown in A React client component demonstrating how to use the useChat hook to handle tool calls and tool outputs within a cha... |
examples/ai-sdk-ui-chatbot-tool-usage-typescript.text | A TypeScript code example demonstrating how to implement tool calling within an AI SDK UI chatbot using streamText and zod schemas. | Exact payloads, commands, or snippets shown in A TypeScript code example demonstrating how to implement tool calling within an AI SDK UI chatbot using streamText an... |
examples/ai-sdk-ui-chatbot-tool-usage-ai-sdk-ui-chatbot-tool-approval-react.text | A React client component demonstrating how to use the useChat hook to handle tool approval states in a chatbot interface. | Exact payloads, commands, or snippets shown in A React client component demonstrating how to use the useChat hook to handle tool approval states in a chatbot interf... |
examples/ai-sdk-ui-chatbot-tool-usage-ai-sdk-ui-chatbot-tool-approval-usechat-rea.text | A React code example demonstrating how to use the useChat hook with lastAssistantMessageIsCompleteWithApprovalResponses to handle tool approval workflows. | Exact payloads, commands, or snippets shown in A React code example demonstrating how to use the useChat hook with lastAssistantMessageIsCompleteWithApprovalRespons... |
examples/ai-sdk-ui-chatbot-tool-usage-message-parts-mapping.text | A code snippet demonstrating how to map through message parts to render different tool types like static and dynamic tools in an AI SDK UI chatbot. | Exact payloads, commands, or snippets shown in A code snippet demonstrating how to map through message parts to render different tool types like static and dynamic... |
examples/ai-sdk-ui-chatbot-tool-usage-vercel-ai-sdk-ui-chatbot-tool-usage-typescr-2.text | A TypeScript POST route handler implementation demonstrating how to stream tool calls and messages using the AI SDK UI chatbot pattern. | Exact payloads, commands, or snippets shown in A TypeScript POST route handler implementation demonstrating how to stream tool calls and messages using the AI SDK U... |
examples/ai-sdk-ui-chatbot-tool-usage-react-component.text | A React component implementation demonstrating how to render different tool part types and states within an AI SDK chatbot interface. | Exact payloads, commands, or snippets shown in A React component implementation demonstrating how to render different tool part types and states within an AI SDK ch... |
examples/ai-sdk-ui-chatbot-tool-usage-react-message-parts-rendering.text | A React code snippet demonstrating how to map through message parts to render different tool call types and step boundaries in a chatbot UI. | Exact payloads, commands, or snippets shown in A React code snippet demonstrating how to map through message parts to render different tool call types and step boun... |
examples/ai-sdk-ui-chatbot-tool-usage-typescript-2.text | A TypeScript implementation of a chatbot route using streamText with tool definitions and message conversion. | Exact payloads, commands, or snippets shown in A TypeScript implementation of a chatbot route using streamText with tool definitions and message conversion. |
examples/ai-sdk-ui-chatbot-tool-usage-error-handler-typescript.text | A TypeScript function implementation for handling and formatting error messages within an AI SDK UI chatbot tool usage context. | Exact payloads, commands, or snippets shown in A TypeScript function implementation for handling and formatting error messages within an AI SDK UI chatbot tool usag... |
examples/ai-sdk-ui-chatbot-tool-usage.text | A code example demonstrating how to implement tool usage within an AI SDK UI chatbot component. | Exact payloads, commands, or snippets shown in A code example demonstrating how to implement tool usage within an AI SDK UI chatbot component. |
examples/ai-sdk-ui-chatbot-tool-usage-createuimessageresponse.text | A code example demonstrating the implementation of createUIMessageResponse with custom error handling for chatbot tool usage in the AI SDK UI. | Exact payloads, commands, or snippets shown in A code example demonstrating the implementation of createUIMessageResponse with custom error handling for chatbot too... |
What This Skill Covers
- With useChat and streamText, you can use tools in your chatbot application. The AI SDK supports three types of tools in this context:
- Main sections:
Example,API route,Client-side page,Tool Execution Approval,Server Setup.
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-tool-usage