OpenUI Trip Planner

An AI trip planner built with OpenUI: describe a trip and its answers are interfaces, not text. Explore ideas, chat about the trip, and turn it into a day-by-day itinerary on a map with live hotel prices from trivago.

It grew out of the booking assistant cookbook in the OpenUI repo. The cookbook stays small and matches its walkthrough; this repo is the full demo that gets deployed.

Run it

Needs Node 22.13 or later.

npm install
npm run generate:apiKey   # writes THESYS_API_KEY to .env.local
npm run dev

Open http://127.0.0.1:3000.

Variable	Default	Purpose
THESYS_API_KEY	(required)	OpenUI Gateway key, used only on the server
OPENUI_MODEL	openai/gpt-5.5	Model for every agent
PEXELS_API_KEY	(none)	Optional extra photo source for the planner
UNSPLASH_ACCESS_KEY	(none)	Optional extra photo source for the planner
ALLOWED_ORIGINS	(none)	Extra origins the API accepts, comma-separated, e.g. a preview domain

What's in it

URL	Experience
/ → /planner	Planner, the home page. Explore ideas as visual spreads, Chat about the trip, and turn saved places into an Itinerary: a day-by-day board on a map, with weather and prices in your currency.

How it works

The planner streams OpenUI Lang from OpenUI Gateway's Chat Completions API and renders it with its component library as it arrives, so answers write in rather than appearing at the end. The itinerary board's ask panel streams its JSON answer too, read as partial JSON while it grows. Two small calls return whole by design: the home page's weather line (checked before it's shown) and reshaping the itinerary board (the server merges the whole new plan with the current board).

Between completions the server runs app-owned tools; the main one, search_stays, calls trivago's public MCP server with the MCP SDK. The model only places hotels by id, and names, prices and booking links always come from trivago.

Other data comes from keyless public services: OpenFreeMap tiles for the map (MapLibre), Nominatim for places, Open-Meteo for weather, open.er-api.com for currency, and Wikipedia, Wikimedia Commons and Openverse for photos.

Storage and privacy

Trips, chats and itineraries live in each visitor's browser (localStorage). The routes are stateless: the planner sends the trip's earlier turns with each request, and their completions are sent with store: false.

The app has no sign-in. Every POST route accepts requests only from the app's own pages: one with no Origin header (a script, curl) is refused, so it can't spend Gateway credit from outside. There's no rate limiting, so add some before promoting the demo widely.

Deploying

Set THESYS_API_KEY in the host's server environment, ideally a key used only by this demo so its usage can be watched and revoked on its own.

Before deploying publicly:

• Check trivago's MCP terms. Hotel prices are live and can change until the guest books on trivago or the booking site.

Where things live

Path	What
src/app/planner/	The planner: Explore spreads, Chat, the Itinerary board and map
src/app/api/	One route per agent and data source; planner/agent.ts is the shared streaming loop with search_stays
src/lib/	Prompts, the trivago MCP client and search_stays tool, the origin check
src/design-system/	Fonts and colour tokens
public/icons-3d/	3D place, follow-up and weather icons (<place>-pixar.webp)