Running it locally in Chrome
The app is 100% client-side — three files, no build step, no install, no internet connection needed after download.
file:// URL in Chrome — everything works, including saved progress.- Find the folderAll three app files live in ai-for-business/ next to this page.
- Open index.html in ChromeDouble-click it, or drag it onto a Chrome window. No server required.
- Optional: run it like a websiteIf you prefer a local server, run
python3 -m http.server 8641 --directory ai-for-businessin Terminal, then visithttp://localhost:8641. Identical behavior.
The 9 sections of the app
Everything a "bog-standard" business owner needs, organized as a single-page app — the top navigation switches sections instantly, with no page reloads.
Start Here
The honest 30-second pitch: what AI is great at, mediocre at, and can't replace — plus jump-off cards into every section.
Orientation"Where do I start?" quiz
6 questions about tech comfort, workload, and time. Scores the owner into one of 4 profiles, each with a specific first project, path, and budget.
InteractiveAI Basics
Plain-English explainers with analogies, 6 myth-vs-reality panels, a searchable 25-term glossary, and 10 honest FAQs (cost, privacy, copyright, regulated industries).
InformationUse Cases
Toggle between 8 industries (restaurant, trades, retail, salon, clinics…) and 6 business functions — each with 5 concrete examples and a realistic impact line.
ExamplesWalkthroughs
8 recipe-style guides with numbered steps, time/cost/difficulty tags and pro tips — from "your very first AI session" to "your first automation".
Step-by-stepPrompt Library
25 fill-in-the-blank prompt templates across 7 filterable categories, each with a one-click copy button ready to paste into any AI assistant.
InteractivePrompt Booster
Type a rough idea ("email customers about a price increase"), pick tone and length, and get back a professional prompt. Free instant mode uses built-in templates; the premium AI mode uses Grok on xAI (via Cloudflare proxy in production) to custom-write the prompt.
Premium add-onTools, Costs & ROI
Neutral tool tables (start with one assistant → check tools you already own → specialists), typical prices, and a live ROI calculator with sliders.
InteractiveStaying Safe + 30-Day Plan
8 risk cards each with a concrete fix, a copy-ready one-page team AI policy, and a week-by-week checklist whose progress is saved on your device.
Guardrails + actionThe files
Deliberately simple architecture: one page, one stylesheet, one script. Anyone can host it anywhere (or email the folder to someone).
<section> per page. Most sections start empty — JavaScript fills them in. ~200 lines.How the interactive pieces work
Everything is vanilla JavaScript — no frameworks, no libraries, no network calls.
Navigation (single-page app)
Every button with a data-nav attribute switches sections by toggling an .active class — one section visible at a time, instant switching, one shared click-listener for the whole document.
Quiz scoring
Each answer carries weights for four profiles, e.g. { starter: 2, builder: 1 }. Answers accumulate scores across 6 questions; the highest-scoring profile wins and its result card renders — "do this first", a 4-step path, and a tools budget.
ROI calculator
Five sliders (hours on writing, customer messages, admin; your hourly value; monthly AI budget) recompute on every input event. Formula: total hours × 35% saved × rate × 50 weeks − 12 × budget. The 35% is a deliberately conservative assumption, and the result panel says so.
Prompt copy buttons
Uses the browser clipboard API, with an automatic fallback for older setups. The button flips to "✅ Copied!" and a toast confirms — the prompt is ready to paste into ChatGPT, Claude, or Gemini.
30-day plan progress
Each ticked checkbox is saved to the browser's localStorage under the key aiadv-plan-v1, so progress survives closing the tab or restarting the computer. The progress bar recalculates from saved state; "Reset plan" clears it.
Prompt Booster (premium add-on)
The instant tier assembles a structured prompt from templates matched to the task (review reply, email, social, quote…) — free, offline, no AI call. The premium tier sends the idea to grok-4.5 on xAI's OpenAI-compatible API (https://api.x.ai/v1). Production uses a Cloudflare Pages Function with server-side XAI_API_KEY; local demo can use an optional browser key.
Voice input — speak instead of typing
A 🎤 button inside the Booster's idea box uses the browser's built-in Web Speech API (Chrome, Edge, Safari) — no extra service, no extra cost. Tap it, allow the microphone once, and words appear in the box live as you speak; tap again (or just pause) to stop. Any text already typed is kept, dictation is appended. The button only appears in browsers that support speech, so typing always remains the fallback, and mic-blocked / no-mic / offline states each get a plain-English message.
Glossary search & category filters
The search box filters 25 terms live on every keystroke (matching term or definition). The prompt library and use-case views re-render their card grids from the same data arrays whenever a filter chip is clicked.
What was verified
The app was run in a browser and every interactive path exercised before delivery.
| Check | Result |
|---|---|
| Quiz, end to end | ✔ All 6 questions answered; profile result rendered ("The Careful Observer" for the cautious path) |
| Prompt library | ✔ 25 prompts render; category filter narrows correctly (e.g. Sales → 4); copy button works |
| ROI calculator | ✔ Sliders recompute live (test case produced 6.6 hrs/week ≈ $16,325/yr) |
| Glossary search | ✔ "hallucination" → exactly 1 match; empty search restores all 25 terms |
| 30-day plan | ✔ 20 items; ticking 2 → "10% complete" and state persisted in localStorage |
| Use-case toggle | ✔ 8 industry cards ⇄ 6 function cards |
| FAQ / walkthrough accordions | ✔ Open and close on click |
| Mobile (375px) | ✔ No horizontal overflow; nav scrolls horizontally; buttons go full-width |
| Console | ✔ Zero errors or warnings across all sections |
Design choices, briefly
Choices made specifically for a non-technical audience:
Plain English everywhere
Every piece of jargon is either avoided or immediately translated ("a prompt is just what you type"). Analogies over definitions: AI as "a brilliant temp who started this morning".
Honest, not hype
Every section carries the counterweight: what AI is bad at, conservative ROI math, "verify every fact" repeated wherever it matters, and a safety section with teeth.
Action over theory
Walkthroughs are written like recipes with a "what you'll have at the end" promise. The 30-day plan turns the whole guide into a paced checklist.
Vendor-neutral
Tools are grouped by job with typical price ranges, leading with "check the software you already pay for" before recommending anything new.