# How to Vibe Code Your Own Smartlook (and Stop Paying for It)

> Qualitative digital experience and user behavior analytics platform

- Site: https://smartlook.com
- Category: Product Analytics
- Verdict: **Serious undertaking** (45/100 vibecodeable)
- Estimated effort: 6+ weeks of part-time engineering

## Verdict

Build a personal subset for a side project rather than attempting a full enterprise analytics engine, as high-frequency event ingestion and DOM serialization pipelines involve non-trivial engineering.

Smartlook is an infrastructure-heavy observability product. While you can build a personal prototype that records DOM mutations on a sample site and plays them back in a timeline, achieving robust client-side PII masking, handling high-frequency network streams without crashing target web apps, and compressing massive JSON payloads will consume weeks of frustrating debugging.

### What you can't replicate

- Enterprise compliance and data residency guarantees
- Native mobile app replay SDKs for iOS and Android
- Cisco/Splunk ecosystem telemetry correlation

## What it does

Session recordings, heatmaps, conversion funnels, and crash reports for websites and mobile apps.

### Core features

- Web DOM mutation recording and playback player
- Click and scroll heatmap generation
- Event tracking and conversion funnel analysis
- Session filtering by user actions and crashes
- Crash report context and log aggregation

## The business

### Pricing

- Free: Free — Capped low session volumes and limited data history.
- Business: $55/mo — Tier scaling based on session volume limits.

Founded 2016.
Team size: Mid-sized (prior to Cisco acquisition).

## The hard parts

- Client-side DOM sanitization to strip PII and sensitive fields without breaking target pages
- High-throughput event streaming ingestion and compressed storage pipeline
- Synchronized timeline player mapping DOM mutations, network requests, and console logs

## How to vibe code Smartlook

### Prerequisites

- Node.js (free): Runtime environment for building the Next.js frontend and ingestion server.
- GitHub (free): Repository hosting and CI/CD deployment pipelines.

### Recommended AI tools

- Claude Code: Autonomous agentic coding tool capable of managing multi-file changes across the recording SDK, ingestion backend, and player frontend.
- Cursor: AI-native code editor for fine-tuning the complex DOM player timeline components.

### Stack

- Frontend: Next.js
- Backend: Node.js with Express / WebSocket server
- Database: ClickHouse
- Auth: better-auth
- Payments: None
- Other: PostHog (reference pattern), Tailwind CSS

### Hosting

- Fly.io (Hosting the high-throughput event ingestion WebSocket server and ClickHouse database backend.): ~$10/mo
- Vercel (Hosting the Next.js dashboard and session replay player frontend.): $0/mo

### Build guide

1. **Project Scaffolding and Database Setup** — Initialize a Next.js project with Tailwind CSS and set up ClickHouse for storing high-frequency event logs and session payloads.

```
Scaffold a new Next.js 16 full-stack application using TypeScript, App Router, and Tailwind CSS v4. Set up a Docker Compose file locally containing a ClickHouse instance configured for structured event ingestion (tables for session metadata, DOM mutation batches, and console logs). Configure database connection utilities using native Node.js ClickHouse drivers.
```

2. **Client-Side Recording SDK** — Build a lightweight JavaScript tracking snippet that captures DOM mutations, mouse movements, clicks, and console errors while sanitizing PII.

```
Build a client-side JavaScript recorder script packaged as an embeddable bundle. Implement MutationObserver to capture DOM insertions, text modifications, and attribute changes. Add listeners for mouse clicks, movements (throttled), and window resize events. Ensure an automatic PII sanitization layer that masks input fields marked with password types or data-sensitive attributes before batching payloads.
```

3. **Ingestion Pipeline and Storage Backend** — Create a high-throughput backend ingestion endpoint that receives batched session payloads and writes them efficiently to ClickHouse.

```
Implement a high-throughput ingestion API route in Node.js that accepts compressed JSON arrays of DOM mutation batches and event telemetry. Validate session tokens, batch incoming records in memory briefly, and perform bulk inserts into ClickHouse tables. Handle CORS properly to allow cross-origin tracking snippets to transmit data securely.
```

4. **Session Playback Engine Frontend** — Develop a scrubbable replay player interface that reconstructs DOM states chronologically alongside user cursor movements.

```
Create a session replay player dashboard page in Next.js. Build a timeline scrubber component that fetches session event streams and DOM mutation batches from the backend. Implement a custom player engine that replays DOM mutations sequentially onto an isolated iframe sandbox, mapping mouse cursor positions and click indicators synchronously across the playback timeline.
```

5. **Heatmaps and Funnel Analytics** — Aggregate click and scroll coordinates to render visual heatmaps and calculate basic conversion funnel drop-off metrics.

```
Implement an analytics aggregation engine that queries ClickHouse event logs to generate click density maps and scroll-depth distribution percentages for specific URLs. Build a funnel analysis view where users define custom sequential steps (e.g., Page View -> Click Checkout -> Purchase) and view absolute conversion rates and drop-off counts.
```

6. **Polish, Error Tracking, and Deployment** — Add crash report filters linking errors to session playbacks and deploy the entire stack to production infrastructure.

```
Add error tracking integration that captures window.onerror and unhandledrejection events, tagging them with session IDs. Build a crash reports dashboard allowing filtering of sessions ending in errors. Finalize environment configurations and prepare deployment scripts for Fly.io (backend/ClickHouse) and Vercel (frontend).
```

### Cost vs paying

**Starting costs (one-time):**

- Domain registration: $12
- AI coding credits: $20
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Fly.io hosting & ClickHouse storage: $10/mo
- Vercel frontend hosting: $0/mo
- Total: ~$10/mo

- Paying for the SaaS instead: $55/mo (Historical Business tier)
- Build time: 40-60 hours
- AI tool credits: $20
- Break-even: N/A (Smartlook is EoL; personal clone built for learning)

## Sources

- [Smartlook Official Site / EoL Announcement](https://smartlook.com)
- [SelectHub - SmartLook Reviews & Pricing](https://selecthub.com)
- [Cisco Newsroom - Cisco Completes Acquisition of Smartlook](https://newsroom.cisco.com)