UI Components

Vio provides a shared UI component library — @vio/ui-kit — that powers every surface rendering hotel UI, including Vio's own products. Partners on UI Kit Library and Hosted MCP App integrations get pre-built hotel UI out of the box. When Vio ships a UI improvement, it reaches every partner surface automatically.

See it in action: Vio ChatGPT App

Packages

Package	Purpose	Used by
@vio/ui-kit-core	Framework-agnostic hotel UI components	All modes with UI
@vio/ui-kit-react	React wrapper with callback props	UI Kit Library

Available components

Hotel search results

Displays when search_hotels returns results:

• Hotel cards — Image, name, star rating, guest rating, price, booking button
• Interactive map — Mapbox-powered map with hotel pins
• Search summary — Location, dates, guest count
• Expand to fullscreen — Desktop and mobile optimized layouts

In ChatGPT, the fullscreen Open in Vio button opens Vio search results with the available destination, dates, guests, and currency. If no destination is available, it opens the Vio homepage. The link preserves the same anonymous ID as the hotel and offer links.

Hotel detail panel

Displayed when a user clicks on a hotel card or requests more details:

• Image carousel — Swipeable hotel photos
• Review summary — AI-generated insights by category
• Room list — Available room types with amenities and prices
• Facilities — Grouped amenity list with icons
• FAQ — Expandable question/answer pairs
• Location details — Area description, nearby attractions
• Booking offers — Provider comparison with direct booking links

Additional components

• VioFilters — Interactive filter controls for facilities, star rating, price range
• VioCompareTray — Side-by-side hotel comparison
• VioPriceAlert — Price monitoring setup and confirmation
• VioMapView — Full map view with hotel pins and clustering

Theming

Components adapt to the host's theme and accept custom brand colors:

• Light mode — Clean white backgrounds
• Dark mode — Dark backgrounds with appropriate contrast
• Brand accent — Configurable via theme.accent

<VioSearchResults theme={{ accent: '#6001D2' }} />

Responsive design

Components adapt to device type:

• Desktop — Side-by-side map and list, fullscreen overlays
• Mobile — Stacked layout, swipeable panels, bottom sheets

Customization levels

Level	Description	Example
Theme	Colors, fonts, spacing	theme={ accent: '#6001D2' }
Slot overrides	Replace specific sub-components	Custom booking button
Headless	Use Vio's data hooks with your own components	Full design control

Integration by mode

UI Kit Library: Import @vio/ui-kit-react components, pass MCP data as props, and implement interaction callbacks.

Hosted MCP App: UI is fully hosted by Vio. No package installation required.

See Integration Options for details on each mode.