Appearance
Integration Options
Partners can access Vio's hotel search capabilities at whatever level of depth suits their product. All integration modes call the same Vio MCP tools — the difference is how much behaviour, UI, and orchestration Vio provides on top.
Three principles underpin the platform:
- One MCP server. All modes call the same Vio MCP tools. The data layer is always Vio's.
- One component library.
@vio/ui-kitpowers every surface that renders hotel UI — partner apps, the hosted MCP App, and Vio's own agent. - Partners own their agent. Vio never requires partners to adopt a specific agent framework.
Overview
| Integration | Maturity | Partner builds | Vio provides | Best for |
|---|---|---|---|---|
| MCP | Mature | Everything on top of the data | Data layer | Any partner with an AI layer |
| SKILL | Maturing | Agent + surface | Behavioural instructions | Consistent Vio-quality results out of the box |
| UI Kit Library | Preview | Shell + wiring | Data + UI components | Existing frontends that want rich hotel UI |
| Hosted MCP App | Maturing | Nothing | Everything | Fastest time to market |
| A2A Agent | Planned | Partner agent only | Peer agent | Fully autonomous booking flows |
See the Maturity reference at the end of this page for what each status means.
Partner types
Most partners fall into one of four product shapes. The guidance below uses these types to recommend a stack.
- OpenClaw deployments — Partners that have adopted the OpenClaw framework to build their own AI assistant. They operate their own agent infrastructure and connect to third-party data sources via MCP and SKILLs.
- Own agents — Partners running a proprietary AI agent, on any stack or LLM. They own the full AI layer and are looking for data and capabilities to plug in.
- Search engines — Partners operating web or travel search products that surface AI-powered result experiences (AI Mode, generative summaries). Hotel results appear inline alongside organic search. Correctness and low latency are essential.
- Browser / extensions — Partners building browser-native products or extensions that detect travel-related pages and inject additional context, tools, or UI directly into the browsing experience.
Partner × technology fit
| Technology | OpenClaw | Own agents | Search engines | Browser / extensions |
|---|---|---|---|---|
| MCP | ✅ Primary | ✅ Primary | ✅ Primary | — |
| SKILL | ✅ Primary | ✅ Primary | ✅ Primary | — |
| UI Kit Library | ⚠️ Possible | ✅ Primary | ✅ Primary | ✅ Primary |
| Hosted MCP App | ⚠️ Possible | ✅ Primary | ⚠️ Possible | — |
| A2A Agent | ⚠️ Possible | ✅ Primary | ⚠️ Possible | — |
Legend: ✅ Primary — recommended path, designed for this use case. ⚠️ Possible — works, but requires extra effort or has tradeoffs. — Not applicable.
MCP
Maturity: Mature · Data layer only
The foundational integration layer. MCP is an open standard that lets any AI assistant (Claude, ChatGPT, custom agents) call Vio's hotel data and services — search, pricing, availability, reviews — in a structured, reliable way. The partner connects to Vio's MCP server and their AI can immediately query our inventory.
MCP has no AI inside it. It is purely an API layer that exposes Vio's internal services in a format that AI assistants can call. The intelligence lives entirely in the partner's AI.
When to choose this mode. You have an AI layer and want direct access to Vio's data and capabilities. You are comfortable shaping the presentation and behaviour yourself.
What Vio provides: MCP server endpoint, API key, structured VioHotel[] data, TypeScript schema definitions.
What the partner owns: All UI components, interaction handling, agent logic, full request-response cycle.
Quick example: LangChain + MCP
typescript
import {MultiServerMCPClient} from '@langchain/mcp-adapters'
import {initChatModel} from 'langchain/chat_models/universal'
import {createReactAgent} from '@langchain/langgraph/prebuilt'
const mcpClient = new MultiServerMCPClient({
vio: {
transport: 'http',
url: 'https://mcp.vio.com/mcp?api_key=YOUR_API_KEY'
}
})
const tools = await mcpClient.getTools()
const llm = await initChatModel('gpt-4o', {streaming: true})
const agent = createReactAgent({llm, tools})See Examples for complete working implementations.
| Dimension | Detail |
|---|---|
| UI dependency | None — partner builds everything |
| Interaction handling | Partner implements all callbacks |
| Time to integrate | ~1 day |
| Works with | Any LLM that supports tool/function calling |
SKILL
Maturity: Maturing · Behavioural instructions on top of MCP
The Vio SKILL is a layer of behavioural guidance that sits on top of MCP. It tells the AI assistant how to behave when using Vio's MCP tools: how to present results, how to handle user intent (discovery vs. comparison vs. lookup), which signals matter (price analytics, review summaries), and how to guide users toward booking.
A SKILL is a simple .zip file containing instructions for the LLM, following the open agent skills standard. It can be added to any agent that supports skills. It is not an agent and cannot perform complex orchestration — those still live in the partner's agent layer.
When to choose this mode. You are using MCP and want a consistent, Vio-quality experience for how results are interpreted, presented, and guarded — without defining that behaviour yourself.
What Vio provides: Open-source behavioural instructions that encode Vio's travel expertise, producing a consistent experience across Claude, ChatGPT, and custom agents.
What the partner owns: The agent, the surface it runs on, and the MCP connection. The SKILL has no effect without the tools.
| Dimension | Detail |
|---|---|
| Dependency | Vio MCP |
| Integration effort | Low — add a config file to the agent's system prompt |
| Time to integrate | ~1 hour |
| Customisation | Open-source — fork and tune |
UI Kit Library
Maturity: Preview · Data + pre-built React components
A component library that partners can use to render rich UI for MCP results. Instead of displaying hotel search results as plain text, partners can use these components to show hotel cards, price displays, maps, and room options as visual and interactive elements inside their product.
It is not a standalone integration — it requires MCP to supply the data. The partner controls when and how the components are injected into their product.
When to choose this mode. You already have your own product UI and want to upgrade MCP results from plain text to rich visual UI without building hotel components from scratch.
tsx
import { VioSearchResults } from '@vio/ui-kit-react';
const results = await callVioMCP('search_hotels', { destination, checkIn, checkOut, guests });
return (
<VioSearchResults
status="complete"
args={results}
theme={{ accent: '#6001D2' }}
onHotelSelect={(hotel) => navigate(`/hotel/${hotel.id}`)}
onPriceAlert={(hotel, price) => myBackend.createAlert(hotel.id, price)}
/>
);| Dimension | Detail |
|---|---|
| UI dependency | @vio/ui-kit-react |
| Interaction handling | Partner implements callback props |
| Time to integrate | ~2-4 hours |
| Customisation | Theme, slot overrides, headless mode |
The UI Kit Library is currently in preview. Partners piloting it should expect component coverage and API shape to continue to evolve.
Hosted MCP App
Maturity: Maturing · Fully hosted by Vio
Vio provides a fully hosted, ready-to-use hotel search application. Partners embed it via an iframe or webview — no npm dependency, no code. The partner provides a placement and Vio provides everything else.
The Hosted MCP App is built on the MCP Apps extension standard, which defines how third-party hosted experiences can be surfaced inside AI assistant interfaces with built-in security and isolation. It is most relevant for platforms that operate an open app or plugin ecosystem (e.g. Claude, ChatGPT).
When to choose this mode. You want the fastest possible time to market with no engineering investment, or you operate an open app ecosystem and want to offer Vio as a first-class hosted experience.
See the Vio ChatGPT App for a live example.
| Dimension | Detail |
|---|---|
| UI dependency | None — fully hosted |
| Interaction handling | Fully handled by Vio |
| Time to integrate | ~30 minutes |
| Partner control | None over UI or interactions |
A2A Agent
Maturity: Planned · Agent-to-agent, headless
A planned capability where Vio exposes its own AI agent that other agents can call directly, machine-to-machine. Instead of the partner's AI querying individual tools, it orchestrates with Vio's agent as a peer — enabling fully autonomous, multi-step booking flows.
A2A is not yet available and is headless by nature. Partners who need a UI alongside A2A will need to build it themselves and coordinate with Vio on the visual layer.
When to choose this mode. You are running a mature agent pipeline and want deep, low-friction orchestration with Vio without building tool-call plumbing for each capability.
| Dimension | Detail |
|---|---|
| Status | Not yet available — on the roadmap |
| Nature | Headless; partner owns any UI surface |
| Dependency | None — peer to MCP, not a replacement |
| Cost model | LLM inference on Vio's side; pricing model to be defined |
Reach out to your Vio representative if A2A is relevant to your roadmap and you want to be considered for the first pilots.
Choosing the right mode
Integration modes are layered — partners typically combine MCP with one or more of SKILL, UI Kit Library, or the Hosted MCP App. Start from your product shape, then refine by question.
By partner type
| Partner type | Recommended stack | Future path |
|---|---|---|
| OpenClaw deployments | MCP + SKILL | A2A |
| Own agents | MCP + SKILL + UI Kit Library (+ Hosted MCP App if you operate an open app ecosystem) | A2A |
| Search engines | MCP + SKILL + UI Kit Library (+ Hosted MCP App if you operate an open app ecosystem) | A2A |
| Browser extensions / browser-native | UI Kit Library | — |
Notes:
- OpenClaw agents are the closest fit to a native Vio integration — MCP provides the tools, SKILL ensures presentation follows Vio's UX patterns.
- Own agents (any stack, any LLM) consume Vio data via MCP regardless of underlying technology; add SKILL for consistent behaviour and UI Kit Library for rich hotel UI without building components from scratch.
- Search engines building AI Mode or AI-enhanced results benefit from the same stack as own agents — SKILL shapes presentation, UI Kit Library renders hotel cards inline alongside organic results.
- Browser extensions operate in a constrained, page-context environment; UI Kit Library components can be injected into travel pages without requiring an agent or AI layer on the extension side.
By question
| Question | Recommendation |
|---|---|
| Do you want consistent Vio-quality behaviour out of the box? | Yes — add SKILL on top of MCP. |
| Do you want rich hotel UI without building it yourself? | Yes — UI Kit Library. Embed everything — Hosted MCP App. |
| Do you want full control over the hotel UI? | Yes — MCP, or UI Kit Library in headless mode. |
| Do you want the fastest time to market? | Yes — Hosted MCP App, then migrate to MCP + SKILL (+ UI Kit Library) when you need more control. |
| Do you want to minimise engineering investment? | Hosted MCP App (none). MCP + SKILL (low). UI Kit Library (medium). |
Attribution and tracking
Each partner receives a unique API key. All searches and bookings made through your integration are automatically attributed to your product. This enables:
- Click and conversion analytics
- Revenue attribution and reporting
- Usage monitoring
Rate limits
Rate limits are configured per API key. Default limits are generous for production use. Contact your Vio representative if you need higher throughput.
Maturity reference
| Status | Meaning |
|---|---|
| Mature | Production-ready. Actively used in integrations. Stable API. |
| Maturing | Core functionality works. Actively being developed. API may evolve. |
| Preview | Functional and available to pilot partners. Not yet recommended for broad production use. |
| Planned | On the roadmap. Not yet available. |