💡 Inspiration

Traditional gym management software is clunky, fragmented, and buried behind endless tabs of legacy forms. Facility managers and head coaches waste hours every week manually cross-referencing floor maintenance, juggling trainer shift conflicts, and reacting too late after premium members have already stopped showing up.

Inspired by Tony Stark’s tactical AI assistant F.R.I.D.A.Y., we built VIERNES — an agent-native Gym Operations ERP and Visual Floor Commander that transforms static database software into a real-time, interactive command center powered by the Web Model Context Protocol (WebMCP).


🚀 What it Does

Viernes unites the entire athletic facility's operations into a single reactive workspace where humans and AI agents collaborate seamlessly:

  1. 🏟️ Tactical Visual Floor Commander: An interactive 2D blueprint of a 15,000 sq ft facility across 5 zones. Real-time machine operational states, maintenance wear badges, and agent attention pulses.
  2. 📅 Dynamic Class Timeline & Trainer Roster: High-density weekly schedule grid with room capacity validation, instant conflict detection, and trainer reassignments.
  3. 👥 Member Churn Radar & Retention Center: Algorithmic churn risk scoring (0–100%) tracking attendance decay with one-click personalized re-engagement campaigns.
  4. 📈 Facility Telemetry & Revenue Sandbox: Live occupancy heatmaps, equipment duty cycles, and real-time financial sensitivity modeling.
  5. 🎙️ Floating Viernes AI Copilot HUD: In-browser agent console with one-click multi-step scenario presets and live WebMCP execution telemetry.

🌐 WebMCP Implementation & Paradigm Shift

1. Why is this use case a strong fit for WebMCP?

Athletic facility management is intrinsically visual, spatial, and multi-variable. Instead of forcing AI agents to blindly scrape HTML or make disconnected server calls, WebMCP gives the browser's model direct, typed, programmatic control over live in-memory React state and SVG canvas objects.

2. How does it create a better user experience?

A manager can issue a single natural language instruction ("Mark Bench #3 for maintenance and move Coach Marcus's 5:30 PM class to Zone C"), and Viernes executes multiple synchronized UI state changes in milliseconds. The manager sees the 2D floor plan pulse red while the calendar shifts room assignments instantly.

3. What humans and agents can do together now:

Before WebMCP, combining 2D asset awareness with dynamic scheduling required hours of manual spreadsheet work. With Viernes:

  • The agent detects at-risk member cohorts, calculates churn probabilities, and populates retention offers.
  • The human reviews proposed changes visually on the floor plan and approves or adjusts them with drag-and-drop ease.
  • The agent simulates revenue forecasts and rebalances class schedules to eliminate bottlenecks.

4. Technical Architecture

Viernes registers 6 client-side tools directly onto document.modelContext.registerTool upon mounting:

  • update_gym_floor_equipment
  • manage_class_schedule
  • query_member_cohorts
  • launch_retention_campaign
  • simulate_revenue_forecast
  • get_facility_telemetry

All inputs are validated via strict Zod schemas with human-in-the-loop safeguards on sensitive financial and scheduling actions.


🛠️ How We Built It

  • Framework: Next.js 15 (App Router) & React 19
  • Styling: Tailwind CSS & Framer Motion for obsidian/neon tactical HUD animations
  • State & Schema: Zustand & Zod
  • Protocol: WebMCP (document.modelContext) & use-webmcp-tool
  • Icons & UI: Lucide React & Radix UI

🏆 Accomplishments That We're Proud Of

  • Zero-latency bidirectional synchronization between agent tool calls and interactive SVG floor elements.
  • A Stark-inspired dark obsidian aesthetic that makes complex facility data immediately actionable.
  • Fully autonomous test suite built with Playwright validating end-to-end tool execution in headless browser sessions.

🔮 What's Next for Viernes

  • Computer vision occupancy tracking via RTSP camera feeds.
  • Multi-branch federation for nationwide gym chains.
  • Direct biometric telemetry integration with wearable health devices.

Built With

  • framer-motion
  • next.js
  • radix-ui
  • react
  • recharts
  • tailwindcss
  • typescript
  • vercel
  • webmcp
  • zod
  • zustand
Share this project:

Updates

Submission history