Travel WebMCP Template
A full-featured travel agency website template with 15 WebMCP tools for flight search, hotel booking, itinerary creation, and trip planning — optimized for AI agent workflows.
Load live preview on demand to keep template pages fast.
// Register search_flights tool
navigator.modelContext.registerTool({
name: "search_flights",
description: "Search available flights between two airports for given dates, passengers, and cabin class.",
inputSchema: {
"type": "object",
"properties": {
"origin": {
"type": "string",
"description": "Departure airport IATA code (e.g. LAX)"
},
"destination": {
"type": "string",
"description": "Arrival airport IATA code (e.g. NRT)"
},
"departure_date": {
"type": "string",
"description": "Departure date (YYYY-MM-DD)"
},
"return_date": {
"type": "string",
"description": "Return date (YYYY-MM-DD) for round-trip flights"
},
"passengers": {
"type": "number",
"description": "Number of passengers"
},
"cabin_class": {
"type": "string",
"enum": [
"economy",
"premium_economy",
"business",
"first"
],
"description": "Cabin class preference"
}
},
"required": [
"origin",
"destination",
"departure_date",
"passengers"
]
},
annotations: {"readOnlyHint":true},
execute: async (params) => {
const response = await fetch("/api/search_flights", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(params),
});
return response.json();
}
});What's Included
End-to-end travel tools from flight search to booking confirmation, with insurance and currency exchange.
Premium dark UI with sky blue accents, glass cards, and a subtle world-map dot pattern.
JavaScript tool registration for programmatic access plus HTML forms for declarative booking.
The book_trip tool requires explicit user confirmation before processing payment.
Single-file deployment with zero external dependencies — just drop into your web root.
Six destination cards with real routes, flight times, prices, and seasonal information.
Why This Template Works
Designed for AI agent interoperability with structured tool definitions.
Complete Booking Pipeline
Tools cover the entire travel funnel: search, compare, plan, and book — agents can handle end-to-end trips.
Structured Itinerary Model
create_itinerary and get_itinerary tools give agents a persistent data structure to build and refine trip plans.
Transaction Confirmation
book_trip requires user interaction, ensuring agents never charge a card without explicit human approval.
Rich Context Tools
Destination info, weather, visa requirements, and currency exchange give agents the context to make informed recommendations.
Implementation Guide
Follow these steps to deploy the template on your website.
Download the Template
Copy or download the HTML file and serve it from your travel agency website.
Connect Flight & Hotel APIs
Replace the /api/* endpoints with your GDS, OTA, or aggregator API (Amadeus, Sabre, Booking.com, etc.).
Configure Payments
Integrate your payment processor with the book_trip endpoint for secure transaction handling.
Customize Destinations
Update the destination cards with your most popular routes, seasonal pricing, and imagery.
Test with an AI Agent
Run through a full booking flow with Claude or another WebMCP-compatible agent to verify all 15 tools.
Deploy and Monitor
Launch to production and track agent-driven bookings through your analytics and revenue dashboards.
Download Options
Other Industry Templates
Ready to Make Your Site Agent-Ready?
Deploy this template and start receiving structured traffic from AI agents.