Generative UI: The End of Static Interfaces?

For 30 years, we have built static interfaces. You design a button, place it on a screen, and it stays there. Generative UI changes this. The UI is created at runtime based on what the user needs.

How it Works

Using Vercel's AI SDK and React Server Components:

1. User: "Show me my flight to London."
2. AI: Identifies intent: show_flight_card.
3. Server: Renders a <FlightCard /> component with real data.
4. Client: Streams the component directly into the chat stream.

Example Code

// using Vercel AI SDK
import { createAI, getMutableAIState, render } from "ai/rsc";

async function submitUserMessage(userInput: string) {
  'use server';
  
  const aiState = getMutableAIState();
  
  const ui = render({
    model: "gpt-4-turbo",
    provider: openai,
    messages: [ ...aiState.get(), { role: "user", content: userInput }],
    text: ({ content, done }) => <div className="text-message">{content}</div>,
    tools: {
      get_flight: {
        description: "Get flight details",
        parameters: z.object({ flightNumber: z.string() }),
        render: async function* ({ flightNumber }) {
          yield <Spinner />;
          const flight = await fetchFlight(flightNumber);
          return <FlightCard flight={flight} />;
        }
      }
    }
  });

  return { ui };
}

Implications

• Personalization: Every user gets a unique dashboard.
• Accessibility: UI adapts to the user's needs (larger text, simpler layout).
• Complexity: Debugging dynamic UIs is harder.

Conclusion

We are moving from "Pixel Perfect" to "Intent Perfect".