vercel · Vercel AI SDK Docs
AI SDK UI: Completion
The provided content appears to be a broken or malformed HTML scrape containing only a script to prevent 1Password from flattening code blocks, rather than the actual documentation for AI SDK UI Completion.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
AI SDK UI: Completion
The provided content appears to be a broken or malformed HTML scrape containing only a script to prevent 1Password from flattening code blocks, rather than the actual documentation for AI SDK UI Completion.
When To Use
Use when you need to implement text completion interfaces using the AI SDK UI components in a web application.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/ai-sdk-ui-completion-workflow-guide.md | A guide explaining how to use the useCompletion hook to manage streaming text completions and UI states in the AI SDK. | Questions about a guide explaining how to use the useCompletion hook to manage streaming text completions and UI states in the AI SDK. |
examples/ai-sdk-ui-completion-react-usecompletion.text | A React client component demonstrating the use of the useCompletion hook to handle text completion streams from an API route. | Exact payloads, commands, or snippets shown in A React client component demonstrating the use of the useCompletion hook to handle text completion streams from an AP... |
examples/ai-sdk-ui-completion-route-handler-typescript.text | A TypeScript route handler implementation using streamText to return a UI message stream response for the AI SDK UI completion pattern. | Exact payloads, commands, or snippets shown in A TypeScript route handler implementation using streamText to return a UI message stream response for the AI SDK UI c... |
examples/ai-sdk-ui-completion-react-usecompletion-hook.text | A React code example demonstrating the usage of the useCompletion hook from the AI SDK UI library. | Exact payloads, commands, or snippets shown in A React code example demonstrating the usage of the useCompletion hook from the AI SDK UI library. |
examples/ai-sdk-ui-completion-react-usecompletion-error-handling.text | A React code example demonstrating how to handle and display error messages using the useCompletion hook from the AI SDK UI. | Exact payloads, commands, or snippets shown in A React code example demonstrating how to handle and display error messages using the useCompletion hook from the AI... |
examples/ai-sdk-ui-completion-react-usecompletion-hook-2.text | A React code example demonstrating the usage of the useCompletion hook to manage input state and handle completion responses. | Exact payloads, commands, or snippets shown in A React code example demonstrating the usage of the useCompletion hook to manage input state and handle completion re... |
examples/ai-sdk-ui-completion-react-usecompletion-hook-usage.text | A React code example demonstrating the implementation of the useCompletion hook to manage completion states and UI controls. | Exact payloads, commands, or snippets shown in A React code example demonstrating the implementation of the useCompletion hook to manage completion states and UI co... |
examples/ai-sdk-ui-completion-usecompletion-throttle.text | A React code example demonstrating how to use the experimental_throttle option within the useCompletion hook from the Vercel AI SDK. | Exact payloads, commands, or snippets shown in A React code example demonstrating how to use the experimentalthrottle option within the useCompletion hook from the... |
examples/ai-sdk-ui-completion-usecompletion-hook.text | A React code example demonstrating the usage of the useCompletion hook with onFinish and onError callbacks. | Exact payloads, commands, or snippets shown in A React code example demonstrating the usage of the useCompletion hook with onFinish and onError callbacks. |
examples/ai-sdk-ui-completion-usecompletion-react-hook-usage.text | A code example demonstrating the implementation of the useCompletion hook with custom API endpoints and headers. | Exact payloads, commands, or snippets shown in A code example demonstrating the implementation of the useCompletion hook with custom API endpoints and headers. |
What This Skill Covers
- The useCompletion hook allows you to create a user interface to handle text completions in your application. It enables the streaming of text completions fro...
- Main sections:
Example,Customized UI,Loading and error states,Controlled input,Cancelation.
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/completion