Arion Trip Planner

Result
Home
Mobile Result
Mobile Chat
Map
Mobile Map

Inspiration

Travel planning is fragmented: people jump among sites to research, compare, schedule, and book. We imagined an agent that can help with the full planning loop while keeping people in control of every important decision.

What it does

Arion Trip Planner turns a natural-language request into a flexible itinerary. It searches stays and activities, compares options against budget and preferences, builds day-by-day plans, and replans when constraints change. The traveler approves any booking or payment step.

How we built it

We built Arion as a WebMCP-enabled web app. It exposes structured tools for searching travel options, creating itineraries, saving shortlists, checking budgets, and replanning. Provider adapters normalize external travel data into one planning experience, while WebMCP lets an agent use these tools directly in the browser.

Challenges we ran into

The hardest problem was making recommendations useful without letting the agent take irreversible actions. We designed explicit approval points for booking and payment, and kept search, comparison, and planning separate from confirmation.

Accomplishments that we're proud of

We created a planning experience where an agent can do more than suggest links: it can assemble, update, and explain a realistic trip plan. We are especially proud that the user remains the final decision-maker throughout.

What we learned

Agent-native products need clear tool boundaries, structured data, and transparent state. WebMCP makes these interactions more reliable than asking an agent to navigate a traditional website visually.

What's next for Arion Trip Planner

Next, we plan to add more live provider integrations, collaborative trip planning for groups, richer availability data, and secure, user-approved checkout flows.

Built With

chatgpt
node.js
ors
react
typescript
webmcp

Submitted to

The WebMCP Challenge

Created by

I built Arion Trip Planner, an AI trip-planning app for Vietnam self-drive trips, with WebMCP as the core interface between the app and any AI agent - not an add-on.

Every action a customer can take - create a trip, draft/refine a route, search flights/stays/vehicles, stage a booking - is registered as a real WebMCP tool via document.modelContext.registerTool(), and every piece of trip state (itinerary, fleet, bookings, disruptions) is a real WebMCP resource. The site's own built-in chat assistant is just one WebMCP client among many - an external agent like ChatGPT or Claude can drive the exact same trip through the exact same tools, no scraping, no bespoke integration.

The one deliberate limit: booking-execution tools are staged by whichever assistant is planning, but only a human tap on Approve ever commits a real reservation - keeping an agent free to plan and prepare while a person alone controls spend.

Beyond the WebMCP wiring itself, I built the real backend behind it: live flight/vehicle booking against mock provider APIs, geocoding and route computation running in the background so tool calls stay fast, and failure-reason reporting so a failed booking is diagnosable and retryable instead of a dead end.

Steve Tran
I enhanced the itinerary planning and booking review experience by implementing a public itinerary sharing feature and end-to-end Google Calendar synchronization. I also developed an interactive map featuring location selection, ORS routing, and Street View integration, while resolving issues related to routing, zooming/panning, and loading. On the API side, I implemented the Google Calendar OAuth flow, added relevant tools and resources, and optimized the itinerary creation process to ensure all stops are correctly processed and fully displayed on the map.

Dương Vỹ