SplitTrip

Inspiration

Group trips often stall because everyone has different budgets, must-haves, and vetoes. SplitTrip explores a better collaboration model: let an agent handle the constraint arithmetic while humans keep control of the final decision.

What it does

Three travelers pool a fixed budget and define a protected spending buffer, must-have items, vetoes, shared preferences, and individual preferences over a travel catalog. An agent proposes a complete allocation. SplitTrip then validates it deterministically against the budget cap, protected buffer, must-haves, vetoes, shared preference coverage, lodging count, traveler representation, schedule conflicts, capacity, transport compatibility, and location feasibility.

The proposal, rationale, validation results, and named fairness breakdown appear immediately. Travelers can reject the proposal or approve it individually. Only after Maya, Alex, and Sam have all approved does the lock_allocation WebMCP tool become available. Once locked, the plan is immutable and can be exported or shared as a bounded read-only snapshot.

How I built it

SplitTrip is a React and TypeScript application deployed on Cloudflare Workers. It uses the WebMCP imperative API through document.modelContext.registerTool(), with an AbortController-managed lifecycle tied to one typed state machine:

• get_trip_context — always available
• get_allocation_status — always available
• propose_allocation — available during setup
• revise_allocation — available while a proposal exists and is not locked
• lock_allocation — available only after unanimous approval

Every tool calls the same Zustand store actions used by the human interface, so the agent and UI cannot disagree. Constraint editing and approval actions are intentionally never exposed as tools; they remain human-only. The exact live tool set is visible in the Tool Inspector, and registration-change toasts make state transitions easy to see.

The interface was built with React, TypeScript, Vite, Tailwind CSS, Zustand, Zod, and WebMCP. It was tested with Vitest and Playwright and deployed on Cloudflare.

Human-agent collaboration

The key design choice is that human authority is enforced by capability availability, not merely by a warning or a disabled button. Before unanimous approval, the finalization tool does not exist in the browser registry. A prompt cannot route around that boundary.

At the same time, humans can inspect every agent action: the selected items, rationale, constraint violations, fairness breakdown, and full tool-call trace. Tool descriptions and Zod schemas give the agent structured context and actionable validation errors.

Measured evidence

A built-in evaluation compares a constraint-aware strategy against a constraint-blind baseline across 5 scenarios and 3 catalog orderings, using the production validator:

These are transparently labeled scripted trials, not claimed live-agent runs.

Challenges

The hardest part was making WebMCP's security property visible. The absence of a tool before approval is powerful but easy to miss, so I added live registration toasts, an exact Tool Inspector, and a simulated demo that follows the same application code path.

Another challenge was validating an experimental browser integration consistently. The state-aware registry lifecycle is covered by automated integration tests, including a stale tool-reference test after rejection and an in-flight-call edge case.

Accomplishments

• Unanimous approval is an architectural gate: lock_allocation is absent until all required humans approve.
• Automated coverage spans the full state machine, validation rules, persistence, and reactive tool lifecycle.
• The deployed application includes an observable end-to-end demo, exportable results, and an honest evaluation panel.

What's next

Authenticated multi-user approvals, editable traveler profiles, booking integrations, and expanded live-agent compatibility testing.

Built With

• chatgpt
• cloudflare
• elevenlabs
• playwright
• react
• tailwindcss
• typescript
• vite
• vitest
• webmcp
• zod
• zustand