TripMate Collab: WebMCP Travel Planner

Collaborative WebMCP travel companion that curates accommodations, multimodal transport, and local gems with human-in-the-loop safety.

Comment

Inspiration

Every time I plan a family trip to Central Java, I end up with 15 open browser tabs: one for train schedules, another for hotel booking sites, Google Maps to check distances to Borobudur, and random blogs for authentic culinary spots.

When ChatGPT came along, asking it for travel tips was helpful, but it lived in a separate chat bubble. It couldn't see my screen, didn't know my exact budget filters, and couldn't click anything for me. When OpenAI and Chrome introduced the WebMCP standard, the lightbulb went off: what if the app let the AI and the traveler work on the exact same dashboard together? That simple idea became TripMate Collab.

What it does

TripMate Collab is a collaborative travel planner where you and an AI agent plan a trip on one shared screen:

  • Direct Tool Control: The AI doesn't just chat; it calls 11 structured tools to search real hotel inventory, filter by budget, and sort stays by physical distance to heritage landmarks like Borobudur or Prambanan.
  • Multimodal Transit Comparison: It calculates and compares Executive Trains, Trans-Java toll drives, and private car rentals side by side across price, travel time, and comfort.
  • Local Curation & 3-Day Itinerary: It pulls authentic local eateries (like Mangut Beong and Sate Buntel) and heritage souvenir spots, then auto-compiles a balanced day-by-day plan with total cost formulas: $$\text{Total Budget} = C_{\text{hotel}} + C_{\text{transport}} + C_{\text{activities}} + C_{\text{food}}$$
  • Human-in-the-Loop Safety: When booking a room or transit ticket, the agent never charges anything blindly. It stages the reservation and pops up an interactive confirmation dialog for the user to approve.
  • WebMCP Inspector: Anyone (including hackathon judges) can open the inspector to watch tools fire in real time with exact latency and parameter logs. ## How we built it We built the core around the new standard:
  • WebMCP Integration: Registered 11 tools using document.modelContext.registerTool({ name, description, inputSchema, execute }), with a fallback polyfill so it runs smoothly in ChatGPT's in-app browser, Chrome with the #enable-webmcp-testing flag, and standard web browsers.
  • Frontend Stack: Built with React 18, TypeScript, and Tailwind CSS. We hooked up a clean reactive event bus so whenever a tool executes, the UI cards highlight and update immediately without page reloads.
  • Bilingual Engine: Added quick one-click toggles between English and Indonesian so international travelers and locals can use it equally well. ## Challenges we ran into The hardest part was schema design and chaining. If a schema is too broad, the agent passes unpredictable arguments; if it's too rigid, the model gets confused. We had to iterate on our JSON Schemas multiple times so the model could smoothly run a multi-step sequence—like searching hotels, filtering under Rp 2,000,000, checking proximity to Borobudur, and generating an itinerary—all in one conversational flow without crashing the UI state.

Another challenge was deciding where the agent's autonomy stops. We solved this with the Human-in-the-Loop pattern: read/filter operations run instantly, while booking actions pause for explicit user confirmation.

Accomplishments that we're proud of

  • We didn't just build a toy single-tool demo; we built an end-to-end travel toolset with 11 working WebMCP functions.
  • The UI feels snappy and responsive—seeing the agent sort hotels and build an itinerary live on your screen feels like working with a real travel assistant.
  • Built-in live telemetry (WebMCP Inspector) that makes debugging and testing tool calls completely transparent. ## What we learned WebMCP completely shifts how we think about front-end architecture. In the past, we only built UI for human fingers and mice. Now, we design apps with an API layer right inside the DOM for AI agents to interact with. Structured tools eliminate the hallucination problem because the model interacts with real, verified application data. ## What's next for TripMate Collab: WebMCP Travel Planner
  • Connecting real booking sandbox APIs (direct KAI train tickets and hotel reservation webhooks).
  • Adding multi-user real-time rooms so friends or travel buddies can chat with the agent together on the same canvas.
  • Adding voice input directly into the agent panel for hands-free planning on mobile devices.

Built With

  • agent-native
  • bilingual
  • canvas-confetti
  • chatgpt
  • chrome-flags
  • css3
  • html5
  • human-in-the-loop
  • javascript
  • json-schema
  • lucide-icons
  • open-source
  • openai
  • react
  • responsive-design
  • tailwind-css
  • travel-tech
  • typescript
  • vite
  • webmcp
Share this project:

Updates

Submission history