You've mastered streaming text. The AI types, the user reads, and the magic of perceived performance is achieved. But what if the AI could do more than just tell? What if it could show and let you interact? tell show let you interact Welcome to the paradigm shift. We are moving Beyond Text. Beyond Text In this guide, we’ll explore how to stream actual React components directly from the server to the client. Using the Vercel AI SDK and React Server Components (RSCs), we'll transform a static chat interface into a dynamic, interactive dashboard that renders in real-time. The Evolution: From News Ticker to Live Broadcast To understand the power of streaming UI components, we must first look at the limitations of the standard approach. The Old Way (Text-Only): Imagine a live news ticker. Information flows continuously, but it is static. The client is a passive recipient. If a user asks, "Show me a chart of Q3 sales," the AI streams back text describing the chart, or perhaps a JSON blob. The user must wait for the stream to finish before the UI can render. The Old Way (Text-Only): "Show me a chart of Q3 sales," The New Way (Streaming UI): Now, imagine a live broadcast where the correspondent can dynamically insert interactive dashboards, charts, and forms into the feed. This is the streamable-ui pattern. The New Way (Streaming UI): streamable-ui Instead of sending {"chart": "data..."}, the server sends a serialized React component: <SalesChart data={...} />. The client receives this, hydrates it immediately, and the user can hover, zoom, and click while the AI is still generating the rest of the response. {"chart": "data..."} <SalesChart data={...} /> while the AI is still generating the rest of the response The Architecture: RSCs and Server Actions How does this work under the hood? It relies on two pillars: React Server Components (RSCs): The server renders the component tree and serializes it into a special payload (using React's Flight protocol). This is streamed over SSE (Server-Sent Events).
Server Actions: The streamed components aren't just static HTML. They can contain interactive elements (buttons, forms) that trigger secure functions on the server via Server Actions. React Server Components (RSCs): The server renders the component tree and serializes it into a special payload (using React's Flight protocol). This is streamed over SSE (Server-Sent Events). React Server Components (RSCs): Server Actions: The streamed components aren't just static HTML. They can contain interactive elements (buttons, forms) that trigger secure functions on the server via Server Actions. Server Actions: Server Actions This creates a bi-directional flow: Server → Client: Streams a UI component.
Client → Server: User clicks a button inside that component.
Server → Client: The Server Action executes, potentially triggering more AI generation and streaming new components. Server → Client: Streams a UI component. Server → Client: Client → Server: User clicks a button inside that component. Client → Server: Server → Client: The Server Action executes, potentially triggering more AI generation and streaming new components. Server → Client: more new The "Live Shopping Cart" Analogy Think of a live streamer selling a product. Text-Only: The streamer describes the item. You type in chat to ask questions.
Streaming UI: The streamer overlays an "Add to Cart" button and a size selector directly onto the video feed. You click it right now without stopping the video. Text-Only: The streamer describes the item. You type in chat to ask questions. Text-Only: Streaming UI: The streamer overlays an "Add to Cart" button and a size selector directly onto the video feed. You click it right now without stopping the video. Streaming UI: right now That is the experience we are building. Code Example: Streaming an AI Dashboard Let's build a SaaS feature where an AI generates a summary report and streams it as an interactive React component. 1. The Server-Side Implementation File: app/api/generate-report/route.ts File: app/api/generate-report/route.ts We use streamUI from the Vercel AI SDK. This function accepts a standard prompt but allows us to map the AI's text output directly to a React component. streamUI // app/api/generate-report/route.ts
import { streamUI } from 'ai/rsc';
import { OpenAI } from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY || '',
});

