vercel · Vercel AI SDK Docs
AI SDK UI: Generative User Interfaces
Implements generative user interfaces by allowing LLMs to stream and render interactive React components directly within a chat interface.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
AI SDK UI: Generative User Interfaces
Implements generative user interfaces by allowing LLMs to stream and render interactive React components directly within a chat interface.
When To Use
Use when you need to build chat applications that render dynamic, interactive React components instead of just plain text or markdown based on model outputs.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/ai-sdk-ui-generative-user-interfaces-workflow-guide.md | A guide explaining how to build generative user interfaces by allowing large language models to generate UI components through tool calling. | Questions about a guide explaining how to build generative user interfaces by allowing large language models to generate UI component... |
examples/ai-sdk-ui-generative-user-interfaces-react-usechat.text | A React client component demonstrating the use of the useChat hook to implement generative user interfaces within the AI SDK. | Exact payloads, commands, or snippets shown in A React client component demonstrating the use of the useChat hook to implement generative user interfaces within the... |
examples/ai-sdk-ui-generative-user-interfaces-nextjs-route-handler.text | A Next.js route handler implementation using streamText to process UIMessages for generative user interfaces. | Exact payloads, commands, or snippets shown in A Next.js route handler implementation using streamText to process UIMessages for generative user interfaces. |
examples/ai-sdk-ui-generative-user-interfaces-tool-definition.text | A TypeScript code example demonstrating how to define a weather tool using the AI SDK tool function and Zod schema for generative user interfaces. | Exact payloads, commands, or snippets shown in A TypeScript code example demonstrating how to define a weather tool using the AI SDK tool function and Zod schema fo... |
examples/ai-sdk-ui-generative-user-interfaces-nextjs-route-handler-2.text | A Next.js route handler implementation using streamText to process UIMessage arrays for generative user interfaces. | Exact payloads, commands, or snippets shown in A Next.js route handler implementation using streamText to process UIMessage arrays for generative user interfaces. |
examples/ai-sdk-ui-generative-user-interfaces-weather-component-typescript.text | A TypeScript definition and React component for a Weather UI element used in generative user interfaces. | Exact payloads, commands, or snippets shown in A TypeScript definition and React component for a Weather UI element used in generative user interfaces. |
examples/ai-sdk-ui-generative-user-interfaces-react-usechat-weather-component.text | A React client component demonstrating how to use the useChat hook to render dynamic weather components within a generative user interface. | Exact payloads, commands, or snippets shown in A React client component demonstrating how to use the useChat hook to render dynamic weather components within a gene... |
examples/ai-sdk-ui-generative-user-interfaces-stock-tool-definition.text | A TypeScript code snippet defining a stock price tool using createTool for generative user interfaces. | Exact payloads, commands, or snippets shown in A TypeScript code snippet defining a stock price tool using createTool for generative user interfaces. |
examples/ai-sdk-ui-generative-user-interfaces-stock-component-typescript.text | A TypeScript definition for a Stock component used to demonstrate generative user interfaces within the AI SDK UI. | Exact payloads, commands, or snippets shown in A TypeScript definition for a Stock component used to demonstrate generative user interfaces within the AI SDK UI. |
examples/ai-sdk-ui-generative-user-interfaces-react-usechat-2.text | A React client component demonstrating how to use the useChat hook to render dynamic UI components like Weather and Stock based on AI responses. | Exact payloads, commands, or snippets shown in A React client component demonstrating how to use the useChat hook to render dynamic UI components like Weather and S... |
What This Skill Covers
- Generative user interfaces (generative UI) is the process of allowing a large language model (LLM) to go beyond text and "generate UI". This creates a more e...
- Main sections:
Build a Generative UI Chat Interface,Basic Chat Implementation,Create a Tool,Update the API Route,Create UI Components.
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/generative-user-interfaces