Runner Agent × Thailand in Motion

Inspiration

Planning a community run often means jumping between event pages, route details, pace groups, transport options, safety rules, and registration forms. Runner Agent × Thailand in Motion explores a simpler model: a runner describes the goal once, and a browser agent coordinates the plan while every consequential decision remains visible and human-controlled.

What it does

The app turns a conversational city, distance, pace, and social request into an actionable week board. It can shortlist and compare events, open a selected route in the visible interface, read participation rules, apply deterministic readiness checks, plan a safe return, build a bring-borrow-refill-repair support loop, and prepare a registration.

Registration is never automatic. The agent can stage a Run Pass, but the pass does not exist until the runner reviews the visible confirmation dialog and confirms it. Optional post-run social choices keep alcohol-free and run-only participation first-class, and the app never recommends driving after drinking.

Why WebMCP is central

The site registers 14 bounded tools through the imperative document.modelContext.registerTool() API. These tools use the same domain logic and visible state as the human interface, so an agent does not operate a separate hidden workflow. A user can see the selected route, review readiness results, change preferences, and retain final control.

The tool set covers schedule planning and saving, Runner Passport retrieval, circular support, bounded catalog search, event discovery and comparison, event details and rules, readiness, safe-return options, registration preparation, redacted Run Pass lookup, and confirmed cancellation.

How it improves the experience

One natural-language request replaces a sequence of filters and disconnected pages. Structured results make pace, distance, availability, accessibility, social choices, and safety rules easier to compare. Agent activity appears in the same interface the runner uses, unsafe combinations are blocked deterministically, and sensitive emergency-contact data is excluded from agent-facing pass results.

How we built it

The client uses TypeScript and Vite. A Cloudflare Worker and D1 provide optional signed-in Runner Passport persistence, while guest planning and passes continue to work without an account. Vitest covers domain behavior, UI flows, WebMCP contracts, privacy boundaries, and the Shopify adapter.

The optional Shopify Storefront MCP connector is intentionally limited to searching one runner-confirmed remaining need after bring, borrow, refill, and repair. It stops before cart or checkout and reports store_required until an authorized store is configured.

Challenges and learning

The hardest part was keeping the human and agent experiences synchronized without letting the agent silently cross consequential boundaries. We added strict JSON Schemas, runtime validation, explicit read-only and state-changing annotations, schema-bypass defenses, redacted outputs, and visible confirmation for registration.

We also learned that WebMCP browser capability must be tested separately from ordinary UI tests: a passing harness proves the contracts but does not replace supported-browser discovery and execution evidence.

Current boundaries

Displayed events, venues, routes, capacity, and prices are fictional demo data. Shopify catalog search is disconnected until an authorized store domain is supplied. Render automation is roadmap-only. The app does not create purchases or provide medical advice.

Built With

• chatgpt
• cloudflare
• d1
• shopify
• typescript
• vite
• vitest
• webmcp
• workers