feat. integrate posthog

package.json

@@ -49,6 +49,7 @@
     "lucide-react": "^0.454.0",
     "next": "15.2.4",
     "next-themes": "^0.4.4",
+    "posthog-js": "^1.249.2",
     "react": "^19",
     "react-day-picker": "8.10.1",
     "react-dom": "^19",

pnpm-lock.yaml

@@ -128,6 +128,9 @@ importers:
       next-themes:
         specifier: ^0.4.4
         version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      posthog-js:
+        specifier: ^1.249.2
+        version: 1.249.2
       react:
         specifier: ^19
         version: 19.1.0
@@ -1400,6 +1403,9 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  core-js@3.42.0:
+    resolution: {integrity: sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -1521,6 +1527,9 @@ packages:
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
+  fflate@0.4.8:
+    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -1776,6 +1785,20 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  posthog-js@1.249.2:
+    resolution: {integrity: sha512-OMXCO/IfcJBjYTuebVynMbp8Kq329yKEQSCAnkqLmi8W2Bt5bi7S5xxMwDM3Pm7818Uh0C40XMG3rAtYozId6Q==}
+    peerDependencies:
+      '@rrweb/types': 2.0.0-alpha.17
+      rrweb-snapshot: 2.0.0-alpha.17
+    peerDependenciesMeta:
+      '@rrweb/types':
+        optional: true
+      rrweb-snapshot:
+        optional: true
+
+  preact@10.26.8:
+    resolution: {integrity: sha512-1nMfdFjucm5hKvq0IClqZwK4FJkGXhRrQstOQ3P4vp8HxKrJEMFcY6RdBRVTdfQS/UlnX6gfbPuTvaqx/bDoeQ==}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -2049,6 +2072,9 @@ packages:
   victory-vendor@36.9.2:
     resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
 
+  web-vitals@4.2.4:
+    resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
+
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -3243,6 +3269,8 @@ snapshots:
 
   commander@4.1.1: {}
 
+  core-js@3.42.0: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -3347,6 +3375,8 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
+  fflate@0.4.8: {}
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -3565,6 +3595,15 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  posthog-js@1.249.2:
+    dependencies:
+      core-js: 3.42.0
+      fflate: 0.4.8
+      preact: 10.26.8
+      web-vitals: 4.2.4
+
+  preact@10.26.8: {}
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -3878,6 +3917,8 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
+  web-vitals@4.2.4: {}
+
   which@2.0.2:
     dependencies:
       isexe: 2.0.0

src/app/layout.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "@/components/theme-provider"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { Toaster } from "sonner"
 import { ModelProvider } from "@/lib/contexts/model-context"
+import { PostHogProvider } from './providers'
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -22,12 +23,14 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className} suppressHydrationWarning>
-        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
-          <ModelProvider>
-            <TooltipProvider>{children}</TooltipProvider>
-            <Toaster richColors />
-          </ModelProvider>
-        </ThemeProvider>
+        <PostHogProvider>
+          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
+            <ModelProvider>
+              <TooltipProvider>{children}</TooltipProvider>
+              <Toaster richColors />
+            </ModelProvider>
+          </ThemeProvider>
+        </PostHogProvider>
       </body>
     </html>
   )

src/app/providers.tsx

@@ -0,0 +1,21 @@
+// app/providers.tsx
+'use client'
+
+import posthog from 'posthog-js'
+import { PostHogProvider as PHProvider } from 'posthog-js/react'
+import { useEffect } from 'react'
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+    useEffect(() => {
+      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || '', {
+        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+        defaults: '2025-05-24',
+      })
+  }, [])
+
+  return (
+    <PHProvider client={posthog}>
+      {children}
+    </PHProvider>
+  )
+}

src/components/preview.tsx

@@ -7,6 +7,7 @@ import { MinimizeIcon, MaximizeIcon, DownloadIcon, RefreshIcon } from "./ui/icon
 import { useModel } from "@/lib/contexts/model-context"
 import { Loader2 } from "lucide-react"
 import { cn } from "@/lib/utils"
+import posthog from 'posthog-js'
 
 interface PreviewProps {
   initialHtml?: string;
@@ -132,6 +133,8 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
       // Only include html in the request if it's not DEFAULT_HTML
       const isDefaultHtml = initialHtml === DEFAULT_HTML;
 
+      posthog.capture("Generate code", {"model": selectedModelId});
+
       const response = await fetch('/api/generate-code', {
         method: 'POST',
         headers: {
@@ -147,6 +150,7 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
       });
 
       if (!response.ok) {
+        posthog.capture("Generate code", {"type": "failed", "model": selectedModelId, "status": response.status});
         // Check specifically for 401 error (authentication required)
         if (response.status === 401 || response.status === 403) {
           try {
@@ -244,6 +248,7 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
       }
     } catch (err) {
       const errorMessage = (err as Error).message || 'An error occurred while generating code';
+      posthog.capture("Generate code", {"type": "failed", "model": selectedModelId, "error": errorMessage});
       setError(errorMessage);
       if (onErrorChange) {
         onErrorChange(errorMessage);

src/components/prompt-input.tsx

@@ -11,6 +11,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { FullscreenToggle } from "./ui/fullscreen-toggle"
 import { AuthErrorPopup } from "./auth-error-popup"
 import { getInferenceToken } from "@/lib/auth"
+import posthog from 'posthog-js'
 
 interface PromptInputProps {
   onSubmit: (prompt: string, colors: string[]) => Promise<void>;
@@ -74,6 +75,8 @@ export function PromptInput({
     const isAuthenticated = await checkAuth();
     if (!isAuthenticated) return;
 
+    posthog.capture("Improve prompt", {});
+
     // Clear previous errors
     setImproveError(null);
     setShowAuthError(false);
@@ -89,6 +92,8 @@ export function PromptInput({
       })
 
       if (!response.ok) {
+        posthog.capture("Improve prompt", {"type": "failed", "status": response.status});
+
         // Handle auth error with openLogin flag
         if (response.status === 401) {
           const errorData = await response.json();
@@ -135,6 +140,7 @@ export function PromptInput({
         }
       }
     } catch (error) {
+      posthog.capture("Improve prompt", {"type": "failed", "error": error});
       console.error("Error improving prompt:", error)
       setImproveError(error instanceof Error ? error.message : "Failed to improve prompt")
     } finally {