Generative UI: How to Stream Dynamic React Components Directly from AI Models

For years, conversational AI was trapped inside a single primitive: the text bubble. If you asked an AI to help compare four mortgage plans, it dumped ten paragraphs of text and an unformatted markdown table. Generative UI breaks this barrier by rendering interactive, rich React components in real time.

When software combines conversational intelligence with direct manipulation interfaces (sliders, clickable date pickers, real-time charts), task completion times drop by over 60%. In this tutorial, we demonstrate how Generative UI works in React.

The Architecture of Generative UI

Generative UI relies on a seamless client-server contract:

1. User Prompt: The user types: "Show me available flights from Islamabad to Dubai next Tuesday under $400."
2. Model Tool Calling: The LLM decides that text is inadequate and invokes a registered tool: render_flight_selector(flights=[...]).
3. Streaming Protocol: The backend streams tool call arguments as chunked JSON over HTTP or WebSockets.
4. Dynamic Component Mounting: The frontend component registry intercepts the tool name and mounts the pre-compiled <FlightSelector flights={data} /> component inside the chat timeline.
5. Bidirectional Interaction: The user selects a flight seat on the interactive card, which dispatches a payload back to the conversation thread.

Building a Generative UI Component Registry

Here is a clean, production-ready React implementation pattern:

// FlightPickerWidget.jsx - Interactive React Component
import React, { useState } from 'react';

export function FlightPickerWidget({ flights, onSelectFlight }) {
  const [selectedId, setSelectedId] = useState(null);

  return (
    <div className="bg-zinc-900 border border-[#86c32a]/40 rounded-2xl p-5 my-4 shadow-xl">
      <h3 className="text-lg font-bold text-white mb-3">Available Flights</h3>
      <div className="space-y-3">
        {flights.map((flight) => {
          const isSelected = selectedId === flight.id;
          const cardClass = isSelected
            ? 'p-4 rounded-xl border cursor-pointer transition-all border-[#86c32a] bg-[#86c32a]/10'
            : 'p-4 rounded-xl border cursor-pointer transition-all border-zinc-800 bg-zinc-800/50 hover:border-zinc-700';

          return (
            <div
              key={flight.id}
              onClick={() => {
                setSelectedId(flight.id);
                onSelectFlight(flight);
              }}
              className={cardClass}
            >
              <div className="flex justify-between items-center">
                <div>
                  <p className="font-semibold text-white">{flight.airline} • {flight.flightNumber}</p>
                  <p className="text-sm text-zinc-400">{flight.departureTime} → {flight.arrivalTime}</p>
                </div>
                <p className="text-lg font-bold text-[#a0e933]">USD {flight.priceUSD}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Registering Tools with the LLM API

We inform the model of our UI capability via standard JSON Schema tool definitions:

{
  "name": "render_flight_picker",
  "description": "Render an interactive flight selection widget when the user asks for flight schedules or pricing.",
  "parameters": {
    "type": "object",
    "properties": {
      "flights": {
        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "id": { "type": "string" },
            "airline": { "type": "string" },
            "flightNumber": { "type": "string" },
            "departureTime": { "type": "string" },
            "arrivalTime": { "type": "string" },
            "priceUSD": { "type": "number" }
          },
          "required": ["id", "airline", "flightNumber", "departureTime", "arrivalTime", "priceUSD"]
        }
      }
    },
    "required": ["flights"]
  }
}

Best Practices for Generative UI in Production

• Graceful Skeleton States: While JSON arguments are streaming over the network, display a skeleton placeholder matching the component's final dimensions to prevent layout shifts.
• Strict Error Boundaries: Wrap every dynamic component in a React Error Boundary. If the model outputs malformed JSON, gracefully fall back to formatted text.
• Accessibility & Keyboard Navigation: Ensure all generated interactive widgets support full ARIA labels, focus management, and keyboard navigation.

Elevating User Experiences with Infusible Coder

Modern web users expect dynamic, delightful interfaces. Our full-stack engineering team specializes in modern React, Vite, and Next.js architectures integrated with cutting-edge AI streaming protocols. Check out our web development services or see our work in our portfolio.