The Static Web is Dead

Since the invention of HTML, the paradigm has been:

Developer designs a layout (Header, Content, Footer).
Developer writes code.
User visits page.
User sees exactly what the developer designed.

This is Static UI. Ideally, it fits 80% of users. The other 20% just deal with it. If a user asks “Show me flights to Paris”, we show a list. If a user asks “Compare the weather in Paris and London”, we show a text answer. Why? Because we didn’t design a “Weather Comparison Widget”. We only designed a “Flight List Widget”. We are limited by what we predicted the user would want.

Generative UI breaks this limit. The AI decides at runtime which components to render. User: “Compare weather.” AI: Decides to render two <WeatherCard /> components side-by-side. User: “Book a flight.” AI: Decides to render a <FlightBookingForm />. The Interface adapts to the Intent.

Why Maison Code Discusses This

At Maison Code, we are obsessed with the “Zero UI” future. We believe the ultimate luxury is an interface that anticipates your needs. For our high-end concierge clients, a static dashboard is not enough. If a VIP client asks for “A weekend itinerary in Kyto”, they shouldn’t get a block of text. They should get a map, a list of hotel reservations, and a weather widget, generated instantly. We implement Vercel AI SDK and React Server Components (RSC) to build these adaptive experiences. We talk about it because this is the biggest shift in Frontend Engineering since React itself.

The Technology: Vercel AI SDK (RSC)

The Vercel AI SDK (specifically the allow-rsc mode) allows the LLM to stream React Components as part of the response.

How it works (The Flow)

User Query: “Show me Apple’s stock price.”
Server Action: Sends prompt to GPT-4.

Function Calling: We provide tools to GPT-4.

tools: {
  show_stock: {
    description: "Show a stock ticker chart",
    parameters: z.object({ symbol: z.string() })
  }
}

LLM Decision: GPT-4 says “Call show_stock with symbol AAPL”.

Server Execution: The server executes the function. But instead of returning JSON, it returns a React Component.

// server/actions.tsx
async function show_stock({ symbol }) {
  const data = await fetchStock(symbol);
  return <StockChart data={data} color="green" />;
}

Streaming: The UI streams the <StockChart /> to the client. The client renders it instantly.

Code Example: Building a Generative Chat

// app/action.tsx
import { createAI, getMutableAIState, render } from "ai/rsc";
import { z } from "zod";

const ai = createAI({
  actions: {
    submitUserMessage: async (content: string) => {
      "use server";
      const aiState = getMutableAIState();
      
      const ui = await render({
        model: "gpt-4-turbo",
        provider: openai,
        messages: [{ role: "user", content }],
        tools: {
          get_crypto_price: {
            description: "Get the price of a crypto currency",
            parameters: z.object({ coin: z.string() }),
            render: async function* ({ coin }) {
              yield <Spinner />; // Instant loading state
              const price = await fetchPrice(coin);
              return <CryptoCard coin={coin} price={price} />; // Final UI
            }
          }
        }
      });
      
      return { id: Date.now(), display: ui };
    }
  }
});

Notice the yield <Spinner />. This is amazing. The AI acknowledges the intent (“I’m getting the price”) and shows a UI before the data is ready. Then it replaces the spinner with the card. This is Streaming UI.

Use Cases for E-Commerce

Product Comparison: User: “Which one is better for running, the Air Max or the Pegasus?” AI: Generates a <ComparisonTable products={[A, B]} /> highlighting weight and cushioning.
Size Guide: User: “I am 6 foot tall, what size?” AI: Renders a customized <SizeChart highlight="L" />.
Bundle Builder: User: “I need an outfit for a gala.” AI: Renders a <LookBook items={[Suit, Tie, Shoes]} /> with an “Add All to Cart” button.

The Design Challenge

Generative UI is a nightmare for designers. You cannot design “The Page”. There is no page. You must design a Component System. You design the “Atoms” (Cards, Charts, Tables, Lists). The AI acts as the “Page Builder”. This requires a strict Design System (see Atomic Design) to ensure that whatever the AI assembles looks coherent. If perfectly standardized margins and typography aren’t enforced, the AI-generated layout will look broken.

The Skeptic’s View

“This is over-engineering. Just show me the text.” Counter-Point: Text is hard to parse. “Apple is up 5% to $150” is harder to read than a Green Chart going up. The brain processes visuals 60,000x faster than text. Generative UI is about Information Density. It allows us to convey complex data (tables, charts) in a conversational interface without overwhelming the user.

FAQ

Q: Is it slow? A: Yes, GPT-4 is slow. That’s why we use Streaming. The text/spinner appears instantly. The heavy UI component loads 1 second later. It feels responsive.

Q: Can it hallucinate UI? A: It can hallucinate arguments (e.g., passing a string to a prop that needs a number). However, implementing Zod schema validation prevents runtime crashes. If the AI outputs bad data, we catch it and show an error message instead of crashing the UI.

Conclusion

We are moving from “Point and Click” to “Describe and Receive”. Generative UI is the bridge. It combines the flexibility of Chat with the usability of GUI. It is the future of software interaction.

Ready to build the future?

If you want to integrate Generative UI into your application using the Vercel AI SDK, Maison Code is the expert partner you need.

UI that draws itself?

We build Generative UI experiences using Vercel AI SDK and React Server Components. Hire our Architects.