How to vibe codeOriginality.ai

Prerequisites

• Node.jsfree

  Required runtime for building the Next.js full-stack application and CLI tools.

• GitHubfree

  Source code repository hosting and CI/CD triggers.

• 

  Google Chrome Developer Accountfree

  Required if you want to load and test the custom Chrome extension locally and package it.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding the full Next.js stack, database schema, and browser extension components.

• Cursor

  Ideal for fine-tuning frontend UI dashboards, Tailwind styling, and complex React state hooks.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso database connectivity, and establish core database models for users, scans, credits, and report history.

   Initialize a new Next.js 16 project using TypeScript, App Router, and Tailwind CSS. Set up Turso database client bindings using libSQL. Create database migration files for tables: `users` (id, email, credits, created_at), `scans` (id, user_id, content_snippet, ai_score, plagiarism_score, readability_score, created_at), and `scan_history` (id, user_id, report_json, created_at). Implement environment validation using Zod and create a clean configuration structure.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication System Setup

   Configure better-auth with email/password and session management connected to the Turso database.

   Integrate `better-auth` into the Next.js application. Configure email and password authentication providers backed by the Turso database. Create API routes for authentication endpoints, build secure React login and registration pages with Tailwind styling, and protect dashboard layouts so unauthenticated users are redirected cleanly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Text Detection Engine & Heuristics

   Implement server actions using the Vercel AI SDK and Anthropic API to analyze text perplexity, burstiness, and estimate probability of machine generation.

   Create a server action that takes submitted text, validates a minimum length of 100 words, and queries the Anthropic API using structured JSON output. Instruct the model to evaluate the text for AI-generation characteristics (perplexity, burstiness, uniform sentence structure) and return an overall AI probability score along with sentence-level highlighting data. Store the completed scan record in the Turso database and deduct user credits.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Content Quality, Readability, and Grammar Scoring

   Add algorithms and LLM prompt wrappers to calculate standard readability indices (Flesch-Kincaid) and grammar assessment.

   Write utility functions in TypeScript to calculate standard readability metrics including the Flesch-Kincaid Grade Level and Gunning Fog index for input text. Implement a supplementary server action that checks grammar and spelling issues, returning line numbers, corrected suggestions, and a comprehensive content quality score (low, good, high).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Dashboard UI & Shareable Reports

   Build the main user dashboard with text pasting interfaces, file upload parsing (PDF/DOCX), scan history tables, and public shareable reports.

   Build a responsive SaaS dashboard using shadcn/ui components. Include a main editor view supporting text pasting, word count tracking, file upload handling for .docx and .pdf files, and trigger buttons for AI, Plagiarism, and Readability scans. Create a dedicated results view with sentence-level color-coded highlights and a shareable public report page accessible via a unique UUID slug.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Chrome Extension & Writing Replay Scaffolding

   Develop a Manifest V3 Chrome extension that observes DOM mutations in Google Docs to record typing speed and character history.

   Build a Chrome Extension (Manifest V3) containing a background service worker and content script tailored for Google Docs (`docs.google.com`). Implement a MutationObserver that tracks character additions, deletions, and typing timestamps in local storage buffers. Build a popup interface that allows users to view a sped-up playback graph of their document authoring history.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Originality.ai