Add WarehouseWizardHint to data source pages

src/components/ReaderView/index.tsx

@@ -44,6 +44,7 @@ import { Questions } from 'components/Squeak'
 import { DocsPageSurvey } from 'components/DocsPageSurvey'
 import CopyMarkdownActionsDropdown, { useMarkdownUrlExists } from 'components/MarkdownActionsDropdown'
 import CustomerMetadata from './CustomerMetadata'
+import WarehouseWizardHint from 'components/WarehouseWizardHint'
 import { getVideoClasses } from '../../constants'
 import AboutPostHog from 'components/AboutPostHog'
 
@@ -1375,7 +1376,7 @@ function ReaderViewContent({
 }: ReaderViewProps) {
     const { compact } = useApp()
     const { appWindow, activeInternalMenu } = useWindow()
-    const { hash } = useLocation()
+    const { hash, pathname } = useLocation()
     const contentRef = useRef<HTMLDivElement>(null)
     const articleColumnRef = useRef<HTMLDivElement>(null)
 
@@ -1594,6 +1595,25 @@ function ReaderViewContent({
                                             {title}
                                         </h1>
                                     )}
+                                    {/* Nudge to the setup wizard on the data-warehouse sources docs (root +
+                                        every child page). Templates that hide the ReaderView title and render
+                                        their own heading (e.g. DataWarehouseSource) add the hint themselves, so
+                                        the `!hideTitle` guard keeps this from double-rendering there. */}
+                                    {!hideTitle &&
+                                        (pathname === '/docs/data-warehouse/sources' ||
+                                            pathname?.startsWith('/docs/data-warehouse/sources/')) && (
+                                            <div
+                                                className={`my-4 transition-all ${
+                                                    fullWidthContent || body?.type !== 'mdx'
+                                                        ? 'max-w-full'
+                                                        : contentMaxWidthClass
+                                                        ? contentMaxWidthClass
+                                                        : 'mx-auto max-w-2xl'
+                                                }`}
+                                            >
+                                                <WarehouseWizardHint />
+                                            </div>
+                                        )}
                                     {(body?.date || body?.contributors || body?.tags) && (
                                         <div
                                             className={`flex items-center space-x-2 mb-4 flex-wrap transition-all ${

src/components/WarehouseWizardHint/README.md

@@ -0,0 +1,40 @@
+# WarehouseWizardHint
+
+An agent-flavored nudge that promotes the setup wizard CLI (`npx @posthog/wizard warehouse`) as
+a faster alternative to configuring a data warehouse source by hand. Ported from the equivalent
+component in the PostHog product app so the same prompt appears on the marketing site's
+data-source pages.
+
+It renders a dashed-border card with a sparkles icon, a short pitch, and a copyable command block
+(via the shared [`WizardCommand`](../WizardCommand) component, which appends the correct
+`--region` based on `useCloud()`). The card is dismissible; dismissal is persisted to
+`localStorage` under the key `warehouse-wizard-hint-dismissed`, matching the product app.
+
+## Usage
+
+```tsx
+import WarehouseWizardHint from 'components/WarehouseWizardHint'
+
+<WarehouseWizardHint />
+```
+
+### Props
+
+| Prop        | Type     | Default | Description                                    |
+| ----------- | -------- | ------- | ---------------------------------------------- |
+| `className` | `string` | `''`    | Extra classes applied to the outer card `div`. |
+
+## Where it renders
+
+- `/data-stack/sources` — added directly in `src/pages/data-stack/sources.tsx`.
+- `/docs/data-warehouse/sources` and every page under that URL — for pages whose heading is
+  rendered by `ReaderView` (the docs root and MDX source docs), it is injected once in
+  `src/components/ReaderView/index.tsx`, gated on the pathname. For the pure-React warehouse
+  source template it is added directly in `src/templates/DataWarehouseSource.tsx` (that template
+  hides the `ReaderView` title and renders its own heading, so the shared injection is skipped
+  for it via the `!hideTitle` guard).
+
+## Notes
+
+- SSR-safe: the card starts hidden and only appears after a client-side `useEffect` reads
+  `localStorage`, so build/SSR renders nothing and previously-dismissed users see no flash.

src/components/WarehouseWizardHint/index.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react'
+import { IconSparkles, IconX } from '@posthog/icons'
+import WizardCommand from 'components/WizardCommand'
+
+// Persist dismissal so the hint doesn't nag a user who has already seen it. Mirrors the
+// product app's WarehouseWizardHint, which uses the same localStorage key.
+const DISMISSED_KEY = 'warehouse-wizard-hint-dismissed'
+
+/**
+ * Agent-flavored nudge that pushes the `npx @posthog/wizard warehouse` CLI, which auto-detects
+ * and connects a user's databases/APIs straight from their codebase instead of setting up a
+ * source by hand. Ported from the PostHog product app so the same prompt shows on the marketing
+ * site's data-source pages.
+ */
+export default function WarehouseWizardHint({ className = '' }: { className?: string }): JSX.Element | null {
+    // Start hidden so SSR renders nothing and a user who already dismissed it never sees a flash.
+    // The effect reveals the hint on the client unless it was previously dismissed.
+    const [hidden, setHidden] = useState(true)
+
+    useEffect(() => {
+        setHidden(localStorage.getItem(DISMISSED_KEY) === '1')
+    }, [])
+
+    if (hidden) {
+        return null
+    }
+
+    const handleDismiss = () => {
+        localStorage.setItem(DISMISSED_KEY, '1')
+        setHidden(true)
+    }
+
+    return (
+        <div
+            data-scheme="secondary"
+            className={`not-prose relative rounded-md border border-dashed border-primary bg-accent p-4 flex flex-col gap-3 ${className}`}
+        >
+            <button
+                type="button"
+                onClick={handleDismiss}
+                aria-label="Dismiss"
+                className="absolute top-2 right-2 text-secondary hover:text-primary cursor-pointer"
+            >
+                <IconX className="size-4" />
+            </button>
+            <div className="flex items-center gap-2 pr-6">
+                <IconSparkles className="size-5 shrink-0" />
+                <h4 className="m-0 text-[15px] font-semibold">Let AI connect your sources for you</h4>
+            </div>
+            <p className="m-0 text-sm text-secondary">
+                Skip the manual setup — run this in your project and the wizard auto-detects your databases and APIs and
+                connects them to PostHog.
+            </p>
+            <div>
+                <WizardCommand command="warehouse" slim />
+            </div>
+        </div>
+    )
+}

src/pages/data-stack/sources.tsx

@@ -4,6 +4,7 @@ import { customerDataInfrastructureNav } from '../../hooks/useCustomerDataInfras
 import { TreeMenu } from 'components/TreeMenu'
 import SEO from 'components/seo'
 import Link from 'components/Link'
+import WarehouseWizardHint from 'components/WarehouseWizardHint'
 import DWInstallationPlatforms from './dw-installation-platforms'
 
 const LeftSidebarContent = () => {
@@ -19,6 +20,9 @@ export default function Sources(): JSX.Element {
                 image="images/og/cdp.jpg"
             />
             <ReaderView leftSidebar={<LeftSidebarContent />} title="Data sources & import (ELT)">
+                <div className="max-w-2xl mb-4">
+                    <WarehouseWizardHint />
+                </div>
                 <p>
                     Connect your external databases, SaaS tools, ad platforms, and more to sync data in bulk into your
                     PostHog warehouse for analysis and modeling. All events and user data captured via PostHog SDKs are

src/templates/DataWarehouseSource.tsx

@@ -4,6 +4,7 @@ import SEO from 'components/seo'
 import ReactMarkdown from 'react-markdown'
 import ReaderView from 'components/ReaderView'
 import SourceConfiguration from 'components/Product/Sources/Configuration'
+import WarehouseWizardHint from 'components/WarehouseWizardHint'
 import { getProseClasses } from '../constants'
 
 interface SourceField {
@@ -43,6 +44,7 @@ export default function DataWarehouseSource({
                         <span className="text-xs font-semibold px-2 py-0.5 rounded bg-blue/10 text-blue">Beta</span>
                     )}
                 </div>
+                <WarehouseWizardHint className="my-4" />
                 <div className={getProseClasses('base')}>
                     <p>
                         Connect {name} to PostHog to sync your data into the PostHog data warehouse for analysis and