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

> Workflow context for teams & AI agents

- Site: https://scribehow.com
- Category: Documentation & AI Workflow Capture
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 3-4 weeks part-time

## Verdict

Build a web-only subset using a Chrome extension and Next.js, but keep paying if you need native desktop recording and enterprise compliance.

Replicating Scribe's web-based guide generation loop is a rewarding side project, but the cross-platform native desktop recorder and enterprise PII auto-redaction are major engineering hurdles. A solo developer can build a robust web extension that records click streams and pushes them to a Next.js web dashboard where an LLM turns raw events into clean SOP steps. However, capturing native desktop apps like Excel or Photoshop requires building and signing separate macOS and Windows binaries with OS-level screen-capture hooks, which takes months of tedious native debugging.

### What you can't replicate

- Native desktop app capture for non-browser software
- Enforced automatic PII/PHI redaction across enterprise workspaces
- Enterprise SAML SSO and strict data governance agreements

## What it does

Automatically capture how work gets done and generate step-by-step Standard Operating Procedures (SOPs), tutorials, and guides.

### Core features

- Browser extension event capture (DOM click, input tracking)
- Automatic screenshot capture and bounding box annotation
- AI-driven step title and description generation
- Step editing, cropping, and manual PII redaction
- Export to Markdown, HTML, and PDF
- Workspace and document management dashboard

## The business

### Pricing

- Basic: Free
- Pro Personal: $25/mo
- Pro Team: $13/seat/mo
- Enterprise: Custom

### Funding

$130M raised.
- Seed Round ($30M, Oct 2021)
- Series B ($25M, Feb 2024)
- Series C ($75M, Nov 2025)
Investors: StepStone Group, Amplify Partners, Redpoint Ventures, Tiger Global, Morado Ventures

Founded 2019.
Team size: ~120.

## The hard parts

- Building a reliable cross-browser extension that intercepts clicks without breaking page behavior
- Client-side screenshot manipulation, bounding-box overlays, and redaction pipelines
- Asynchronous sequencing of raw DOM events into coherent natural language instructions

## How to vibe code Scribe

### Prerequisites

- Node.js (Free): Required runtime for Next.js web application and browser extension build tooling
- GitHub (Free): Source control and deployment pipeline integration
- Google Chrome (Free): Required host for developing and testing the Manifest V3 capture extension

### Recommended AI 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

### Stack

- Frontend: Next.js
- Backend: Next.js Server Actions
- Database: Turso
- Auth: better-auth
- Payments: none
- Other: Vercel AI SDK, Tailwind CSS, Lucide React

### Hosting

- Vercel (Hosting the Next.js dashboard and API routes): $0/mo
- Cloudflare (Storing guide screenshots in R2 object storage): $0/mo

### Build guide

1. **Scaffold 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.
```

2. **Build 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.
```

3. **Implement 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.
```

4. **AI 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.
```

5. **Build 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.
```

6. **Export & 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.
```

### Cost vs paying

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

- Claude Pro / Cursor Pro subscription: $20
- Total: ~$20 one-time

**Ongoing costs (monthly):**

- Vercel Hobby Hosting: $0
- Turso & Cloudflare Free Tiers: $0
- Anthropic API usage (personal testing): ~$2
- Total: ~$2/mo

- Paying for the SaaS instead: $25/mo
- Build time: 25-35 hours
- AI tool credits: $20
- Break-even: 1 month

## Sources

- [Scribe Pricing Page](https://scribehow.com/pricing)
- [Scribe Security & Trust Center](https://scribehow.com/security)
- [Forbes: $1.3 Billion Startup Scribe Builds AI Software](https://www.forbes.com/sites/rashishrivastava/2026/05/10/13-billion-startup-scribe-builds-ai-software-to-record-employees-work/)