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, AG-UI, 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
@vio/ui-kit-agui	AG-UI event stream wiring	AG-UI + UI Kit

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

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.

AG-UI + UI Kit: Import @vio/ui-kit-agui — components render automatically from the AG-UI event stream. No interaction code needed.

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

See Integration Options for details on each mode.