// The component to be streamed
const ReportComponent = ({ data }: { data: string }) => {
  return (
    <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
      <h3 className="font-bold text-blue-800">AI Generated Report</h3>
      <p className="text-sm text-blue-600 mt-2">{data}</p>
      <button 
        onClick={() => alert('Report acknowledged!')} 
        className="mt-3 px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"
      >
        Acknowledge
      </button>
    </div>
  );
};

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const result = await streamUI({
    model: 'gpt-4-turbo-preview',
    system: 'You are a helpful assistant that generates concise reports.',
    prompt: `Generate a summary report for: ${prompt}`,

    // The Magic Mapping:
    // When the AI generates text, we wrap it in our React Component
    text: ({ content }) => {
      return <ReportComponent data={content} />;
    },

    initial: <div className="text-gray-500">Generating report...</div>,
  });

  return result.toAIStreamResponse();
} // app/api/generate-report/route.ts
import { streamUI } from 'ai/rsc';
import { OpenAI } from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY || '',
});

// The component to be streamed
const ReportComponent = ({ data }: { data: string }) => {
  return (
    <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
      <h3 className="font-bold text-blue-800">AI Generated Report</h3>
      <p className="text-sm text-blue-600 mt-2">{data}</p>
      <button 
        onClick={() => alert('Report acknowledged!')} 
        className="mt-3 px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"
      >
        Acknowledge
      </button>
    </div>
  );
};

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const result = await streamUI({
    model: 'gpt-4-turbo-preview',
    system: 'You are a helpful assistant that generates concise reports.',
    prompt: `Generate a summary report for: ${prompt}`,

    // The Magic Mapping:
    // When the AI generates text, we wrap it in our React Component
    text: ({ content }) => {
      return <ReportComponent data={content} />;
    },

    initial: <div className="text-gray-500">Generating report...</div>,
  });

  return result.toAIStreamResponse();
} 2. The Client-Side Implementation File: app/page.tsx File: app/page.tsx The client uses useCompletion to handle the stream. The completion state here isn't just a string; it's a serialized React tree that the SDK helps reconstruct. useCompletion completion // app/page.tsx
'use client';

import { useCompletion } from 'ai/react';

