SkyRoofers — Hill Country Roofing, Booked in One Prompt

Hill Country roofing since 2010. Small crew, lifetime labor warranty that stays with the house. Now agentic via WebMCP.

Live demo: https://webmcp-test-one.vercel.app (Vercel, main @ 20866ef — canonical; Netlify goroofer deleted)
Video (<3 min, public YouTube): add your YouTube link here — audio covers WebMCP, shows agent chaining tools in first 15s
Tech: Single-file index.html + api/analyze.js (Vercel, gpt-4o-mini vision with deterministic fallback), no auth required.

---

Why WebMCP is a strong fit

Texas hail damage is high-friction: homeowner takes a photo, needs material, price, and a crew date — today that's 6 form screens (sq ft, material, urgency, zip, photo, calendar) + phone call + 24h wait. WebMCP turns the same static site into an actionable service in one prompt:

check_storm_eligibility → analyze_roof_photo → quick_estimate → request_estimate → book_appointment — chained, with real state, no clicks.

Before: Services → Estimate Form → Calendar → Contact → wait.
Now: I'm in 78201, 2000 sq ft, analyze this photo and book Sept 2 9am — John Smith 555-1234 → agent does it all.

Advantage for the website (business + UX)

• From brochure to booking engine. The site is no longer read-only. Any visitor — human or AI — can get a price, create a SKY-xxxx lead, and lock a real calendar slot without the business building a separate app or API.
• What used to take 30 minutes and a phone call now takes a single LLM prompt. The homeowner just describes the job in plain English and drops a photo: your AI chat window shows a photo, figures the cost, and holds your spot on our schedule.
• Higher conversion, fewer drop-offs. 6 screens → 1 prompt. The agent reuses photo-derived material to auto-fill quick_estimate (same baseRate × pitch 1.15 × waste 1.1 math as src/app.js:calc()), so users never re-type. book_appointment reads localStorage:skyroofers_appointments_v2 and blocks double-book (❌ 9AM taken. Available: 11AM, 2PM) — proof of real writes for demo/video.
• 24/7 capture, zero extra ops. Photo triage runs in ~2 min, not 2 days via analyze_roof_photo → POST /api/analyze → gpt-4o-mini vision → {condition, material, issues, urgency, confidence, estimated_age, summary}. Falls back deterministically (source:fallback, 82%) if offline / no key, so it never breaks. No auth, no separate backend — index.html + api/analyze.js on Vercel.
• One source of truth. Humans and agents share the same pricing and calendar (DEFAULT_SLOTS vs loadApts()). No duplicate logic, no human flow vs AI flow drift.

Advantage for AI searches (discovery → action)

Classic SEO gets you indexed. WebMCP gets you invoked.

• From answered to acted upon. Without WebMCP, an AI search (ChatGPT, Perplexity, etc.) can only summarize your site. With WebMCP, it can do the job: check check_storm_eligibility (5-zip hail DB, e.g. Boerne 1.75" 08/28), triage the photo, price it, and book — all without leaving the chat. That is the AI-search equivalent of “Buy” vs “Read more.”
• Structured, not hallucinated. Tools return typed JSON (inputSchema, readOnly, annotations) instead of scraped text. The AI doesn’t guess your price or availability — it calls quick_estimate and book_appointment and cites the live tool output. Less hallucination, more trust.
• Findable by intent, not just keywords. A user searching hail damage roof Boerne book inspection can be fulfilled in-chat because the site exposes check_storm_eligibility + book_appointment as machine-readable actions. You rank for tasks, not just pages — future-proofing as search moves from 10 blue links to 1 AI answer with actions.
• Every search becomes a lead. AI searches happen off-site. WebMCP brings the transaction back to you: the AI creates a SKY-xxxx lead and a locked slot even though the user never opened your domain directly. You get attribution that plain SEO cannot provide.

How WebMCP is implemented

// wbmcpv2.html / src/app.js — registerTool pattern
const hasWebMCP = typeof document.modelContext !== 'undefined'
  && typeof document.modelContext.registerTool === 'function';

function registerTool(def){
  if(!hasWebMCP){ toolRegistry[def.name]=def; return false }
  document.modelContext.registerTool(def); // WebMCP
  toolRegistry[def.name]=def; // fallback for ?debug=1 tester
}

Tool	inputSchema	readOnly	What execute does
get_services	{}	✓	Lists 6 services with meta + pricing tags from servicesData
quick_estimate	squareFeet:number, roofType:enum	✓	pitch 1.15 × waste 1.1 math, returns $low–$high
request_estimate	squareFeet, roofType, urgency, zip, description		Creates SKY-xxxx in localStorage:sky_leads, returns lead + ballpark
book_appointment	preferredDate, preferredTime, customerName, customerPhone, serviceType		Checks DEFAULT_SLOTS vs loadApts(), persists, blocks double-book
send_contact	name, email, message, inquiryType		Stores in sky_inbox
analyze_roof_photo	imageBase64, mimeType	✓	fetch('/api/analyze') → vision, fallback deterministic (source:fallback without key)
check_storm_eligibility	zip	✓	5-zip hail DB (Boerne 1.75", SA 1.25"), updates #stormSnippet

All tools have parseArgs wrapper (handles args/input/arguments), annotations, and error returns ❌ ... Available: ....

---

Run locally / deploy

Local (fallback, no key needed):

python -m http.server 8199 --directory .
# open http://localhost:8199/wbmcpv2.html?debug=1  # dev console visible
# open http://localhost:8199/wbmcpv2.html          # clean product

Vercel (production — webmcp-test-one.vercel.app):

1. Connected to GitHub wslagbas-4497s-projects/webmcp-test — push to main auto-deploys (04b5977 Ready).
2. Live URL https://webmcp-test-one.vercel.app for submission.
3. Optional for Leverage — set env var in Vercel Dashboard → Environment Variables:
   • OPENAI_API_KEY=sk-proj-... → redeploy → analyze_roof_photo returns source:openai. Without it (current), returns source:fallback (deterministic, never breaks — as verified live).

Test prompts (paste, don't type live):

• I'm in 78201, 2000 sq ft. Analyze this roof photo, give quick estimate for asphalt and book Sept 2 at 9am — John Smith 555-1234 (attach any jpg → data URL)
• check_storm_eligibility 78606 → Hail 1.75" Boerne 08/28 — claim window open
• quick_estimate 1500 metal → $15k–$19k

Testing notes:

• Enable chrome://flags/#enable-webmcp-testing for native WebMCP, or add ?debug=1 to use fallback toolRegistry + buttons at bottom (same execute code).
• No login required, works incognito.

---

Project structure

.
├── index.html                  # Single-file deploy — what Vercel serves (verified 200 at /)
├── src/
│   ├── styles.css              # Extracted from index.html <style>
│   ├── app.js                  # App + estimator + persistence + WebMCP tools
│   └── tools.js                # WebMCP tool definitions slice — for Leverage review
├── api/
│   └── analyze.js              # Vercel Function POST /api/analyze — gpt-4o-mini + fallback
├── README.md                   # This file
└── LICENSE                     # MIT

License

MIT — see LICENSE.

Built for WebMCP • Vercel • Hill Country — September 2026 (live at webmcp-test-one.vercel.app)