Open Web Concierge

• 

  Concierge Hub — Natural Language Intent Input & User Identity Defaults

• 

  WebMCP Security Gate — Human-In-The-Loop Confirmation before any transaction

• 

  Completed Itinerary — Verified cross-merchant receipts with zero backend API keys

• 

  Merchant 1: Artisan Roast Café — Exposing check_menu & order_coffee tools

• 

  Merchant 2: Luxe Grooming Studio — Calendar slot discovery & appointment booking

• 

  Merchant 3: Paper & Ink Bookstore — untrustedContentHint protection against prompt injection

Inspiration

Today's agentic web demos fall into one of two traps:

1. Brittle Screen Scraping: Agents using vision or accessibility trees to click coordinates and type blindly into DOM elements, which break the moment a CSS class, layout, or modal changes.
2. Walled-Garden Aggregators: Agents restricted to closed ecosystem APIs where independent neighborhood businesses must surrender 30% take rates and hand over customer relationships to centralized platforms.

When the W3C and Chrome WebMCP standard (document.modelContext) emerged, we saw the foundation for a third, better future: the open web itself as the native agent runtime.

We asked ourselves: Could an AI agent coordinate a real-world multi-stop morning errand across three completely independent, standalone neighborhood businesses—a specialty coffee shop, a boutique grooming studio, and an indie bookstore—with zero backend integration, zero proprietary API keys, and pure on-page tool discovery?

That question led to Open Web Concierge.

What It Does

Open Web Concierge is an autonomous multi-vendor assistant that plans, negotiates, and executes unified errands across the open web while keeping the human firmly in control.

• Dynamic Instruction-Driven Scoping: The user speaks naturally (e.g., "I want an iced cold brew with oat milk", "Book a haircut with Marcus at 11:15", or a multi-stop Saturday routine). The agent dynamically parses intent and activates only the merchant services requested, gracefully omitting non-relevant stops with zero wasted spend.
• User Identity Profile & Live Form Reflection: The Concierge maintains the user's default credentials (Name, Email, Mobile No., Gender). As the agent navigates each merchant website, it emits live synchronization events over a shared errand bus—allowing the user to watch the merchant's counter form or booking calendar populate live on screen with an active sync indicator.
• Human-in-the-Loop (HITL) Security Gates: The agent never silently commits funds. Before finalizing any transaction, a modal confirmation gate halts execution, presenting itemized pricing, timing, and merchant verification for explicit user approval.
• Live Cross-Side Checkout Reflection: Once authorized, dual-layer real-time synchronization (BroadcastChannel and reactive storage) immediately posts the confirmed order to the merchant's Active Barista Queue, Client Appointment Log, and Front Register Holds across independent windows and tabs.
• Auditable Receipts: Upon completion, the Concierge compiles an itemized trip log with verifiable order IDs and costs, exportable as Markdown or JSON.

How We Built It

We built the application as a production-grade multi-page web ecosystem using React 19, Vite 6, and Tailwind CSS, adhering strictly to the Chrome & W3C WebMCP specification:

1. Merchant Tool Registration on document.modelContext:
   • Artisan Roast Café (/cafe/): Exposes check_menu (readOnlyHint: true) and order_coffee (with strict parameter schemas and customer contact info).
   • Luxe Grooming Studio (/salon/): Exposes check_availability (readOnlyHint: true) and book_slot for stylist and calendar scheduling.
   • Paper & Ink Bookstore (/bookstore/): Exposes search_catalog (untrustedContentHint: true) and reserve_book for front-desk holds.
   • Concierge Orchestration Hub (/): Exposes get_errand_briefing and log_completed_step.
2. Prompt Injection Defense via Chrome Hints:
   • Following WebMCP security guidelines, search_catalog marks query results with untrustedContentHint: true. This informs the consuming LLM that merchant book blurbs and user reviews are untrusted third-party content, neutralizing indirect prompt injection vectors.
3. Idempotency Protection:
   • Implemented client request tokens (clientRequestId) cached in a 15-second sliding window to prevent accidental double-billing or duplicate holds from rapid agent loops.
4. Bi-Directional Errand Bus:
   • Combined the HTML5 BroadcastChannel API (webmcp_errand_bus) with reactive window storage listeners to ensure sub-millisecond, cross-tab synchronization between the Concierge hub and open merchant tabs without requiring an intermediary WebSocket server.
5. Built-in WebMCP Inspector:
   • Included an interactive on-page drawer allowing judges and developers to inspect live registered schemas, test parameter validation, and trigger manual tool executions.

Challenges We Faced

• Contextual Linguistic Disambiguation: Natural language is messy. In a prompt like "Book a haircut with Marcus", the word "book" is a scheduling verb, not a request for literature. We engineered a contextual parser that accurately distinguishes verbal actions ("book an appointment") from literary nouns ("read a book", "buy a novel") to prevent erroneous merchant activations.
• Zero-Flicker Live Form Population: Connecting cross-tab React state to live agent actions without causing form resets or race conditions required decoupling tool discovery from UI input bindings, synchronizing through a predictable broadcast event contract.
• Eliminating "AI Slop" Aesthetics: We committed to an authentic, human-crafted design language. We eliminated all emojis, avoided generic gradient pills, and designed a neutral, high-contrast dark palette (#0C0C0C, #121110, #141414) inspired by Swiss editorial typography and physical ledger boards.
• Cross-Window Consistency: Ensuring that checkouts made in the Concierge immediately reflect in the merchant's Barista Queue or Appointment Log across separate browser tabs and embedded multi-views required implementing dual-channel sync (BroadcastChannel with storage event fallbacks).

What We Learned & The Future of the Open Web

WebMCP represents a paradigm shift for web development. For the last 15 years, the web has been pressured into walled gardens and mobile app silos because machines couldn't reliably interact with standard HTML.

By standardizing document.modelContext, the open web becomes the agentic web. A local family-owned bakery or indie bookstore can become fully AI-operable in an afternoon simply by exposing standard tools on their existing website. No platform monopolies, no 30% tolls, and no closed ecosystems—just humans, agents, and merchants collaborating over the open protocols of the web.

Built With

• ai-agents
• api-free
• autonomous-agents
• broadcastchannel
• chrome-149
• cross-tab-sync
• esm
• frontend
• human-in-the-loop
• javascript
• json-schema
• localstorage
• modelcontextprotocol
• modern-web
• multi-page-app
• open-web
• prompt-injection-defense
• react
• react19
• security
• tailwindcss
• vite
• w3c
• web-standards
• webmcp