English | 中文

V-Editor is an AI-powered online video editor that makes AI your creative editing director.

🌐 Live Demo: web-ai-media-editor.cn | web-ai-media-editor.xyz

V-Editor comes with a complete AI Agent system, not just simple tool calls:

• Multi-stage Workflow - Agent automatically plans, executes, verifies, and fixes
• Intelligent Decision Making - Automatically decides next steps based on execution results
• Visual Verification - Automatically captures screenshots after operations to verify effects
• Error Recovery - Automatically attempts fixes when encountering issues instead of just reporting errors
• Context Compression - Long conversations are automatically compressed to maintain response speed
• Multi-model Support - Supports Gemini, Claude, GPT and other mainstream models

V-Editor includes a purpose-built IDE for video animations:

• Time Synchronization - The time variable in code syncs with the timeline in real-time
• Instant Preview - See effects immediately in the preview window after code changes
• Drag-to-Debug - Drag the timeline and animations follow along
• React Components - Write animations in React with Tailwind CSS and Framer Motion support
• Embedded Video Detection - Automatically identifies video resources in HTML
• Animation Node Markers - AI can automatically generate animation keyframe markers

Built-in deep learning scene detection that automatically identifies shot transitions in videos:

• One-click Detection - Automatically analyzes videos and marks all scene transition points
• Adjustable Threshold - Adjust detection sensitivity based on video type
• Auto Split - One-click to add detected scenes to the timeline
• Short Scene Merging - Intelligently merges overly short scene segments

Desktop version includes built-in media scraper service for one-click search and download:

• Free Videos - Mixkit high-quality royalty-free videos
• Free Images - Pexels professional photography
• Free Music - Incompetech (Kevin MacLeod) + Mixkit music
• Video Download - yt-dlp supports YouTube, Bilibili, TikTok and 1000+ platforms

Seamlessly integrates with AI IDEs like Kiro, Cursor, and Claude Desktop:

• Directly manipulate video timeline from AI IDE
• AI can view timeline state and capture frames
• Enables seamless collaboration between code and video editing

• Multi-track Timeline - Supports unlimited tracks with layer stacking
• Keyframe Animation - Animate opacity, position, scale and other properties
• Transition Effects - Fade, slide, wipe (ported from Remotion)
• 3D Camera Movements - Shake, zoom, Hitchcock, orbit
• Semantic Search - Search media with natural language (CLIP model)
• Speech-to-Subtitles - Whisper local transcription with word-level timestamps
• One-click Speech Error Editing - Automatically detect and remove stutters, repetitions, filler words

V-Editor can run in two environments:

Access the deployed URL directly or start a local development server. All editing features are available, but without the media scraper.

Electron desktop client with built-in media scraper service:

• Mixkit free videos/music
• Pexels free images
• yt-dlp video download (supports 1000+ platforms)

1. Import Media - Drag and drop videos/images/audio to the media library
2. Add to Timeline - Drag media to the timeline
3. AI Chat - Describe desired effects in natural language in the chat box
4. Preview & Export - Real-time preview and export final product

Type in the chat box:

• "Add a 5-second title that says 'Welcome'"
• "Add a fade in/out effect to the video"
• "Trim this video to 10 seconds"
• "Add a left-to-right slide transition"
• "Set to TikTok vertical format"

V-Editor connects to AI IDEs through MCP Server. Connection flow:

1. Configure MCP Server in your AI IDE
2. Open V-Editor webpage
3. Click the MCP Connect button on the webpage (auto-connect or manually enter address)

Add to your MCP configuration file:

{
  "mcpServers": {
    "editor": {
      "command": "npx",
      "args": ["-y", "web-ai-editor-mcp-server@latest"],
      "env": {
        "EDITOR_WS_PORT": "9528"
      }
    }
  }
}

1. After adding the above configuration, restart your AI tool
2. Open web-ai-media-editor.cn
3. Click the MCP button in the top right corner of the webpage
4. Select "Auto Connect" or manually enter ws://localhost:9528
5. Once connected, AI can control the editor ✅

# Install dependencies
npm install

# Development mode
npm run dev

# Build production version
npm run build

cd v-editor-box

# Install dependencies
npm install

# Build scraper module
npm run build:scraper

# Start Electron app
npm start

npm run build:win    # Windows
npm run build:mac    # macOS
npm run build:linux  # Linux

# AI Service Configuration (Optional)
VITE_OPENAI_API_KEY=your_api_key
VITE_OPENAI_BASE_URL=https://api.openai.com/v1

# Groq Speech Transcription (Optional)
VITE_GROQ_API_KEY=your_groq_key

v-editor/
├── src/                  # V-Editor frontend source code
│   ├── agentSystem.ts    # AI Agent system
│   ├── mcpBridge.ts      # MCP protocol bridge
│   └── App.tsx           # Main application
├── api/                  # Serverless API
└── v-editor-box/         # Electron desktop client
    ├── main.js           # Electron main process + HTTP service
    ├── scraper-src/      # Media scraper source code
    └── storage/          # Media storage directory

MIT License