Generative UI: The Future of User Experience

import { createAI, getMutableAIState, streamUI } from 'ai/rsc';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';
import { WeatherCard } from './components/weather-card';

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

  const aiState = getMutableAIState();

  const ui = await streamUI({
    model: openai('gpt-4-turbo'),
    initial: <div>Thinking...</div>,
    system: 'You are a helpful assistant that can show weather UI.',
    messages: [
      ...aiState.get(),
      { role: 'user', content }
    ],
    tools: {
      get_weather: {
        description: 'Get the weather for a location',
        parameters: z.object({
          location: z.string(),
        }),
        generate: async function* ({ location }) {
          yield <div>Loading weather for {location}...</div>;
          const data = await fetchWeather(location);
          return <WeatherCard data={data} />;
        },
      },
    },
  });

  return {
    id: Date.now(),
    display: ui
  };
}