New user onboarding or tutorial exists

First-time users who land in a blank chat interface with no guidance do not know what your product is better at than ChatGPT, where the power features live, or what phrasing produces the best results. They bounce in under sixty seconds. Onboarding — even a single modal with three slides and four starter prompts — measurably shifts day-one activation and week-one retention on AI products, because the cold-start problem is the dominant source of churn for this category.

Gate a 3-step welcome modal on a localStorage.getItem('onboarding_v1') flag. Step 1 explains the product's differentiator in one sentence; step 2 shows four starter prompts the user can click to begin; step 3 points at regenerate, copy, and history. Set the flag on completion or skip. Implement in src/components/onboarding/welcome-modal.tsx.

{!localStorage.getItem('onboarding_v1') && <OnboardingModal onComplete={() => localStorage.setItem('onboarding_v1', '1')} />}

• ID: ai-ux-patterns.advanced-patterns.onboarding-tutorial

• Severity: medium

• What to look for: Count all onboarding-related components and flags: welcome modals, tour steps, "getting started" checklists, empty-state guidance, first_login or onboarding_completed flags. For each, enumerate the onboarding content shown to new users. Check for react-joyride, intro.js, shepherd.js or custom tour logic. Also check for in-app help documentation or a app/help/ route. At least 1 onboarding element must be gated by a first-use flag.

• Pass criteria: New users are guided through at least 1 of: a welcome screen explaining the product's purpose, sample prompts demonstrating capabilities, a brief tour of key UI elements, or an interactive first-use tutorial. Report on pass: "X onboarding steps found, gated by Y flag."

• Fail criteria: No onboarding, welcome screen, or first-use guidance detected. New users land directly in the application interface with no context or guidance.

• Skip (N/A) when: The application is an internal tool or API-first product where new users are always developers or technical users who do not need UI onboarding.

• Detail on fail: "No onboarding flow, welcome screen, or first_login flag detected — new users receive no guidance on product capabilities or how to begin".

• Remediation: First-time users who don't understand what an AI tool can do will churn before they discover its value.

  A minimal onboarding approach:

  // Check if user has seen onboarding
  const hasSeenOnboarding = localStorage.getItem('onboarding_v1')
  
  {!hasSeenOnboarding && <OnboardingModal onComplete={() => {
    localStorage.setItem('onboarding_v1', 'true')
  }} />}
  

  // OnboardingModal component
  const STEPS = [
    { title: "Ask anything", description: "Type a question, upload an image, or start with a suggestion below." },
    { title: "Regenerate responses", description: "Click the regenerate button to get a different answer." },
    { title: "Save your work", description: "Conversations are saved automatically. Find them in the sidebar." },
  ]