Marinela AI Concierge

Inspiration

Marinela Hair Design is an operating hair salon in Solin, Croatia. Its production website already had protected booking, public pricing, dashboard-managed services, and calendar connections. For the challenge, we added a WebMCP layer that lets a compatible browser agent turn a natural-language request into structured, current salon data—without handling personal information or final booking confirmation.

What it does

Marinela AI Concierge exposes five focused WebMCP tools directly from the public salon website:

• get_salon_information returns public salon details, staff, and opening hours.
• find_bookable_services searches the active service catalog.
• search_price_list searches current public price-list rows.
• check_appointment_availability checks live availability for a service, stylist, and up to seven dates.
• prepare_booking_for_confirmation rechecks one selected time and opens the salon's first-party booking page with the service, stylist, date, and time preselected.

The first four tools are read-only. The fifth performs only visible page navigation: it cannot reserve, create, or confirm an appointment.

The client must review the summary, enter personal details, acknowledge the privacy notice, complete Cloudflare Turnstile, and click the final confirmation button. No WebMCP tool can cancel or reschedule bookings, look up customers, or access salon administration.

The system also keeps two different price concepts honest: the matched bookable Balayage color service remains price on request, while the separate public price list provides current €100–€200 Balayage variants as context rather than a guaranteed quote.

How we built it

The production application uses TypeScript, React, Next.js, Vite/Vinext, and Cloudflare infrastructure. Native imperative WebMCP tools are registered through document.modelContext.registerTool.

Each tool has a constrained JSON input schema with additionalProperties: false, followed by runtime shape and value validation. Tools are registered only on approved public routes and are removed during navigation or component unmount.

Same-origin, rate-limited, no-store routes expose a sanitized salon catalog and availability results. Availability is checked against salon hours, existing booking claims, and the selected stylist's connected Google Calendar. A verification failure is returned as an error and is never represented as a fully booked day.

The booking handoff rechecks the selected slot, passes only non-personal selections to the first-party booking page, and never calls the booking-creation endpoint. If the client later submits the visible form, the existing server validates the slot again.

The public repository contains sanitized production source, setup and security documentation, an MIT license for code, a separate brand-asset notice, and a GitHub Actions workflow. The latest public workflow is green and the release suite passes all 35 tests.

Challenge scope

The salon website, visual identity, staff dashboard, Google Calendar integration, public price list, and conventional protected booking flow existed before the challenge. During the submission period, the project was meaningfully extended with five WebMCP tools, the live Concierge catalog, agent-prepared booking review, a dedicated /concierge experience, explicit privacy boundaries, fail-closed safety controls, documentation, and regression tests.

Challenges

The main challenge was making agent capabilities useful without exposing private customer or administrative data. We also had to preserve honest distinctions between a bookable service and an informational price row, a currently unavailable time and a verification failure, and a prepared review and an actual booking.

Accomplishments

• Shipped five focused WebMCP tools on a live production salon website.
• Connected service discovery, public price context, and live availability in one agent-ready flow.
• Kept appointment creation and every personal-information field outside the WebMCP tool surface.
• Added strict schemas, runtime validation, same-origin checks, rate limits, and fail-closed behavior.
• Published reproducible public source with automated quality gates and 35 passing tests.

What we learned

Effective WebMCP design is not only about exposing functions. Tool scope, failure semantics, data provenance, and the boundary between assistance and consequential action are equally important. A visible human-confirmation step can be a product advantage: the agent reduces discovery work while the client retains control over identity, consent, and the final transaction.

What's next

Next steps include testing with additional WebMCP-capable clients, refining tool descriptions from real salon scenarios, and adapting the same human-confirmed pattern to other appointment-based small businesses without expanding write authority.

Built With

• cloudflare-d1
• cloudflare-turnstile
• cloudflare-workers
• github-actions
• google-calendar-api
• next.js
• react
• typescript
• vinext
• vite
• webmcp