How Generative UI Works: AI Interfaces with the Vercel AI SDK and Claude
What you’ll learn
- How Generative UI differs from text responses, and how tool calls lead to an interface
- Use cases in the Vercel AI SDK, Claude Artifacts, and Claude Design, and how they differ
- Constraints, safety considerations, and operational concerns to check before adopting it in a product
From Prose to Interactive Interfaces with Generative UI
Generative UI builds an AI response as an interactive interface with buttons, inputs, or charts, rather than only prose. Asking about the weather might display a weather card; requesting a booking might bring up a calendar for selecting a date.
However, approaches described as Generative UI do not all create interfaces in the same way. Development tools such as the Vercel AI SDK can display tool results through interface components prepared by developers. Claude Artifacts—a dedicated area for viewing and interacting with AI-created work—can generate application code and interfaces from a conversation.
This difference changes both how much generation is left to AI and what users or developers must check for quality and correct behavior. When considering adoption in a product, starting with a small set of components and checking display quality and verification effort makes it easier to judge how far the approach can extend.
This article explains how Generative UI works and where it is used, to help you consider where to try it and which constraints to check first.
Generative UI Basics and Differences from Text Responses
Generative UI is a mechanism through which a large language model (LLM, an AI model that understands and generates text) generates an interactive user interface (UI, the screen through which people view information and interact) in addition to prose.
The Vercel AI SDK documentation describes Generative UI as a process of connecting tool-call results to React components. [1] A tool call invokes a function to perform a particular task. A React component is an interface element built with the React development library.
Traditional chatbots primarily answered questions in prose. Generative UI can instead show a weather card with temperature and precipitation probability, or a calendar for selecting a booking date. Users can continue interacting within the response instead of only reading it.
This mechanism shows how the model can choose a response format according to the conversation. It can be understood as a way to switch between prose explanations and interfaces for viewing information or taking action, based on conversational context.
From Tool Calls to Interface Display
At the center of Generative UI are the tools developers make available to the model. Based on the tool list and conversational context, the model decides when to use a tool and which one to use. [1]
The weather-tool example in the Vercel AI SDK documentation follows this process.
- Give the model a prompt (a request or instruction) and a list of available tools.
- The model decides whether to call a tool.
- The called tool performs its task and returns a result, such as weather data.
- The application passes the data to a dedicated React component and displays it as a weather card or another interface element.
This approach passes results to components designed for the data rather than displaying them only as text. It does not require generating interface code from scratch every time. The display can also switch from a loading state to the retrieved result as tool execution progresses. [1]
Users can interact with the displayed interface and check the outcome, creating a sequence from conversation to tool call, interface display, user action, and result verification.
AI SDK UI and Experimental AI SDK RSC
The current Vercel AI SDK UI documentation describes a structure using streamText and useChat to handle tool execution state and results as parts of a message. [1]
Separately, streamUI uses React Server Components (a React mechanism for rendering components on the server and sending them to the user). It is documented as an experimental API (a way to invoke functionality from a program) in AI SDK RSC. This feature streams components, sending them progressively for display. [2]
Both relate to Generative UI, but the documentation gives them different statuses. When considering implementation, distinguish the approach described in AI SDK UI from the experimental features in AI SDK RSC.
Use Cases in Development Tools and AI Chat Products
The use cases introduced here can be organized by where they are used: developers incorporating Generative UI into their applications, and people using it through features in AI chat products.
Displaying Custom Components with the Vercel AI SDK
Vercel explains in its official blog that AI SDK 3.0 introduced Generative UI support. [3] Developers can display tool-call results as custom React components inside a chat application.
Official documentation and published examples describe uses such as these.
- Components that present data visually, such as weather cards
- Interactive charts and dashboards using Recharts (a library for drawing charts in React) or similar libraries
- Interfaces involving user interaction, such as selecting dates or choosing from search results
Vercel also describes supporting features for AI agents and applications. Workflows can pause and resume long-running processes; Sandbox runs user-generated code or AI agent output in an isolated environment; and AI Elements provides interface components for AI applications. [4][5][6] A sandbox is an isolated environment for executing code while limiting its effects on other environments.
Given their roles, these capabilities can be understood as components for incorporating Generative UI into an application that continues processing and accepting user actions. This classification by function does not establish the effectiveness of combining them.
Generating Applications from Conversation with Claude Artifacts
Anthropic’s Claude Artifacts can display standalone content in a dedicated window separate from the chat. Listed examples include code, single-page HTML websites, and interactive React components. [7]
Official guidance also describes artifacts as shareable applications, tools, and content, and explains that they can run as applications with embedded AI capabilities. [7] Receiving an application that runs immediately, as well as a written response, distinguishes this from traditional chat.
Displaying prepared components with the Vercel AI SDK and generating application code with Artifacts involve different scopes of generation. Checks for display quality and behavior therefore need to suit each approach.
Creating Designs and Prototypes with Claude Design
Anthropic released Claude Design as an Anthropic Labs preview product on April 17, 2026. It creates visual deliverables such as designs, prototypes (trial versions for checking appearance and behavior), and slides through conversation with Claude. It is described as powered by Claude Opus 4.7 and offered as a research preview. [8]
Completed work can be packaged for handoff to Claude Code. [8] In a separate article, “Using Claude Design at the right stage,” I explain where it fits in the process.
From a Generative UI perspective, Claude Design can be understood as an example of applying conversational creation of visual deliverables to design work. Its approach differs from passing tool results to components with the Vercel AI SDK, but both produce something beyond prose through conversation.
Constraints and Considerations Before Adoption
When adopting Generative UI in a product, the value of an interface, consistency of quality, and the availability and conditions of each feature are points to check.
Design and Verification Effort as Interface Displays Increase
Generating UI involves processing. Combining tool calls and component display requires more design and verification effort than a simple text response.
Turning every response into an interface does not necessarily make it more useful. Implementation effort depends on which responses are sufficient as prose and which are worth presenting as cards, charts, or input screens.
Generated Interface Quality and Design Consistency
When a model chooses an interface according to the situation, it may display something unexpected or produce inconsistent designs across screens.
Passing results to components prepared by developers should make it easier to limit variation in display and design. Deciding how much AI should generate and where to use existing components is therefore a key quality decision.
Developing Features and Changing Availability
Claude Design is described as a research preview. Vercel Workflows, Sandbox, and AI Elements also require individual checks of availability, conditions, and limits. [4][5][6][8]
Specifications and availability can change. Before production adoption, check official websites and documentation for the latest eligible plans, limits, and pricing for each feature you intend to use.
Expansion into Applications That Act on External Services
The published capabilities show ways to connect conversationally created interfaces to external services and ongoing processes. These capabilities alone do not establish whether Generative UI will become a primary method of application development.
Two developments illustrate these uses. First, Artifacts is described as able to connect to external services through the Model Context Protocol (MCP, a connection standard linking AI to external data and tools). The guidance explains that it can create interactive applications that read and write data in tools such as Asana, Google Calendar, and Slack. [7] This indicates an expansion from components that display information into applications that retrieve and act on data.
Second, Vercel officially provides capabilities for long-running processes and code execution in isolated environments. [4][5] These capabilities suggest a way to design Generative UI as part of systems that continue processing over time, rather than only as a one-off display.
Human Quality Review and Interface Design
These capabilities do not establish that human UI design or quality checks are no longer needed. Quality assurance, accessibility (design that makes an interface usable by everyone), and brand consistency remain areas for human judgment.
The Vercel AI SDK approach can assemble prepared interface elements according to the situation.[1] It is an option when consistent quality matters. The published capabilities alone do not establish which approach will become widely adopted.
Summary: Check Quality and Verification Effort Within a Limited Scope
Generative UI presents AI responses as interactive interfaces as well as prose. The Vercel AI SDK describes an approach that passes tool results to interface components, while Claude Artifacts can generate applications from conversation. Claude Design can be understood as applying conversational creation of visual deliverables to the design process.
When considering adoption, the key points are identifying responses worth turning into interfaces, deciding where to use generation and where to use existing components, and checking availability and conditions. Starting with weather cards, charts, or similarly bounded uses, checking quality and verification effort, and then expanding the scope is one way to limit what needs to be tested initially.
References
- Vercel, AI SDK UI: Generative User Interfaces, 2026
- Vercel, AI SDK RSC: Streaming React Components, 2026
- Vercel, Introducing AI SDK 3.0 with Generative UI support, March 1, 2024
- Vercel, Vercel Workflows, June 17, 2026
- Vercel, Vercel Sandbox, June 30, 2026
- Vercel, AI Elements, 2026
- Anthropic, What are artifacts and how do I use them?, 2026
- Anthropic, Introducing Claude Design by Anthropic Labs, April 17, 2026
For the latest releases and updates, check the official website and official documentation.