Generative UI: From v0 to Open Source

Last October, Vercel launched v0.dev, a generative UI design tool that turns text and image prompts into React UIs. Today, the company is open sourcing the underlying Generative UI technology with the release of the Vercel AI SDK 3.0. This update lets developers give LLMs component-based interfaces instead of limiting them to plaintext and markdown chat responses.

Beyond Text-Only Chat

ChatGPT-style products have proven the value of LLMs for coding, travel planning, translation, and summarization tasks. Yet these applications face two persistent UX challenges: limited or imprecise knowledge, and plain text or markdown-only output.

Function calling and tools helped developers fetch realtime data, but these applications remain difficult to write, and still lack the richness and interactivity users expect. Vercel's experience building v0 on React Server Components (RSC) produced a cleaner abstraction that addresses both issues.

A Simpler Developer Workflow

AI SDK 3.0 makes it possible to associate LLM responses with streaming React Server Components, eliminating the need for heavy client-side JavaScript and boosting interactivity and responsiveness without compromising performance.

Even the most basic use case benefits from the new approach. Streaming text without retrieval or live-updated information looks like this:

import { render } from 'ai/rsc'
import OpenAI from 'openai'
const openai = new OpenAI()
async function submitMessage(userInput) {
  'use server'
  return render({
    provider: openai,
    model: 'gpt-4',
    messages: [
      { role: 'system', content: 'You are an assistant' },
      { role: 'user', content: userInput }
    ],
    text: ({ content }) => <p>{content}</p>,
  })
}

To solve both the retrieval and custom UI problems at once, developers can use the new render method with models that support OpenAI-compatible Functions or Tools. The method maps specific model calls to React Server Components:

import { render } from 'ai/rsc'
import OpenAI from 'openai'
import { z } from 'zod'
const openai = new OpenAI()
async function submitMessage(userInput) { // 'What is the weather in SF?'
  'use server'
  return render({
    provider: openai,
    model: 'gpt-4-0125-preview',
    messages: [
      { role: 'system', content: 'You are a helpful assistant' },
      { role: 'user', content: userInput }
    ],
    text: ({ content }) => <p>{content}</p>,
    tools: {
      get_city_weather: {
        description: 'Get the current weather for a city',
        parameters: z.object({
          city: z.string().describe('the city')
        }).required(),
        render: async function* ({ city }) {
          yield <Spinner/>
          const weather = await getWeather(city)
          return <Weather info={weather} />
        }
      }
    }
  })
}

AI-Native Web Architecture

With the AI SDK 3.0 and React Server Components, developers can stream UI components directly from LLMs, making apps more interactive and responsive while keeping the JavaScript payload low. This simplifies building and maintaining AI-powered features, allowing teams to concentrate on user experience rather than infrastructure.

Vercel has published a demo and documentation for those who want to experiment with an early preview of the new APIs.

Compatibility Questions

Framework requirements

The new APIs depend on React Server Components and Server Actions, which are currently only implemented in Next.js. They do not rely on Next.js-specific internals, so support in other React frameworks (Remix, Waku, etc.) should enable Generative UI once their RSC implementations match React's spec. Apps using the Next.js Pages Router will need to adopt the App Router; as of Next.js 13, both routers can coexist in the same application.

LLM support

The RSC APIs work with any streaming LLM the AI SDK supports. However, the render method requires OpenAI SDK compatibility and optionally Assistant Tools and Function Calling. OpenAI, Mistral, and Fireworks' firefunction-v1 model currently work with the full API. Lower-level streaming APIs can be used independently, even without an LLM. Models lacking tool or function-calling support can still stream text and components, and the SDK can parse structured, prompt-engineered output when needed.

Integration with other services

OpenAI Assistants can serve as a persistence layer and function-calling API alongside AI SDK 3.0, or developers can make direct LLM calls through the provider or API of their choice. The createStreamableUI and createStreamableValue primitives work with any JavaScript library that runs during a React Server Action. That opens the door to Generative UI products built on LangChain, LlamaIndex, custom agent abstractions, and durable task runners like Inngest.

Serialization boundaries

Anything serializable by React can cross the network boundary between server and client. Promises, JavaScript primitives, and structured types such as Map and Set are all supported; the React documentation details the complete serialization rules.