How to vibe codeFileChanger

Prerequisites

• Node.jsfree

  Required for running the Next.js frontend and TypeScript backend orchestrator.

• Dockerfree

  Required to run isolated container workers containing FFmpeg, Pandoc, and Typst binaries.

• GitHubfree

  Code repository and deployment source control.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding the full-stack API, database schema, and worker queue logic.

• Cursor

  Ideal for fine-tuning the UI dashboard, API key management views, and MCP server endpoints.

Build guide

1. 01Scaffold Next.js Dashboard and API Structure

   Initialize the Next.js project with Tailwind CSS, configure Turso database client, and set up better-auth for personal account management.

   Create a new Next.js project with Tailwind CSS and TypeScript. Set up a Turso SQLite database connection using Drizzle ORM with tables for users, api_keys (with columns for hashed keys and prefixes), and conversion_jobs (columns for id, user_id, status, from_format, to_format, input_path, output_path, error, created_at). Implement better-auth for secure account sign-in and a dashboard page to generate and revoke API keys prefixed with 'fc_'.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Implement REST API Key Auth and Format Discovery Endpoint

   Build the middleware to validate the X-Api-Key header against hashed keys in the database and create the public GET /api/formats endpoint.

   Implement API key authentication middleware in Next.js or Express that checks the 'X-Api-Key' request header, hashes it, and verifies it against the api_keys table. Add a public GET /api/formats endpoint that returns a JSON list of supported input formats (markdown, html, latex, rst, org, typst, docx, mp3, mp4, jpg, png, pdf, etc.) and output formats. Handle missing or invalid API keys with proper 401 and 403 JSON error responses matching the FileChanger spec.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Build Async Conversion Job Submission and Polling Endpoints

   Create the POST /api/jobs multipart file upload endpoint, store incoming files temporarily, queue a background job, and implement GET /api/jobs/{id} status polling.

   Build the POST /api/jobs endpoint supporting multipart/form-data uploads with 'file', 'from', and 'to' form fields. Save the uploaded file to a secure temporary directory, insert a job record with status 'pending' into the database, and enqueue the job ID to an asynchronous worker queue (using Redis/BullMQ or a database-backed queue). Implement GET /api/jobs/{job_id} to return the current status ('pending', 'running', 'done', 'failed') and metadata, and GET /api/jobs/{job_id}/output to stream the converted file with correct Content-Type and Content-Disposition headers, deleting the temporary files immediately after delivery.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Containerize Conversion Engine with Pandoc, Typst, and FFmpeg

   Create a robust Dockerfile containing all required CLI binary tools and implement the background worker execution logic.

   Create a Dockerfile based on Ubuntu or Debian that installs Node.js along with heavy conversion binaries: Pandoc, Typst, LibreOffice (headless), Ghostscript, and FFmpeg with common codecs. Write a background worker script that consumes queued jobs, inspects the 'from' and 'to' formats, and executes the appropriate CLI command safely (e.g., pandoc input.md -o output.docx, typst compile input.typ output.pdf, or ffmpeg -i input.mp4 output.webm). Ensure proper error handling, timeout protection for hanging processes, and cleanup of temp files.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Build Model Context Protocol (MCP) Server Integration

   Expose a built-in MCP server endpoint so AI agents can query formats and trigger conversion jobs directly.

   Implement an MCP server integration within the backend codebase using the Model Context Protocol SDK. Expose tools that allow connected AI agents to list available conversion formats and execute conversion jobs by submitting file buffers or URLs, returning the conversion status and resulting file content. Ensure authentication and quota limits are enforced for MCP requests.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish Dashboard UI, Webhooks, and Error Handling

   Add usage metrics visualization, recent conversion history logs, and robust client error handling to the web dashboard.

   Polish the Next.js web dashboard to display active API keys, monthly conversion quota usage broken down by format group (documents, images, audio, video), and a log table of recent conversion jobs with their status and download buttons. Add robust client-side validation and error state handling for failed conversions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for FileChanger