Scout Skills
← All skills

Builds a local, customer-branded ecommerce AI concept demo (Next.js 14 + TypeScript + Tailwind) showing AI-assisted product discovery: natural-language filters, smart bundles, transparent recommendations, a guided selling wizard, and an optional Azure OpenAI-backed response path. Creates a per-customer workspace and keeps all outputs local unless the user explicitly asks to share or deploy. Use when the user says "build me an AI-infused customer website", "create a customer AI demo site"…

teamsemaildemosbrandingcustomerazuredemo

Customer AI Demo Website

Contributor attribution pending confirmation. Internal Microsoft use only.

Customer AI Demo Website builds a local, customer-branded ecommerce concept demo that shows AI-assisted product discovery: natural-language filters, smart bundles, transparent recommendations, a guided selling wizard, and an optional Azure OpenAI-backed response path. The skill creates a per-customer Next.js workspace and keeps all outputs local unless the user explicitly asks to share or deploy them.

Trigger

Use this skill when the user says something like:

  • "Build me an AI-infused customer website"
  • "Create a customer AI demo site"
  • "Make an ecommerce AI concept demo for [Customer]"
  • "Show what [Customer]'s website could look like with AI"

Inputs

Required:

  1. Customer name - the company or brand to model the concept demo around.

Optional, only ask if needed:

  1. Workspace root - default to a local customer-demos folder under the current working directory.
  2. Reference app path - optional local reference implementation to reuse structurally. Never require a private or user-specific path.
  3. Port preference - default to the next available local port starting at 3004.
  4. Real LLM mode - default false. Only enable Azure OpenAI when the user explicitly provides or confirms their own configured environment.

Do not ask for design preferences, product categories, target buyer, or other details unless the user volunteers them. Infer a reasonable concept from public, non-confidential knowledge and clearly label it as a concept.

Safety and content rules

  • Create concept demos only. Include this footer on every generated site: Concept demo - not affiliated with [Customer].
  • Do not claim real customer endorsement, partnership, testimonials, metrics, or production readiness.
  • Do not scrape customer sites or copy real product catalogs. Hand-craft a plausible synthetic catalog based on public, high-level understanding of the business.
  • Do not use customer-private, Microsoft-confidential, CRM, email, Teams, or file content unless the user explicitly provides it for this demo and approves its use.
  • Do not commit secrets, API keys, tenant IDs, subscriptions, or endpoints.
  • Keep generated artifacts local by default. Do not publish, deploy, email, or send links unless the user explicitly requests it and approves the exact target.
  • If using Azure OpenAI, read credentials from the user's existing environment variables or configuration. Never print secrets.
  • Every AI recommendation must include a short "why this matched" explanation and a transparency note showing which intents or filters fired.

Workspace layout

Create or reuse this local structure:

customer-demos/
  README.md
  <customer-slug>/
    <customer-slug>-ai-app/
    architecture/
    screenshots/
    README.md

Slug rules:

  • Lowercase the customer name.
  • Replace non-alphanumeric runs with hyphens.
  • Trim leading and trailing hyphens.

Do not write to Scratchpad or the repository root unless the user explicitly chooses that location.

What to build

Create a Next.js 14 + TypeScript + Tailwind app in:

customer-demos/<customer-slug>/<customer-slug>-ai-app/

Required routes:

  • / - hero with customer-specific AI prompt, featured categories, and top picks.
  • /categories - category index.
  • /c/[slug] - category listing with filter sidebar.
  • /search - natural-language "ask AI to apply filters" box and faceted search.
  • /p/[id] - product detail with bundle suggestions, customization options, and quantity tiers.
  • /cart - cart with AI upsell card and "review my cart" action.
  • /checkout - polished checkout flow ending in confirmation.
  • /demo - guided selling wizard, the centerpiece of the demo.
  • /api/ai - deterministic AI simulator plus optional Azure OpenAI fallback when REAL_LLM=true.
  • /api/telemetry - local event collector that logs to console by default.

Required app pieces:

  • Site-wide AI assistant drawer.
  • Synthetic catalog of 40-50 plausible SKUs across 6-8 customer-relevant categories.
  • AI simulator with intent classification, filter extraction, 4-7 persona bundle templates, and FAQs in customer-appropriate voice.
  • Optional grounded LLM path with brand voice, catalog context, simulator-owned product selection, timeout, and fallback.
  • Brand-tuned Tailwind palette and favicon or app/icon.svg.
  • Accessibility basics: labelled inputs, dialog semantics, skip link, reduced-motion media query, and focus-visible outlines.
  • README.md, PROJECT-OVERVIEW.md, and DEMO-SCRIPT.md in customer-appropriate voice.
  • Workspace-level README.md with pitch, contents map, run commands, demo prompt, bundle templates, talking points, allocated port, and concept-disclaimer reminder.

Build sequence

  1. Confirm scope in one sentence. Example: Building an AI ecommerce concept demo for [Customer] at customer-demos/<slug>.
  2. Create the workspace. Include architecture and screenshots folders.
  3. Choose a build path. - If the user provided a reference app, copy only structural patterns. Do not copy customer-specific copy, products, or imagery. - If no reference app exists, scaffold a new Next.js 14 + TypeScript + Tailwind app and create the required routes/components directly.
  4. Generate synthetic customer-relevant data. Hand-craft categories, products, FAQs, and bundles. Do not scrape.
  5. Implement deterministic AI behavior. The simulator must work without external services.
  6. Add optional Azure OpenAI fallback. Keep it disabled unless REAL_LLM=true and required environment variables are present.
  7. Install and build. - Run npm install. - Run npm run build. - If OneDrive causes a .next readlink issue, delete .next and rebuild.
  8. Smoke test locally. - Start npx next start -p <port> as an attached async process. - Verify /, /demo, /search, /cart, /categories, /checkout, one category route, and /api/ai. - The AI simulator must return at least one bundle response with at least three items and customer-relevant rationale.
  9. Capture a demo screenshot. - Open /demo. - Run a guided-selling prompt. - Wait for the actual bundle heading or recommendation text to render. - Expand transparency details. - Save a full-page screenshot to customer-demos/<slug>/screenshots/<slug>-demo.png.
  10. Update the workspace registry. Add the customer, folder, port, and status to customer-demos/README.md.
  11. Hand off. Provide the local URL, workspace path, slug, run commands, screenshot path, and instructions for enabling the real LLM path.

Quality bar

Before showing the result:

  • Production build succeeds.
  • Required routes return 200.
  • AI simulator returns a bundle for a kit, pack, bundle, or job-style prompt.
  • The response includes a rationale and transparency note.
  • The generated site has a brand palette distinct from any local reference app.
  • The concept footer is present.
  • No secrets or private customer data are present.

Troubleshooting

  • Port collision: choose the next available port and update the registry.
  • OneDrive .next build issue: delete .next and rebuild.
  • Playwright stale refs: use role selectors in playwright-browser_run_code instead of stale snapshot refs.
  • Screenshot caught mid-load: wait for the actual bundle or recommendation content, not just a loading label.
  • Cart leftovers between demos: clear local storage before rerunning a customer demo.