PostHog

Prerequisites

• Node.jsfree

  Required to run the Next.js development server and build toolchain.

• GitHubfree

  Version control and repository hosting for your codebase.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex full-stack apps and debugging ingestion pipelines.

• Cursor

  Superior AI code editor for refining dashboards, charts, and Tailwind UI components.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Supabase client bindings, and create relational tables for projects, events, person profiles, and feature flags.

   Scrape together a new Next.js project using TypeScript and Tailwind CSS. Connect Supabase as the primary database provider and configure an environment variables template (.env.local) with SUPABASE_URL and SUPABASE_ANON_KEY. Write a migration script or SQL schema to create four tables: `projects` (id, name, created_at), `persons` (id, project_id, distinct_id, properties JSONB, created_at), `events` (id, project_id, distinct_id, event_name, properties JSONB, timestamp), and `feature_flags` (id, project_id, key, rollout_percentage, enabled BOOLEAN). Ensure proper indexes are set up on project_id and event_name in the events table to optimize for filtering queries. Provide clear instructions on running the migration.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Lightweight Client Telemetry SDK

   Build a client-side JavaScript tracking snippet and wrapper library that captures pageviews, custom events, and user identification payloads, dispatching them to the backend ingestion route.

   Build a lightweight TypeScript client-side tracking script (packaged as a React hook and a vanilla JS snippet) that initializes with a project token. It must automatically track pageviews on route changes, capture click events on elements with data-attr attributes, and support manual event capture via `posthog.capture(event_name, properties)` and user identification via `posthog.identify(distinct_id, user_properties)`. The SDK should batch events locally in memory and flush them via `navigator.sendBeacon` or a batched POST request to `/api/v1/capture` every 5 seconds or when the buffer reaches 20 events. Handle network failures gracefully with exponential backoff.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03High-Throughput Ingestion Endpoint

   Implement a high-performance API route to receive, validate, and store incoming telemetry batches into the PostgreSQL database.

   Create a Next.js API route at `/api/v1/capture` that accepts incoming telemetry batches from the tracking SDK. The endpoint must validate project tokens against the `projects` table, parse the incoming JSON array of events and person profiles, and perform bulk insertions into the `events` and `persons` tables using Supabase. Implement robust error handling for malformed payloads, rate limiting per project token, and ensure timestamps are normalized to UTC. Return a lightweight 200 OK JSON response upon successful ingestion.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Product Analytics & Trends Dashboard

   Create the core analytics dashboard UI with interactive charts showing daily active users, event trends, and custom filter breakdowns.

   Build a comprehensive Product Analytics dashboard page in Next.js using Recharts and Tailwind CSS. The page should allow users to select a date range, choose an event name from a dropdown of ingested events, and group data by day or week to render a trends line chart. Implement a query builder component that translates user filters (such as event property matching or custom date ranges) into optimized SQL queries executed against the Supabase events table. Include loading states, empty states for new projects, and a responsive sidebar navigation layout matching modern SaaS aesthetics.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Funnels & Retention Analysis Subsystem

   Develop multi-step funnel visualization and user retention cohort curves to analyze conversion drop-offs.

   Implement a Funnels and Retention analysis module within the dashboard. Create a Funnel builder screen where users can sequence multiple events (e.g., pageview -> signup -> project_created) and calculate conversion rates and drop-off percentages between steps. Write the underlying database query logic to track user progression through the ordered steps within a specified time window. Additionally, build a Retention cohort matrix view that calculates day-1, day-7, and day-30 retention curves based on user startup events and subsequent activity.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Feature Flags Evaluation Engine

   Build a real-time feature flag management interface and evaluation API endpoint for client applications.

   Develop a Feature Flags management section where users can create, toggle, and configure rollout percentages for feature keys. Implement a public evaluation API route at `/api/v1/decide` that accepts a project token and distinct ID, deterministically evaluates flag status using a consistent hashing algorithm over the distinct ID against the rollout percentage, and returns active feature flags for the client. Build a React hook `useFeatureFlag(key)` in the frontend SDK that fetches and caches flag states on application load.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Model Context Protocol (MCP) Server

   Create a local Model Context Protocol (MCP) server enabling AI coding assistants to query product analytics and error metrics directly from code editors.

   Build a Node.js-based Model Context Protocol (MCP) server script using the official `@modelcontextprotocol/sdk` package. The server should expose tools allowing AI agents (like Claude Code or Cursor) to query analytics data from your Supabase database: `query_trends` (returns event volume over time), `get_funnel_dropoffs` (returns conversion rates for a step sequence), and `list_recent_errors`. Configure the server with standard stdio transport so developers can easily register it in their local AI editor configuration files (e.g., `claude_desktop_config.json`).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for PostHog