Add PostHog analytics integration

[posthog]

Summary

This PR adds PostHog product analytics to Which AI Made This? using the posthog-js SDK (installed via npm). PostHog is initialized via instrumentation-client.ts — the recommended approach for Next.js 15.3+ — and a reverse proxy is configured in next.config.ts to route capture requests through /ingest, which avoids ad-blocker interference. Twelve custom events are captured across four client components covering the game, compare, gallery, and theme features.

Files changed by the setup wizard:

• instrumentation-client.ts — new PostHog client initialization
• next.config.ts — adds /ingest reverse-proxy rewrites to us.i.posthog.com / us-assets.i.posthog.com
• src/components/game/model-lab-wordle.tsx — game events: game_started, guess_submitted, game_completed, game_replayed, score_shared, score_image_shared
• src/components/compare/compare-page.tsx — compare events: compare_selection_changed, compare_sides_swapped, compare_link_copied, compare_iteration_changed
• src/components/gallery/gallery-iteration-view.tsx + src/components/gallery/gallery-iteration-view-tracker.tsx — iteration_viewed via a client-component wrapper
• src/components/gallery/gallery-theme-toggle.tsx — theme_toggled
• package.json / package-lock.json — adds posthog-js@^1.404.1
• .gitignore — ignores .env.local

Insights and dashboards created

Type	Name	Link
Dashboard	Analytics basics (wizard)	https://us.posthog.com/project/519737/dashboard/1872783
Insight	Game engagement over time	https://us.posthog.com/project/519737/insights/4pn0cVCq
Insight	Game completion funnel	https://us.posthog.com/project/519737/insights/235NtkMZ
Insight	Compare feature usage	https://us.posthog.com/project/519737/insights/adpxbX02
Insight	Iteration views by model	https://us.posthog.com/project/519737/insights/WMI0849q
Insight	Game completions vs replays	https://us.posthog.com/project/519737/insights/zhGwjFtQ

How to verify

1. Deploy this branch (or run it locally after setting the environment variables from the section below with npm run dev).
2. Open the site and click around — start a Lab Guess game, open a compare view, toggle the theme.
3. In PostHog, open Activity — you should see events like $pageview, game_started, and theme_toggled arriving within a minute.
4. Check the Analytics basics (wizard) dashboard to confirm the events are populating the insights.

Environment variables (action needed before PostHog works)

This app is a Next.js site deployed (based on its setup) on a hosting provider that keeps its settings in its dashboard rather than in a file committed to this repository, so I could not set these up automatically. No environment file is read in production, so they must be configured in the hosting dashboard.

Environment variables are named settings your hosting provider passes to the app when it runs — they let the app know things (like the PostHog token below) without hardcoding them into the code. PostHog will not receive any data until these two are set:

Name	Value
NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN	phc_r7HtYgdoT5Lb9FSdsLXXXjiLFkChDYpcTQPRYBxHmHdo
NEXT_PUBLIC_POSTHOG_HOST	https://us.i.posthog.com

Note: the NEXT_PUBLIC_ prefix is required — it tells Next.js to expose these values to the browser, where the PostHog client runs. Without the prefix, the analytics library can't see them and no events will be sent.

Setting them via the hosting dashboard

If the site is on Vercel (the default for Next.js):

1. Open https://vercel.com/dashboard and click on this project.
2. Go to Settings, then Environment Variables in the left sidebar.
3. For each row in the table above: paste the Name and Value, leave all environments (Production, Preview, Development) checked, and click Save.
4. Redeploy the app (Deployments tab → "..." menu on the latest deployment → Redeploy) — the new settings only take effect on the next deployment.

Setting environment variables via a local CLI

You can run these commands locally instead of using the dashboard. The value is piped in on stdin, and production is the target environment (adjust preview/development as needed). Double-check the exact CLI syntax for your provider.

For Vercel:

echo "phc_r7HtYgdoT5Lb9FSdsLXXXjiLFkChDYpcTQPRYBxHmHdo" | npx vercel env add NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN production
echo "https://us.i.posthog.com" | npx vercel env add NEXT_PUBLIC_POSTHOG_HOST production

After setting them, redeploy so the new values take effect.

---

Created with PostHog Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ui-design-bench	Ready	Preview, Comment	Jul 19, 2026 6:55pm