export default function DashboardPage() {
  const { completion, input, handleInputChange, handleSubmit, isLoading } = useCompletion({
    api: '/api/generate-report',
  });

  return (
    <div className="max-w-2xl mx-auto p-8 space-y-6">
      <h1 className="text-2xl font-bold">SaaS Dashboard</h1>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="text"
          value={input}
          onChange={handleInputChange}
          placeholder="Ask for a report (e.g., 'Q3 Sales')..."
          className="flex-1 p-2 border rounded text-black"
          disabled={isLoading}
        />
        <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">
          Generate
        </button>
      </form>

      <div className="space-y-4 border-t pt-4">
        <h2 className="font-semibold text-lg">Output:</h2>

        {/* The SDK handles the deserialization of the RSC payload */}
        <div className="rendered-content">
          {completion ? (
             <div dangerouslySetInnerHTML={{ __html: completion }} />
          ) : (
            <p className="text-gray-400 italic">No report generated yet.</p>
          )}

          {isLoading && (
            <div className="flex items-center gap-2 text-blue-500">
              <span className="animate-pulse">●</span>
              <span>Streaming component...</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
} // app/page.tsx
'use client';

import { useCompletion } from 'ai/react';

export default function DashboardPage() {
  const { completion, input, handleInputChange, handleSubmit, isLoading } = useCompletion({
    api: '/api/generate-report',
  });

  return (
    <div className="max-w-2xl mx-auto p-8 space-y-6">
      <h1 className="text-2xl font-bold">SaaS Dashboard</h1>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="text"
          value={input}
          onChange={handleInputChange}
          placeholder="Ask for a report (e.g., 'Q3 Sales')..."
          className="flex-1 p-2 border rounded text-black"
          disabled={isLoading}
        />
        <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">
          Generate
        </button>
      </form>

      <div className="space-y-4 border-t pt-4">
        <h2 className="font-semibold text-lg">Output:</h2>

        {/* The SDK handles the deserialization of the RSC payload */}
        <div className="rendered-content">
          {completion ? (
             <div dangerouslySetInnerHTML={{ __html: completion }} />
          ) : (
            <p className="text-gray-400 italic">No report generated yet.</p>
          )}

          {isLoading && (
            <div className="flex items-center gap-2 text-blue-500">
              <span className="animate-pulse">●</span>
              <span>Streaming component...</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
} Advanced Patterns: LangGraph and Max Iteration Policies When you combine streaming UI with AI Agents, you enter a cyclical workflow. The AI generates a UI, the user interacts with it, and that interaction feeds back into the AI to generate the next step. next This is powerful, but dangerous. Without guardrails, an AI can get stuck in an infinite loop of generating components. The Solution: Max Iteration Policies. The Solution: Max Iteration Policies. Using LangGraph, we can structure our AI logic as a stateful graph. We add a conditional edge (a "Policy") that checks the iteration count. If the count exceeds a limit (e.g., 5 steps), the graph forces a transition to the END node, terminating the process gracefully. LangGraph END This ensures your application remains stable even if the AI logic gets confused. Common Pitfalls to Avoid Hallucinated JSON: Don't ask the LLM to generate the React component structure (JSON/JSX). It will fail. Instead, ask it to generate content, and map that content to a pre-defined component on the server (as shown in the code example).
Vercel Timeouts: Serverless functions have timeouts (10s-15s). If your AI generation is slow, the stream might cut off. Always use streamUI (which keeps the connection alive efficiently) and optimize your prompts.
Hydration Errors: Server Components cannot access browser APIs (window, document). If you need client-side interactivity (like the onClick in our example), ensure the event handling logic is handled by the client hydration process or wrapped in a Client Component. Hallucinated JSON: Don't ask the LLM to generate the React component structure (JSON/JSX). It will fail. Instead, ask it to generate content, and map that content to a pre-defined component on the server (as shown in the code example). Hallucinated JSON: content Vercel Timeouts: Serverless functions have timeouts (10s-15s). If your AI generation is slow, the stream might cut off. Always use streamUI (which keeps the connection alive efficiently) and optimize your prompts. Vercel Timeouts: streamUI Hydration Errors: Server Components cannot access browser APIs (window, document). If you need client-side interactivity (like the onClick in our example), ensure the event handling logic is handled by the client hydration process or wrapped in a Client Component. Hydration Errors: window document onClick Conclusion Streaming React components moves us from "Generative Text" to "Generative UI." "Generative UI." It changes the user experience from a passive read-and-wait cycle to an active, iterative collaboration. By leveraging the Vercel AI SDK and React Server Components, you can build applications that feel instantaneous and deeply interactive. The AI isn't just telling you what to do; it's building the tools for you to do it, right in front of your eyes. The concepts and code demonstrated here are drawn directly from the comprehensive roadmap laid out in the book The Modern Stack. Building Generative UI with Next.js, Vercel AI SDK, and React Server Components Amazon Link of the AI with JavaScript & TypeScript Series. The Modern Stack. Building Generative UI with Next.js, Vercel AI SDK, and React Server Components Amazon Link Amazon Link AI with JavaScript & TypeScript Series AI with JavaScript & TypeScript Series

Dash

Vercel

OpenAI

Your First Interactive Plot in Python: A Hands-On Plotly Guide

The Python Programming Series ebooks on Amazon

AI with JavaScript & TypeScript Series On Amazon

The Programming Series ebooks on Leanpub.com (Quantity discount) 

Read My Stories

Too Long; Didn't Read

The Streamable-UI Pattern: Turn Chat Into a Live, Clickable React Dashboard

The Streamable-UI Pattern: Turn Chat Into a Live, Clickable React Dashboard

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Your First Interactive Plot in Python: A Hands-On Plotly Guide

Frontend Diffusion Shows What Intent-Based UI Design Looks Like in Practice

An End-to-End System for Generating Frontends from Sketches with LLMs

Why “Intent-First” Design Could Change How Humans Work With Gen AI

5 Most Popular React UI Component Libraries

Awesome React: How I Created a Sleek Parallax Effect

Your First Interactive Plot in Python: A Hands-On Plotly Guide

Frontend Diffusion Shows What Intent-Based UI Design Looks Like in Practice

An End-to-End System for Generating Frontends from Sketches with LLMs

Why “Intent-First” Design Could Change How Humans Work With Gen AI

5 Most Popular React UI Component Libraries

Awesome React: How I Created a Sleek Parallax Effect

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps