Search for a command to run...
Ditch the spinners. Learn how streaming UI with the Vercel AI SDK delivers a superior, real-time user experience in modern AI applications compared to traditional state management.
If you've built a React application that interacts with a Large Language Model (LLM), you've faced the same user experience challenge: the dreaded loading spinner. The traditional "fetch-then-render" paradigm, where we manage loading, data, and error states, feels clunky and slow when waiting for an AI to "think." Users are left staring at a spinner for seconds, sometimes even tens of seconds, which feels like an eternity in a modern web app.
This latency is inherent to how most generative AI APIs work. They generate tokens sequentially, but we typically wait for the entire response to complete before showing anything to the user. This creates a frustrating disconnect between the user's action and the UI's feedback. In an era of real-time everything, this pattern is quickly becoming a relic.
This is where a new paradigm, Streaming UI, comes into play. Instead of waiting for the full response, we stream it token-by-token directly into the component's view. This provides immediate feedback and creates a dynamic, conversational experience that feels alive.
Traditional State Management:
true (const [isLoading, setIsLoading] = useState(true)).false, and data state with the response.Streaming UI:
ReadableStream.The Vercel AI SDK has emerged as a powerful enabler of this pattern, providing simple hooks like useChat and useCompletion that handle the complexities of reading and rendering streams in React and Next.js.
Let's compare the two approaches with a simple example: generating a product description.
Here's a typical component using useState and useEffect.
// components/OldProductDescription.tsx
'use client';
import { useState } from 'react';
export function OldProductDescription() {
const [description, setDescription] = useState('');
const [isLoading, setIsLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsLoading(true);
setDescription('');
const response = await fetch('/api/generate-description', {
method: 'POST',
body: JSON.stringify({ prompt: 'A futuristic office chair' }),
});
const data = await response.json();
setDescription(data.description);
setIsLoading(false);
};
return (
<div>
<form onSubmit={handleSubmit}>
<button type="submit" disabled={isLoading}>
{isLoading ? 'Generating...' : 'Generate Description'}
</button>
</form>
{isLoading && <div>Loading spinner...</div>}
{description && (
<div className="mt-4 p-4 border rounded">
<p>{description}</p>
</div>
)}
</div>
);
}The user clicks, sees a spinner, and then the full text appears. It's functional, but not great.
Now, let's refactor this using the useCompletion hook from the Vercel AI SDK.
First, we need a streaming-enabled API route.
// app/api/generate-description-stream/route.ts
import { OpenAI } from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
export const runtime = 'edge';
export async function POST(req: Request) {
const { prompt } = await req.json();
const response = await openai.completions.create({
model: 'text-davinci-003',
stream: true,
prompt: `Generate a compelling product description for: ${prompt}`,
max_tokens: 150,
});
const stream = OpenAIStream(response);
return new StreamingTextResponse(stream);
}Now, the client-side component becomes incredibly simple.
// components/StreamingProductDescription.tsx
'use client';
import { useCompletion } from 'ai/react';
export function StreamingProductDescription() {
const { completion, input, handleInputChange, handleSubmit } = useCompletion({
api: '/api/generate-description-stream',
});
return (
<div>
<form onSubmit={handleSubmit}>
<input
name="prompt"
value={input}
onChange={handleInputChange}
placeholder="Enter a product name..."
className="p-2 border rounded w-full"
/>
<button type="submit" className="mt-2">
Generate Description
</button>
</form>
<div className="mt-4 p-4 border rounded min-h-[100px]">
<p>{completion}</p>
</div>
</div>
);
}The useCompletion hook handles everything: the API call, reading the stream, and updating the completion state variable in real-time. The result is a UI that feels like it's having a live conversation with the AI.
This pattern is powerful and a massive improvement over manual state management for text generation. However, this is just the first step. The true paradigm shift comes with the latest Vercel AI SDK, which moves beyond streaming text to streaming full-fledged React components.
1. The Real Game-Changer: Streaming Generative UI with streamUI
The latest Vercel AI SDK (v4+) introduces a more powerful and explicit way to build Generative UI on top of React Server Components. The deprecated render utility has been replaced by a new, more robust API centered around the streamUI function.
This new pattern separates the concerns of the AI's state and the UI's state. You manage the conversation history and data with AIState and the rendered React components with UIState. In a Next.js App Router action, you call streamUI with the model and a set of defined "tools" (your components). The LLM can then choose to return a tool call, which streamUI uses to stream the appropriate component to the client.
This enables incredibly rich, dynamic interfaces built by the AI in real-time—think a loading skeleton that resolves into a chart, followed by a data table, all within a single, continuous stream.
2. Error Handling & UI Skeletons
Streaming UI introduces new challenges for error handling. What if the stream fails midway? It's crucial to wrap your streaming components in React's <Suspense> boundaries with appropriate fallbacks. A good pattern is to show a UI skeleton as the initial state or fallback, which gets progressively filled by the streaming content. For stream-level errors, the useChat and useCompletion hooks provide an error state that you can use to display a retry message or a graceful failure state.
3. Model Compatibility: The Importance of Tool Calling
Generative UI works best with models that support "Tool Calling" (the successor to Function Calling). This allows the LLM to output structured data indicating which component (i.e., which "tool") to render. While you can still stream text with any model, the ability to stream components is tied to this advanced model capability.
4. When to Stick with Traditional State
Streaming isn't a silver bullet. For short, predictable API responses or when you need to process the entire dataset before rendering (e.g., calculating totals from a list, filtering results), traditional useState/useEffect or a library like TanStack Query is still the right tool. The key is to identify when the user benefits from seeing partial, progressive results. If the data is only useful as a complete set, don't stream it.
Streaming UI is more than just a cool technical trick; it's a fundamental shift in how we build user experiences for AI-powered applications. By closing the gap between user action and system feedback, we create interfaces that are more engaging, transparent, and ultimately, more human.
The Vercel AI SDK has dramatically lowered the barrier to entry for implementing these complex patterns. As developers, moving from managing boolean isLoading flags to orchestrating real-time data streams is a crucial skill for the next generation of web applications. The era of the static loading spinner is over; the era of the conversational, streaming interface has just begun.