How to vibe codeMouseflow

Prerequisites

• Node.jsfree

  Required runtime for building and running the full-stack web application.

• GitHubfree

  Source code repository and deployment pipeline integration.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding complex event trackers and dashboard subsystems from terminal commands.

• Cursor

  Ideal AI code editor for inspecting complex DOM mutation playback logic and fine-tuning player canvas components.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, shadcn/ui, and set up ClickHouse database tables for raw event logs, session metadata, and aggregated heatmaps.

   Initialize a new Next.js 16 project using TypeScript, App Router, and Tailwind CSS v4. Install shadcn/ui primitives. Create a database connection utility for ClickHouse to store high-throughput web analytics events. Define database schemas for 'projects', 'sessions', 'events' (storing timestamp, session_id, event_type, x, y, target_element, dom_snapshot), and 'heatmaps'. Ensure data models support efficient range queries for session replay reconstruction and coordinate aggregation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Client-Side Tracking Script

   Build a lightweight vanilla JavaScript tracking script that records DOM mutations, mouse movements, clicks, scrolls, and captures basic PII masking rules.

   Develop a lightweight browser tracking script in vanilla TypeScript that can be embedded on target websites via a script tag. The script must capture clicks, mouse movements (throttled), scroll depth, window resize events, and JavaScript errors. Implement a MutationObserver to capture initial DOM snapshots and incremental tree mutations. Add client-side privacy masking that automatically blanks inputs with type='password', 'email', or sensitive CSS classes. Batch events locally and flush them via navigator.sendBeacon or fetch POST requests to the backend ingestion endpoint.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Ingestion Pipeline & Storage

   Implement a high-performance backend ingestion API route to receive, validate, and batch-insert raw event logs into ClickHouse.

   Create a secure Next.js API route at `/api/v1/collect` that accepts batch payloads from the tracking script. Validate project tokens against the database, sanitize incoming event fields, and execute batch inserts into ClickHouse. Implement rate limiting and CORS headers to allow cross-origin script reporting safely. Handle compression for large DOM snapshot payloads.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Session Replay Player

   Build an interactive session replay viewer UI using custom canvas/DOM reconstruction logic to play back recorded user sessions chronologically.

   Build a dashboard page in Next.js for viewing session recordings (`/dashboard/replays/[sessionId]`). Create a timeline player component with play, pause, seek, and speed control (1x, 2x, 4x). Fetch the base DOM snapshot and incremental mutation events from the backend, and write a client-side player engine that reconstructs the DOM state inside a sandboxed iframe or shadow DOM container, overlaying a custom cursor indicating mouse movements and clicks in real-time.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Website Heatmaps & Friction Detection

   Aggregate click and scroll coordinates to render visual heatmaps over target page previews and identify rage clicks or JavaScript errors.

   Implement a heatmap generation view (`/dashboard/heatmaps`) that queries ClickHouse for click coordinates (`x`, `y`, `viewport_width`, `viewport_height`) associated with a given page URL and date range. Render these coordinates as a visual overlay using canvas or SVG heatmap layers on top of a screenshot or live preview of the page. Add a friction detection background job that scans event streams for 'rage clicks' (3+ rapid clicks in a small radius) and unhandled JavaScript error events, displaying them in a friction insight dashboard widget.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Conversion Funnels & LLM / MCP Integration

   Build step-by-step funnel drop-off analytics and an MCP server endpoint allowing LLMs to query session and heatmap data.

   Implement a conversion funnel builder dashboard where users define ordered page sequence steps and view drop-off percentages and conversion rates. Additionally, build an MCP server interface (or lightweight API wrapper) compatible with Claude and AI clients, allowing natural language prompts like 'Show me sessions with rage clicks on checkout' to query ClickHouse data schemas and return structured behavioral summaries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Mouseflow