InspectFlow

Walk the property. Talk through what you see. Get a professional report.

InspectFlow is a single-screen web app for home inspectors that turns a spoken site‑walk into a structured, printable, system‑by‑system inspection report — roof to garage, with condition ratings, findings, recommended actions, cost estimates, and prominent safety flags.

Live demo: https://cosmoswan.github.io/InspectFlow/ Open it on your phone and tap "Try a sample walk" — no setup, no key required.

This is a prototype built to demo the idea, not a production app.

---

The flow

Landing → upload / record / sample → review transcript → AI processing → report → Export PDF

• Upload an mp3 / m4a / wav, record in‑browser (MediaRecorder + live Web Speech transcription, best in Chrome), or click Try a sample walk.
• Review/edit the transcript, hit Generate report.
• The AI organizes everything across 10 building systems (Roof, Exterior, Foundation, Plumbing, Electrical, HVAC, Interior, Insulation, Fireplace, Garage), rates each Good / Fair / Poor / Safety Concern, writes an executive summary, flags safety issues, and rolls up estimated repair costs.
• Export PDF uses the browser's print dialog (print stylesheet included).

Run it locally

It's a single static file with no build step. Either:

• Just open index.html in a browser, or
• serve the folder: npx serve . (or any static server) and visit the printed URL.

React, ReactDOM, and Babel are loaded from a CDN and JSX is transpiled in the browser.

AI generation

The report is generated by Claude. There are two paths:

1. Sample walk — zero setup. With no API key connected, the bundled sample site‑walk produces a complete, baked report instantly (works offline once the page has loaded). This is the reliable path for a live demo.
2. Live analysis — bring your own key. Click "Connect Claude API key" (top‑right) and paste an Anthropic API key. It's stored only in your browser's localStorage and used to call Claude (claude-sonnet-4-6) directly for any transcript, including your own recordings.

⚠️ Key exposure caveat. Path 2 calls the Anthropic API directly from the browser (anthropic-dangerous-direct-browser-access), so the key is visible in network requests. That's fine for a personal/internal demo with a key you can revoke — do not ship it to real users this way.

Going to production

Move the AI call server‑side: a small backend (or serverless function) holds the API key as a secret, runs the same prompts (see the metaPrompt / groupPrompt builders in index.html), and the frontend calls that instead of Anthropic directly. Real transcription of uploaded audio also needs a server‑side speech‑to‑text service; the in‑app upload path is wired to a transcript‑review step to stand in for it. The model is set in one place (AI_MODEL).

Provenance

Designed in Claude Design and exported as a handoff bundle, then implemented here as a self‑contained static prototype. The only change to the AI plumbing is the window.claude shim (real API when a key is set, baked sample otherwise) so it runs outside the design tool.