How to vibe codewasitaigenerated

Prerequisites

• Node.jsfree

  Required runtime for the Next.js full-stack application.

• GitHubfree

  Source control and integration for deployment platforms.

• 

  Hugging Face accountfree tier

  Provides inference APIs for text classification and media artifact screening.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding the entire multi-modal API and dashboard end-to-end.

• Cursor

  Ideal for fine-tuning React frontend components, dashboard layouts, and Tailwind styles.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS, configure Turso SQLite via Drizzle ORM, and set up the schema for users, API keys, credit balances, and scan logs.

   Scaffold a new Next.js project using App Router and TypeScript. Install Tailwind CSS and set up Drizzle ORM configured with Turso (SQLite). Create database tables for 'users' (id, email, passwordHash, credits), 'api_keys' (id, userId, keyHash, name, createdAt), and 'scan_logs' (id, userId, type, contentHash, resultJson, cost, createdAt). Ensure proper foreign key constraints and indexes on keyHash and userId. Write migration scripts and test database connection locally.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Dashboard Layout

   Implement authentication with better-auth and build the main user dashboard layout showing credit balances, recent scans, and navigation tabs.

   Implement authentication in the Next.js app using better-auth with email and password support. Create signup, login, and logout routes. Build a responsive dashboard layout with a sidebar (Overview, Detectors, API Keys, Documentation, Pricing) and a top navigation bar showing the user's current credit balance. Protect dashboard routes with authentication middleware and render user profile data dynamically.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03API Key Management & Gateway Middleware

   Build the API key generation interface in the dashboard and create a secure middleware layer to validate Bearer tokens and deduct credits.

   Create an API key management page in the dashboard allowing users to generate, view (once), and revoke API keys stored as secure hashes in Turso. Implement a Next.js middleware or utility function for incoming API routes at `/api/v1/*` that validates the `Authorization: Bearer <key>` header, checks if the user has sufficient credits, deducts the appropriate credit amount based on detection type, and returns 401 Unauthorized or 402 Payment Required errors appropriately.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Multi-Modal Detection UI & Web Scanners

   Build the interactive web demo interface supporting text input, document upload, image uploads, and audio/video files, calling internal detection handlers.

   Build a multi-modal detection interface on the web dashboard with tabs for Text, Document, Image, Audio, and Video. For text, provide a textarea with a word counter and real-time credit estimator. For files (images, audio, video), provide drag-and-drop file upload zones with size validation (max 10MB). When submitted, send the payload to internal API routes, display a loading state, and render results with confidence scores, visual progress bars, and breakdown metrics matching the specified UI design.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Detection Engine Integration (Text & Image)

   Implement backend processing for text and image detection endpoints, integrating external AI inference APIs or heuristic classifiers.

   Implement the backend detection logic for text (`POST /api/v1/detect/text`) and images (`POST /api/v1/detect/image`). For text, analyze perplexity/burstiness heuristics or call an external LLM classification endpoint via Vercel AI SDK to return `isAI`, `confidence`, `patterns`, and per-sentence scoring. For images, accept multipart form-data, check file headers, and run a lightweight computer vision classification check or mock confidence score with synthetic artifact tags. Return structured JSON matching the documented API response format.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Detection Engine Integration (Audio & Video)

   Implement processing endpoints for audio and video deepfake analysis, completing the full multi-modal detection suite.

   Implement the backend detection endpoints for audio (`POST /api/v1/detect/audio`) and video (`POST /api/v1/detect/video`). Handle multipart file uploads using UploadThing or local temporary storage. Process audio chunks for acoustic synthetic patterns and video files for frame-by-frame artifact tracking. Return JSON response payloads including `isAI`, `confidence`, `patterns`, and analysis reasoning. Add comprehensive error handling for unsupported file formats and oversized uploads.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07API Documentation & Polish

   Create a clean, interactive API documentation page with cURL examples and test responses, and perform end-to-end testing.

   Build an API documentation page within the app that outlines endpoints (`POST /api/v1/detect/text`, `POST /api/v1/detect/image`, etc.), authentication requirements, request bodies with JSON examples, response schemas, and error codes (400, 401, 402, 403, 500). Add copy-to-clipboard code blocks for cURL requests. Perform an end-to-end test verifying that dashboard scans deduct credits correctly and API requests with valid Bearer tokens succeed.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for wasitaigenerated