Agent Video Editor
A professional video editing interface with timeline management, playback controls, and clip organization for AI-generated videos.
Features
- Video Preview: Full-screen video player with overlay controls
- Timeline Visualization: Visual timeline showing video clips and duration
- Playback Controls: Play, pause, skip, and seek functionality
- Clip Management: Add, remove, and organize video clips
- Export Options: Export videos in multiple formats (MP4, MOV, AVI)
- Editing Tools: Trim, cut, and arrange video segments
- Loading States: Visual feedback during video processing
- Progress Tracking: Real-time playback progress indication
Examples
Basic Usage
Simple video editor with essential controls.
Video Preview
0:120:45
Timeline
Intro
Main
Outro
0:000:45
Just now
😊😔
Interactive Demo
Advanced demo with timeline management and clip controls.
Video Preview
0:120:45
Timeline
Intro
Main
Outro
0:000:45
Just now
😊😔
Timeline Controls:
Clip Management:
Current video: 0:12 / 0:45 • 3 clips
Chat Integration
Example of how the video editor works within a chat conversation:
Video Editing Chat
Showing how the video editor works in a chat context
Can you edit this marketing video for me? I need to trim it and add transitions.
🎬
I'll help you edit your marketing video with professional transitions and trimming.
Video Preview
0:452:15
Timeline
Intro
Main Content
Outro
0:002:15
Just now
😊😔
Installation
npx shadcn add "https://agents-ui-kit.com/c/agent-video-editor.json"API Reference
AgentVideoEditor
| Prop | Type | Default | Description |
|---|---|---|---|
| videoUrl | string | - | URL of the video file |
| isGenerating | boolean | false | Whether video is being processed |
| isPlaying | boolean | false | Whether video is currently playing |
| currentTime | number | 0 | Current playback time in seconds |
| duration | number | 0 | Total video duration in seconds |
| clips | VideoClip[] | [] | Array of video clips |
| onPlay | () => void | - | Play video callback |
| onPause | () => void | - | Pause video callback |
| onSeek | (time: number) => void | - | Seek to time callback |
| onSkipBack | () => void | - | Skip backward callback |
| onSkipForward | () => void | - | Skip forward callback |
| onExport | (format?: ExportFormat) => void | - | Export callback |
| onCopy | () => void | - | Copy video callback |
| onEdit | () => void | - | Edit settings callback |
| onTrim | () => void | - | Trim video callback |
| onRegenerateResponse | () => void | - | Regenerate callback |
| className | string | - | Additional CSS classes |
| timestamp | string | "Just now" | Display timestamp |
VideoClip
| Property | Type | Required | Description |
|---|---|---|---|
| id | string | Yes | Unique clip identifier |
| name | string | Yes | Clip display name |
| duration | number | Yes | Clip duration in seconds |
| startTime | number | Yes | Start time in timeline |
| endTime | number | Yes | End time in timeline |
| thumbnail | string | No | Clip thumbnail URL |
Export Formats
type ExportFormat = "mp4" | "mov" | "avi"
Timeline Features
The timeline provides visual representation of video structure:
- Clip Visualization: Each clip is shown as a colored segment
- Duration Scaling: Clips are sized proportionally to their duration
- Time Ruler: Shows total duration with time markers
- Interactive Selection: Click clips to navigate or select
Keyboard Shortcuts
- Space: Play/Pause toggle
- Left Arrow: Skip backward 10 seconds
- Right Arrow: Skip forward 10 seconds
- Home: Jump to beginning
- End: Jump to end