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 output
0:45 | 3 clips | Just now
0:120:45
Timeline
Intro0:00 to 0:15
Main0:15 to 0:40
Outro0:40 to 0:45
Interactive Demo
Advanced demo with timeline management and clip controls.
Video output
0:45 | 3 clips | Just now
0:120:45
Timeline
Intro0:00 to 0:15
Main0:15 to 0:40
Outro0:40 to 0:45
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.
VD
I'll help you edit your marketing video with professional transitions and trimming.
Video output
2:15 | 3 clips | Just now
0:452:15
Timeline
Intro0:00 to 0:30
Main Content0:30 to 2:00
Outro2:00 to 2:15
Installation
npx shadcn@latest add "https://agents-ui.github.io/agents-kit/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