How to vibe codeScanToExcel

Prerequisites

• Node.jsfree

  Required runtime for executing the Next.js full-stack framework and package managers.

• GitHubfree

  Source control and deployment pipeline integration.

• Anthropic API KeyPay-as-you-go (~$3/M input tokens)

  Provides the frontier vision model capabilities required for pixel-by-pixel document extraction.

AI coding tools

• Claude Code

  Best-in-class terminal agent for bootstrapping full-stack features, setting up database schemas, and iterating through complex file-processing logic.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS and configure Turso with better-auth and Drizzle ORM to track user profiles and available page credits.

   Create a new Next.js project configured with TypeScript, Tailwind CSS, and App Router. Set up Turso with Drizzle ORM to support user accounts and page credit tracking. Define a schema for 'users' (id, email, credits_remaining) and 'scans' (id, user_id, filename, status, created_at). Integrate better-auth for email/password authentication. Ensure all configuration files are complete and type-safe.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Frontend Document Upload & Dropzone UI

   Build a responsive dashboard and drag-and-drop upload zone supporting JPEG, PNG, and multi-page PDF files with client-side preview rendering.

   Build a dashboard page in Next.js featuring a drag-and-drop file upload zone supporting JPEG, PNG, and PDF files up to 5 pages. Display remaining user scan credits in the header. When files are dropped, validate file type and size on the client side, show a loading progress indicator, and pass the files to a server action for processing. Include a history table listing past document extractions with download links.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03PDF Slicing and Image Preprocessing Pipeline

   Implement server-side utilities using sharp and pdf2image to convert uploaded multi-page PDFs and images into standardized frames for the vision model.

   Create a backend utility module in Node.js that accepts uploaded file buffers (PDF, PNG, JPEG). If the file is a multi-page PDF, use a library like pdf2image or pdf-parse to convert each page into a separate high-resolution image buffer. Ensure temporary files are cleaned up properly. Return an array of image buffers ready to be passed to the vision LLM extraction pipeline.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Vision LLM Structured Extraction Engine

   Integrate the Anthropic API using Vercel AI SDK to analyze document layouts pixel-by-pixel and extract structured tabular data schemas.

   Implement the document extraction engine using the Anthropic API and Vercel AI SDK. Send the processed document page image buffers to Claude 3.5 Sonnet with a detailed system prompt instructing the model to analyze the visual layout, recognize table structures, rows, columns, headers, and format numerical values and currencies correctly. Force structured JSON output matching a unified tabular schema (headers array, rows 2D array). Handle multi-page stitching by deduplicating repeating headers across page boundaries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Native .xlsx, .csv, and .json Exporter

   Build an export service using exceljs that converts the structured JSON extraction into a native, correctly-typed spreadsheet file.

   Create a spreadsheet generation service using 'exceljs'. Given the structured tabular JSON from the vision extraction engine, generate a native .xlsx file. Ensure that numerical strings are explicitly cast and stored as numeric data types so Excel formulas (like SUM and AVERAGE) work immediately. Auto-fit column widths for readability. Also implement fallback endpoints to export the exact same data as clean .csv and .json files. Add download buttons for each format on the result review screen.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Developer REST API & Webhook Notifications

   Build a protected REST API endpoint allowing programmatic document uploads and webhook callbacks for automated workflows.

   Build a REST API route in Next.js (/api/v1/extract) protected by bearer token authentication. Allow external developers to POST a document file or image URL alongside their API key. Trigger the asynchronous PDF slicing and vision extraction pipeline, store the result, and dispatch a webhook notification to a registered callback URL upon completion. Return the structured JSON and download link for the generated .xlsx file.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for ScanToExcel