AIPageBuilder

Overview

AIPageBuilder is an all-in-one AI page builder and conversion analytics suite. It generates landing pages in 8 seconds from a text prompt, then tracks performance with proprietary session recording, click heatmaps, popup builder, and SEO tools — replacing a $500+/mo stack of PageFly + Hotjar + ClickFunnels + OptinMonster at $39/mo.

The Problem

Shopify merchants and marketers use 4–6 separate tools for page building (PageFly), heatmaps (Hotjar), conversion optimization (ClickFunnels), popups (OptinMonster), and analytics. Each tool runs $80–$150/mo. Integrating them requires tag managers, data layer configurations, and constant context switching.

AIPageBuilder consolidates all of this into a single platform, with AI handling the initial page generation so users skip the blank canvas entirely.

Core Capabilities

AI Page Generator — Describe the page in plain English (industry, tone, goal). Claude AI builds a complete page in under 8 seconds across 20 block types. Output is immediately editable.

Click Heatmaps — A custom-built heatmap engine (not Hotjar). Records click coordinates per session, aggregates into a visual heat overlay, filterable by device type. Proprietary — no third-party tracker.

Session Recording — Canvas-based playback of full user sessions. Records DOM mutations, scroll positions, and click events. No pixel tracking, no third-party script on the published page.

Popup Builder — 6 popup types (modal, slide-in, bar, corner, fullscreen, exit-intent), 5 triggers (time, scroll depth, exit intent, click, page load). A/B test variants.

SEO Tools — SERP preview, score 0–100 with fix recommendations, JSON-LD structured data injection, sitemap generation.

Screenshot → Layout — Upload a design mockup or screenshot. AI deconstructs it into editable block structure.

Architecture: Custom Heatmap + Session Recording

Building the heatmap and session recording engines was the core technical challenge. Off-the-shelf solutions (FullStory, Hotjar) cost $100+/mo, add third-party tracking to customer sites, and can't be white-labeled.

The proprietary approach:

1. Event capture — A lightweight (4KB) observer script attached to published pages records click, scroll, mousemove, and DOM mutations at 60fps
2. Event compression — Events are batched client-side, compressed, and sent to the API in 5-second intervals
3. Storage — Compressed event arrays stored in Supabase (Postgres JSONB)
4. Playback — Canvas-based renderer rebuilds the DOM state at each timestamp using the mutation log
5. Heatmap aggregation — Click coordinates normalized to viewport-relative positions, aggregated server-side, rendered as SVG overlay on a page screenshot

Stack

Pricing Architecture

• Free — $0 (3 pages, 20 blocks, 10 AI credits)
• Starter — $19/mo (15 pages, 100 credits)
• Pro — $39/mo (unlimited pages, 500 credits, heatmaps, popups, SEO) (most popular)
• Agency — $99/mo (unlimited credits, 5 workspaces, white-label, custom domain)

Stat: replaces $500+/mo in competitor tools at $39/mo Pro.

Tradeoffs & Decisions

Custom heatmap vs Hotjar embed — Hotjar's embed adds a 50KB third-party script to every published page and sends session data to Hotjar's servers. For a B2B tool, that's a data liability. Building custom keeps all data in the customer's account and enables proper white-labeling on the Agency plan.

Claude for page gen, GPT-4o for copy — Claude produces structurally coherent multi-block layouts. GPT-4o produces better short-form marketing copy (headlines, CTAs, value propositions). Routing by task type yields better output than using a single model for everything.

JSONB for event storage — Session recordings are variable-length nested arrays. JSONB avoids schema migrations as the event format evolves. Query performance on JSONB aggregations is acceptable for this use case with proper GIN indexing.

What This Proves

AIPageBuilder demonstrates two capabilities most AI agencies can't claim:

1. Custom ML-adjacent infrastructure — A proprietary session recording and heatmap engine built from scratch, not an integration
2. Multi-model AI orchestration — Task-based routing between Claude and GPT-4o in a production content generation pipeline

If you need an AI-powered content tool, conversion analytics platform, or multi-model AI product, this architecture is the reference implementation.