How to vibe codeVyra

Prerequisites

• Node.jsfree

  Required for running the Next.js frontend and TypeScript MCP server.

• GitHubfree

  Version control and deployment pipeline source.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding complex MCP tool schemas and state logic.

• Cursor

  Ideal for iterative UI work on the timeline dashboard.

Build guide

1. 01Project Scaffolding & Database Setup

   Initialize the Next.js project with TypeScript, configure Tailwind CSS, set up Turso database with Drizzle ORM, and configure better-auth.

   Create a new Next.js 16 project with Tailwind CSS, TypeScript, and App Router. Set up Turso for database connectivity using Drizzle ORM with tables for users, projects, timelines, and clips. Implement better-auth for user authentication with email/password and session management. Ensure all connection strings and environment variables are cleanly separated in a .env.example file. Write comprehensive unit tests for the database schema validations.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Timeline State Machine & UI Dashboard

   Build the non-linear video editing timeline interface with state management for clips, tracks, cuts, and transitions.

   Build a responsive web dashboard in Next.js representing a multi-track video editing timeline. Implement client-side state management for non-linear editing actions including split, trim, slip, ripple cuts, and track ordering. Create UI components for video track rendering, playhead scrubbing, and timecode readouts. Ensure state updates are immutable and sync correctly with backend project documents.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Model Context Protocol (MCP) Server Implementation

   Develop a remote HTTP MCP server exposing deterministic tools for manipulating project timelines, cutting clips, and adding captions.

   Implement a Model Context Protocol (MCP) server endpoint using TypeScript that exposes structured tools for external AI clients. Define MCP tools for timeline manipulation: cut_clip, split_timeline, add_caption, and export_video. Each tool must accept strict JSON schemas, validate inputs, execute database updates on the user's timeline state, and return descriptive execution logs. Include robust error handling for malformed tool calls.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Video Understanding & Transcription Pipeline

   Integrate Whisper API or AssemblyAI for automated speech-to-text transcription and scene embedding analysis.

   Build an automated background worker using Trigger.dev or Next.js background tasks that ingests uploaded video assets, sends audio to the OpenAI Whisper API for word-level timestamp transcription, and stores transcript blocks in Turso. Create a tool endpoint that allows LLMs to query transcript segments by keyword or timestamp range to enable context-aware video editing instructions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Dynamic Motion Graphics & Render Engine

   Implement code-generated lower thirds, title cards, and export formatting for vertical social platforms.

   Create a motion graphics rendering module that generates HTML/CSS or canvas-based animated title cards, lower thirds, and counters from structured JSON code payloads. Wire this rendering engine into the export pipeline so that text overlays and graphics are dynamically composited onto video exports for TikTok, Reels, and Shorts formats.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish, Error Handling & Integration Testing

   Add comprehensive error tracking, test MCP client handshakes, and optimize performance for video asset handling.

   Integrate Sentry for error tracking across the Next.js app and the remote MCP server. Write integration tests verifying that external MCP client requests correctly authenticate, parse tool definitions, and execute state mutations on user timelines without race conditions. Add input sanitization and rate limiting to all public API endpoints.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Vyra