How to vibe codeScribe

Prerequisites

• Node.jsFree

  Required runtime for Next.js web application and browser extension build tooling

• GitHubFree

  Source control and deployment pipeline integration

• 

  Google ChromeFree

  Required host for developing and testing the Manifest V3 capture extension

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding the Next.js app, extension scripts, and API routes

• Cursor

  Ideal for iterative UI work on the editor dashboard and tweaking canvas screenshot overlays

Build guide

1. 01Scaffold Next.js Dashboard & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso database with Drizzle ORM, and set up user authentication.

   Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Set up Turso for database connectivity via Drizzle ORM. Define tables for users, guides (id, title, description, user_id, created_at), and steps (id, guide_id, step_number, action_text, screenshot_url, selector). Implement better-auth for email/password authentication. Create a clean dashboard UI that lists the user's recorded guides with options to view, edit, or delete them. Ensure all components use Tailwind CSS and Lucide React icons.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build Chrome Extension Manifest V3 Recorder

   Create a browser extension that listens for click and input events on web pages and transmits raw interaction payloads back to the web app.

   Build a Chrome extension using Manifest V3 that includes a background service worker, a popup UI with 'Start Recording' and 'Stop Recording' buttons, and a content script. The content script must attach a click listener to the document, capturing the target element's outerHTML, text content, CSS selector, and viewport coordinates. When a click occurs, use chrome.tabs.captureVisibleTab to snap a screenshot of the active tab. Send the event payload (screenshot data URL, element metadata, timestamp) via background script to our Next.js API ingestion endpoint. Handle authentication tokens securely in extension storage.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Implement Ingestion API & Screenshot Storage

   Build the backend API endpoint to receive raw extension payloads, upload screenshots to Cloudflare R2, and create guide step records.

   Create a Next.js API route at `/api/guides/ingest` that accepts a recorded session payload containing an array of steps (each with a base64 screenshot and DOM metadata). Authenticate the request via session cookie or API token. For each step, upload the base64 image buffer to Cloudflare R2 object storage, returning a public CDN URL. Insert a record into the Turso database linking the guide to the newly stored image URLs and captured action metadata. Return the created guide ID on success.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Step Description & Title Generation

   Integrate the Vercel AI SDK and Anthropic API to analyze recorded DOM actions and automatically write clear tutorial text for each step.

   Install the Vercel AI SDK and Anthropic AI provider package. Create a server action `generateGuideContent(guideId)` that fetches all steps for a given guide from the database. Pass the DOM element tag, inner text, action type (click/input), and step sequence to Claude 3.5 Sonnet. Prompt the model to return a JSON array of polished step descriptions (e.g., 'Click on the "Settings" button') and an overall guide title. Update the database records with the generated titles and descriptions, and return the updated guide object to the frontend.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Build Guide Editor & Screenshot Redaction Canvas

   Develop an interactive guide editor view allowing users to reorder steps, edit description text, and apply blur or redaction boxes over screenshots.

   Build a guide editor page in Next.js (`/guides/[id]/edit`) displaying a vertical timeline of all steps with editable text inputs for title and instructions. Render each step's screenshot inside an interactive HTML5 canvas element. Implement a drag-to-select redaction tool on the canvas that allows users to draw black blur rectangles over sensitive parts of the screenshot, saving the updated image back to R2 storage upon clicking 'Save Changes'. Add buttons to delete or reorder steps.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Export & Share Functionality

   Add public view sharing links and Markdown/HTML export options for generated guides.

   Create a public viewer route at `/guides/share/[id]` that renders the guide in a clean, read-only layout optimized for printing or reading. Add an 'Export' dropdown menu with options to download the guide as a formatted Markdown file (`.md`) containing embedded image links and step lists, as well as a standalone HTML export. Ensure public guides respect a `is_public` boolean column on the guides table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Scribe