DIRS21 Future Lab
Generative UI Concept

Vom statischen Formular zum
intelligenten Erlebnis.

Wie DIRS21 durch Generative UI die Hotelbuchung revolutionieren könnte. Anstatt starrer Schritte generiert die KI dynamisch maßgeschneiderte Interfaces basierend auf der Intention des Gastes.

+89%
Conversion
3.4×
Ancillary Revenue
-70%
Klicks bis Buchung

Das Problem: "One Size Fits None"

Aktuelle Booking Engines sind linear. Ein Business-Reisender sieht denselben Kalender und dieselben Upsell-Optionen wie eine Familie oder ein Wellness-Gast. Das führt zu Reibungsverlusten und verpassten Umsatzchancen.

  • Starre Prozesse für alle Gäste
  • Komplexe Pakete (Zimmer + Spa + Essen) schwer buchbar
  • Hohe Abbruchraten bei spezifischen Wünschen

Die Lösung: Generative UI

🧠
1. Intention verstehen
LLM analysiert Chat/Suche
⚙️
2. JSON Struktur generieren
KI baut die ideale UI-Struktur
3. Persönliches Interface rendern
Maßgeschneiderte Ansicht für den Gast
Hintergrund

Was ist Generative UI?

Eine neue Architektur für dynamische Benutzeroberflächen, die von Vercel geprägt wurde.

Generative UI bezeichnet einen Paradigmenwechsel in der Frontend-Entwicklung: Anstatt statische Seiten oder vordefinierte Komponenten-Kombinationen auszuliefern, generiert ein Large Language Model (LLM) die Benutzeroberfläche in Echtzeit – basierend auf dem Kontext des Nutzers.

"What if, instead of just generating text, the LLM could give us UI on the fly? We're basically plugging the AI directly into the rendering layer."

— Guillermo Rauch, CEO Vercel

Der Begriff wurde maßgeblich von Vercel geprägt, die 2024 mit ihrem AI SDK 3.0 die Technologie ihrer Design-Plattform v0.dev als Open Source veröffentlichten. Der aktuelle Meilenstein ist json-render (Januar 2026) – eine Bibliothek, die das Konzept weiter abstrahiert.

Das Architektur-Pattern: AI → JSON → UI

💬
User Intent
"Ich suche Erholung"
🧠
LLM Processing
Generiert strukturiertes JSON
📱
Component Render
Streamed UI-Komponenten
💡
Das Entscheidende: Guardrails
Das LLM generiert keine beliebige UI, sondern wählt aus einem kontrollierten Katalog vordefinierter Komponenten. So bleibt die Ausgabe vorhersehbar, sicher und brandkonform – bei maximaler Personalisierung.
"We don't want the AI to get so creative that it changes your brand guidelines. The engineer will have the job of curating the brand identity." — G. Rauch

Entwicklung

2023
v0.dev Launch
Vercel zeigt erste Generative UI Demos
03/24
AI SDK 3.0
React Server Components + Streaming UI
01/26
json-render
AI → JSON → UI mit Guardrails

Diese Seite ist inspiriert von:

📰
Vercel's json-render: A step toward generative UI
TheNewStack · Januar 2026

Der Artikel beschreibt Vercels neuestes Open-Source-Tool und ordnet es in die breitere Bewegung hin zu AI-generierten Interfaces ein.

Hinweis: Diese Pitch-Seite simuliert das Generative UI Pattern – die Demo zeigt, wie das Konzept auf Hotelbuchungen angewendet werden könnte.

Die drei Säulen der Transformation

Diese Technologien ermöglichen den Shift von statischer Distribution zu kognitiver Erlebnisgestaltung.

Generative UI

Dynamische Interfaces

Anstatt fertige Seiten zu bauen, orchestriert ein LLM Komponenten in Echtzeit basierend auf dem Nutzer-Intent.

React Server Components für Streaming
Vercel AI SDK für Tool-Calls
Headless Architecture (API-First)
🧬

Vector Embeddings

Semantische Suche

Text und Bilder werden in Vektoren transformiert. "Romantik" und "Kerzenschein" liegen mathematisch nah beieinander.

Vektor-Datenbanken (Pinecone, Qdrant)
CLIP für Bild-zu-Vektor Transformation
Cosine Similarity für Matching
🤖

Agentic Orchestration

Cross-System Koordination

AI Agents verbinden isolierte Systeme (PMS, Spa, POS) und führen komplexe Workflows autonom aus.

