How to vibe codeEscourtly

Prerequisites

• Node.jsfree

  Runtime for building the Next.js dashboard, extension build scripts, and backend API routes.

• GitHubfree

  Repository hosting and CI/CD deployment pipelines.

• 

  Google Chrome Developer Accountfree

  Required for sideloading and publishing the custom screen recording extension.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding the full-stack Next.js app and Chrome extension manifest v3 code.

• Cursor

  IDE for fine-tuning complex React canvas components, DOM sanitization logic, and visual editor controls.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso database connectivity, and set up better-auth tables for user authentication.

   Scaffold a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up Turso database integration using libSQL client with tables for users, tours (id, userId, title, themeConfig, createdAt), steps (id, tourId, stepOrder, htmlContent, cssAssets, selector, annotation, blurRules), and analytics_events (id, tourId, stepId, eventType, timestamp, sessionHash). Implement better-auth for secure user email/password login. Ensure strict TypeScript types across all database schemas.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Chrome Extension Recorder Core

   Build a Chrome extension manifest v3 background script and content script that serializes target DOM nodes, inline styles, and user click coordinates.

   Create a Google Chrome extension (Manifest v3) with a popup UI containing a 'Record Tour' button. The content script should intercept click events, record target CSS selectors, outerHTML of the active viewport, and computed styles. Package this serialized step payload into a JSON object and POST it securely to our Next.js backend endpoint (/api/tours/import) with user authentication tokens. Handle network retries and display recording status states in the extension popup.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual Editor & Redaction Canvas

   Build the web editor dashboard allowing users to reorder captured steps, position click hotspots, and apply CSS blur filters to sensitive elements.

   Build a dashboard page at /app/tours/[id]/edit using Next.js App Router. Render a drag-and-drop step reordering sidebar using HTML5 drag events or dnd kit. Display the active step's captured HTML inside an isolated sandboxed iframe. Add interactive floating toolbars on the iframe canvas allowing users to place click hotspot pins, configure tooltip text, and click DOM elements to apply high-performance CSS blur filters (backdrop-filter: blur(8px)) over PII. Save updates to the Turso database via server actions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Annotation Engine Integration

   Integrate the Vercel AI SDK and Anthropic API to analyze step DOM selectors and automatically generate clear, concise user instructions.

   Implement an API route at /api/ai/annotate that receives serialized DOM element snippets and user action logs for a step. Use the Vercel AI SDK with Anthropic Claude Sonnet to parse the target CSS selector and generate a concise, professional step description sentence in JSON format. Add an 'Auto-Generate with AI' button in the visual editor UI that invokes this endpoint and updates the step description state instantly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Interactive Viewer & Sandboxed Player

   Build the public shareable player page that securely renders HTML snapshots, handles step progression, and applies custom brand styling.

   Build a public viewer page at /tour/[id] that loads tour configuration and step data. Render the captured HTML snapshot inside a secure sandboxed iframe with scripts disabled for safety, while injecting custom CSS styles, theme colors, and font families based on the tour's custom branding settings. Build a floating step navigation overlay (Next/Back buttons, step counter, progress bar) that dynamically switches the displayed HTML snapshot and highlights active click hotspots.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Cookieless Analytics & Funnels

   Implement privacy-first view tracking and step-by-step conversion funnels without relying on tracking cookies or storing IP addresses.

   Implement a lightweight telemetry client in the viewer page that logs anonymous session events (view, step_advance, cta_click) to the backend without setting cookies or storing user IP addresses (hash daily user fingerprints instead). Build an analytics dashboard at /app/tours/[id]/analytics that aggregates these logs into a step-by-step funnel showing completion rates, drop-off percentages, and average duration per step.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Escourtly