HOUSELIGHTS

Inspiration

Buying theater tickets should be a perfect job for an AI assistant: compare hundreds of seats, balance price against view quality, and keep adjacent seats together. In practice, agents see most seat maps as pixels. They must guess where to click, and the person cannot easily understand or correct what the agent is doing.

HOUSELIGHTS asks: what if the box office exposed its real structure to the agent while the person stayed in control?

What it does

HOUSELIGHTS is a shared live-theater box office for a person and an AI agent.

Through 14 WebMCP tools, an agent can search performances, inspect every seat's availability and price, compare sightline, acoustic, and value scores, recommend adjacent seats, and place time-limited holds.

Those actions immediately appear on the same seat map the person is viewing. Agent-held seats pulse amber with a visible countdown. The person can inspect, veto, release, or move them into the cart before completing checkout.

The agent provides machine-speed comparison across the whole house. The person keeps taste, context, and final purchase authority.

How we built it

HOUSELIGHTS uses vanilla JavaScript, HTML, and CSS with one shared in-memory AppStore. Human interactions and agent tools mutate the same store, preventing the UI and agent from developing separate versions of the box office.

The top-level page registers 14 imperative tools with document.modelContext.registerTool. Every tool has a JSON Schema contract and returns structured data rather than forcing the agent to scrape the DOM.

Core tools include:

• get_seat_map for structured availability, pricing, and seat-quality data
• recommend_seats for budget-aware adjacent-seat ranking
• hold_seats for visible, expiring reservations
• get_board_state for shared human-agent context
• announce_to_user for visual and screen-reader announcements
• undo_last_action for reversing agent-authored changes
• checkout for requesting—but not completing—human confirmation

The checkout form is deliberately not exposed as an agent tool. Its confirmation token is bound to the exact cart snapshot, and only a trusted human submission can create the order.

The app is deployed on Cloudflare Pages and includes a fallback registry so the same tool handlers can be tested in browsers without WebMCP enabled.

Challenges we faced

The hardest challenge was making collaboration visible rather than merely functional. A successful tool call is not enough if the person cannot see what changed. We connected every hold, cart update, announcement, and expiration to the live seat map and activity feed.

The second challenge was defining the purchase boundary. The agent needs enough authority to be useful, but it must not silently complete a transaction. We therefore separated requesting checkout from confirming checkout and bound confirmation to the reviewed cart.

We also had to handle expiring holds, conflicting seat requests, stale confirmations, undo ownership, performance switching, and accessibility without letting human and agent state diverge.

What we learned

WebMCP works best when it exposes an application's real domain model—not when it recreates screen clicking with different syntax.

We also learned that accessibility and agent usability reinforce each other. HOUSELIGHTS uses a real ARIA grid, keyboard navigation, live-region announcements, reduced-motion support, and state indicators that do not rely on color alone. The same explicit structure that helps assistive technology also gives agents a safer and more understandable interface.

What's next

HOUSELIGHTS is currently a client-side interactive simulation. A production version would connect the tool surface to authoritative inventory, atomic server-side seat locks, persistent sessions, idempotent checkout, and a real payment provider.

The larger idea extends beyond ticketing: agents should handle structured comparison and reversible preparation while people retain informed authority over consequential actions.

Built With

• accessibility
• aria
• chatgpt
• cloudflare-pages
• css3
• html5
• javascript
• node.js
• openai
• playwright
• webmcp
• wrangler