How to vibe codeGuidde

Prerequisites

• Node.jsfree

  Runtime for Next.js web app and extension build scripts

• GitHubfree

  Source control and CI/CD deployment pipeline

AI coding tools

• Claude Code

  Agentic terminal coding tool best suited for scaffolding full-stack apps and debugging complex browser extension code

• Cursor

  AI code editor for fine-tuning React UI components and slide-editor interactions

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS, configure Turso SQLite database with tables for users, guides, steps, and assets, and set up better-auth.

   Create a new Next.js project with Tailwind CSS and TypeScript. Configure Turso SQLite as the database using Drizzle ORM. Define schemas for Users, Guides (id, title, userId, createdAt), Steps (id, guideId, orderIndex, actionText, screenshotUrl, audioUrl, duration), and Settings. Integrate better-auth for email/password authentication. Ensure proper environment variable loading and database connection initialization.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Chrome Extension Capture Script

   Build a lightweight Chrome extension background script and content script that captures DOM click events, input values, and takes screenshots via chrome.tabs.captureVisibleTab.

   Build a Manifest V3 Chrome extension containing a content script and a background service worker. The content script should listen for mouse clicks and input changes, recording the target element's CSS selector, inner text, and taking a screenshot via background messaging when actions occur. Include a popup UI with a 'Start Capture' and 'Stop Capture' button that posts the recorded session payload to our Next.js backend API endpoint.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Script & Step Generation Pipeline

   Implement a backend ingestion pipeline that receives captured JSON events, calls the OpenAI API to translate raw click streams into clean narrative instructions for each step.

   Implement an API route in Next.js that receives the raw captured event payload from the Chrome extension. Use the OpenAI API (GPT-4o) with structured JSON output to analyze the sequence of screenshots and user actions, generating a clean step-by-step title, narrative description, and action highlight coordinates for each step. Save the resulting structured steps into the Turso database linked to the new Guide record.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Text-to-Speech & Audio Synthesis

   Integrate the ElevenLabs API to automatically convert each generated step narrative into an audio voiceover file, storing the resulting audio in Cloudflare R2.

   Create a background job service that takes generated guide steps, sends the narrative text to the ElevenLabs Text-to-Speech API, and receives an audio buffer. Upload the resulting MP3 file to Cloudflare R2 storage, update the step record with the audioUrl, and calculate the audio duration using an audio metadata parser to set slide display timings.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Interactive Guide Viewer & Editor

   Build a web-based dashboard and interactive player where users can edit step text, rearrange slide order, preview audio playback synchronized with screenshots, and export guides.

   Build a Next.js dashboard view showing a user's guides list, and a dedicated editor page featuring a step-by-step slide deck interface. Users should be able to edit step text inline, reorder steps via drag-and-drop, preview screenshots with synchronized audio narration playback, customize brand accent colors, and publish the guide to a public shareable URL.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Guidde