Generative UI: Dynamic Streaming of React Server Components

[ LLM Inference ] --(Tool Call: { symbol: "AAPL", period: "1M" })--> [ Server Action (Node.js / Edge) ]
                                                                                   |
                                                                       (Fetch DB + Render RSC)
                                                                                   v
[ Client Browser: React 19 Reconciler ] <--- (React Flight Stream) --- [ <FinancialChart data={...} /> ]

import { streamUI } from 'ai/rsc';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';
import { WeatherCard } from '@/components/WeatherCard';
import { WeatherSkeleton } from '@/components/WeatherSkeleton';

export async function submitUserMessage(message: string) {
  'use server';

  const result = await streamUI({
    model: openai('gpt-4o'),
    system: 'Вы интеллектуальный погодный ассистент. Для отображения сводок погоды ОБЯЗАТЕЛЬНО вызывайте инструмент getWeather.',
    prompt: message,
    text: ({ content }) => <p className="text-gray-800 dark:text-gray-200 leading-relaxed">{content}</p>,
    tools: {
      getWeather: {
        description: 'Отображает структурированный погодный виджет для указанного населенного пункта',
        parameters: z.object({
          city: z.string().describe('Название города на русском или английском языке'),
          unit: z.enum(['celsius', 'fahrenheit']).default('celsius'),
        }),
        generate: async function* ({ city, unit }) {
          // 1. Немедленно отдаем оптимистичный скелетон загрузки клиенту
          yield <WeatherSkeleton city={city} />;
          
          // 2. Выполняем защищенный асинхронный запрос к источнику данных
          const response = await fetch(`https://api.weather.internal/v1/forecast?city=${encodeURIComponent(city)}`);
          const data = await response.json();
          
          // 3. Возвращаем скомпилированный Server Component с гидратируемыми данными
          return <WeatherCard city={city} temperature={data.temp} unit={unit} humidity={data.humidity} />;
        },
      },
    },
  });

  return result.value;
}

'use client';

import { useState } from 'react';
import { submitUserMessage } from '@/actions/chat';

export default function GenerativeUIChat() {
  const [messages, setMessages] = useState<React.ReactNode[]>([]);
  const [input, setInput] = useState('');
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim() || isPending) return;

    const currentPrompt = input;
    setInput('');
    setIsPending(true);

    // Добавляем сообщение пользователя в UIState
    setMessages((prev) => [
      ...prev,
      <div key={`user-${Date.now()}`} className="p-3 bg-blue-50 dark:bg-blue-950 rounded-lg">{currentPrompt}</div>,
    ]);

    try {
      // Получаем потоковый React Node от Server Action
      const responseNode = await submitUserMessage(currentPrompt);
      setMessages((prev) => [...prev, responseNode]);
    } catch (err) {
      setMessages((prev) => [
        ...prev,
        <div key={`err-${Date.now()}`} className="p-3 bg-red-100 text-red-700 rounded-lg">Сбой генерации интерфейса.</div>,
      ]);
    } finally {
      setIsPending(false);
    }
  };

  return (
    <main className="max-w-2xl mx-auto p-6 space-y-4">
      <div className="space-y-4 min-h-[400px]">
        {messages.map((msg, idx) => (
          <div key={idx}>{msg}</div>
        ))}
      </div>
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Спросите о погоде в любом городе..."
          className="flex-1 px-4 py-2 border rounded-md"
        />
        <button type="submit" disabled={isPending} className="px-4 py-2 bg-blue-600 text-white rounded-md">
          {isPending ? 'Загрузка...' : 'Отправить'}
        </button>
      </form>
    </main>
  );
}