Zum Inhalt springen
Jefferson Gonçalves
← Zurück zu den Projekten

Generative Ui Demo

#Aster & Co. Generative Support Demo

A fictional customer-support chat that uses the Vercel AI SDK to let a selected model choose from safe, prebuilt generative UI components.

Everything in the demo—customers, orders, products, delivery details, and support outcomes—is fictional.

#Stack

  • OpenUI-style generative components for the model-selected support cards and setup state
  • React 19 and Next.js / Vinext for the application
  • Tailwind CSS for styling
  • Vercel AI SDK (ai) for structured model responses
  • Vercel AI SDK provider adapters for OpenAI, Anthropic, and Google AI

The model selects a component from an approved schema; React renders the corresponding prebuilt OpenUI-style component. This keeps model output, UI rendering, and follow-up actions separate.

#Run it locally

Requires Node.js 22.13 or newer.

npm install
npm run dev

Open http://localhost:3000.

#Connect a model

The first screen is a Model connection component. Choose one of the supported providers, enter an API key, then start the demo:

  • OpenAI
  • Anthropic
  • Google AI

The key is stored only in the browser's local storage and sent to the app only when a chat message is submitted. Never use a production or shared key in a public deployment of this demo.

#Try the demo

Ask Luna a natural support question. The model returns structured output consisting of a text reply plus an optional approved UI component.

Examples:

  • Look up order ABC-123
  • My lamp will not turn on
  • I need a refund estimate
  • Start a delivery check
  • I want to return this item

ABC-123 is the seeded fictional order. It represents one AuraLamp Mini in soft violet, marked delivered today.

#How the generative UI works

The chat API uses the Vercel AI SDK with a provider selected at request time. Rather than allowing the model to generate arbitrary UI code, it asks the model for a structured response:

  • text: the customer-facing reply
  • component: either none or one approved support component

Available components include order lookup, delivery options, replacement confirmation, refund estimate, troubleshooting options, and a troubleshooting checklist. The React app renders the matching prebuilt component, keeping the model decision separate from UI execution.

#Validate a production build

npm run build

Neue Version verfügbar.