LangChain / Agent Protocol
Multi-API Orchestrierung
Temporäre Slot-Reservierung

Generative Booking Engine Simulator

Erleben Sie, wie sich die Benutzeroberfläche in Echtzeit an die Bedürfnisse des Gastes anpasst. Wählen Sie eine Persona, um die Generierung zu starten.

Schritt 1: Gast-Kontext

👤

Bitte wählen Sie oben eine Persona aus.

Schritt 2: KI Processing

// Warten auf Input...
📱

Generiertes Interface erscheint hier

💬
USE CASE

Das "Holistische" Buchungserlebnis

Im klassischen DIRS21-Setup bucht der Gast ein Zimmer. Spa-Termine werden separat per Telefon oder externem Tool vereinbart. Ayurveda-Diäten werden als "Notiz" hinterlegt.

Mit Generative UI: Wenn der Gast "Ayurveda Kur" in den Chat eingibt, generiert das System eine kombinierte Karte. Das Datenmodell verknüpft automatisch:

🛏️

Ressource: Zimmer

Filtert automatisch auf "Ruhige Lage" oder "Suiten".

💆

Ressource: Spa Slot

Prüft Verfügbarkeit der Therapeuten in Echtzeit & reserviert Slots.

🥗

Ressource: Küche

Passt Meal-Plan auf "Dosha-Typ" an (Ayurveda).

Datensynthese Visualisierung

Input
"Ich brauche Ruhe & Detox"
DIRS21 Data
Verfügbarkeit Live
KI Generiert

Detox Weekend Package

Speziell für Sie zusammengestellt · anpassbar

Junior Suite (Gartenblick) 2 Alternativen
Fr-So
Auch verfügbar: Deluxe Suite (+45€) · Appartement (+20€)
2x Ganzkörpermassage
Sa 10:00, So 11:00
Sa 10:00 ✓ Sa 14:00 Sa 16:00
Ayurveda Vollpension Vata
Vata ✓ Pitta Kapha
💬 "Massage lieber nachmittags" – einfach eintippen
540,00 €
Preis passt sich live an
Predictive UI

Liquid Booking Engine

Die UI reorganisiert sich basierend auf dem Nutzerverhalten. Hovern Sie über die Bereiche, um zu sehen, wie das Interface reagiert.

🛏️
Zimmer
💆
Spa
🥗
Kulinarik
👆
Hover über einen Bereich
Die UI passt sich dem Nutzer-Fokus an
CLIP Integration

Visual Preference Matching

Welche Stimmung spricht Sie an? Wählen Sie 1-3 Bilder – das System findet passende Aktivitäten durch Vektor-Ähnlichkeit, ganz ohne manuelle Tags.

Tippen Sie auf Bilder, die Sie ansprechen

Potential für Hoteliers

Warum sich der Wechsel zu dynamischen Interfaces lohnt.

Durchschnittlicher Warenkorbwert (Ancillary Revenue)

Vergleich: Standard Buchungsstrecke vs. KI-Generierte Pakete

*Prognose basierend auf gesteigerten Zusatzverkäufen (Spa, F&B)

Conversion Rate Optimierung

Weniger Klicks bis zum Abschluss durch Relevanz.

*Reduzierung der Absprünge durch personalisierte UX

Statisch vs. Generativ

Der direkte Vergleich der Buchungsparadigmen.

Merkmal Statische Distribution Generative Distribution
Benutzeroberfläche Starre Formulare & Listen Dynamisch generierte Komponenten
Suche Keyword & Filter (Pool=Ja) Semantisch & Vektorbasiert
Produkt Vordefinierte Pakete Echtzeit-Bundling
Datenstruktur Relational (SQL) Hybrid (SQL + Vektor)
Upselling Checkbox im Checkout Kontextueller Dialog
Integration Silos (PMS / Spa getrennt) Agentic Orchestration

Technologie-Stack für die Vision

Diese Komponenten ermöglichen die Transformation.

Frontend
Vercel AI SDK / RSC
Streaming UI-Komponenten
Datenbank
Vektor-DB (Pinecone)
Hotel-Embeddings
Modelle
GPT-4o / Claude + CLIP
Sprach- & Bildverständnis
Orchestrierung
LangChain / Agents
API-Koordination
API Standard
OpenTravel Alliance 2.0
Standardisierte Formate
Integration
DIRS21 Cockpit API
PMS ↔ Spa ↔ POS