FableCut: AI 에이전트가 제어하는 브라우저 기반 비디오 편집기

FableCut A browser video editor that AI agents can drive. FableCut is a Premiere-style non-linear video editor that runs entirely in your browser — and exposes its whole timeline as one JSON document. Edit it by hand, from the UI, or let an AI agent (Claude Code, Claude Desktop, or anything that speaks MCP/REST) cut your video for you while you watch the timeline update live. Zero npm dependencies. One node server.js . That's it. Why it's interesting Most "AI video" tools hide the edit behind an API. FableCut flips that: the project file is the interface . project.json describes media, clips, tracks, effects, keyframes and transitions — any process that can write JSON can edit video, and the open browser UI hot-reloads within ~150 ms via server-sent events. A human and an agent can work on the same timeline at the same time. Features Editing 4 video tracks + 3 audio tracks, drag/trim/split/snap, undo/redo Timeline multi-select — rubber-band marquee (drag on empty track area), Ctrl/Cmd/Shift+click to add/remove clips, Ctrl+A to select all, Esc to deselect. Drag any selected clip to move the whole group; Delete removes all selected; S splits all selected at the playhead. Inspector shows an "N clips selected" banner. Beat & cue markers (tap M on the beat during playback) with edge snapping Real decoded audio waveforms on clips Canvas aspect presets (16:9, 9:16 reels, 4:5, 1:1) + safe-area guides Look 12 one-click filter presets (cinematic, teal-orange, noir, vintage, cyberpunk…) Adjustment layers — one clip grades everything below it, Premiere-style Full grade controls: brightness/contrast/saturation/hue, temperature & tint , blur, grayscale/sepia/invert, vignette , animated film grain Blend modes (screen, multiply, overlay…), fit modes (contain/cover/stretch), per-edge cropping, corner radius, flip H/V Chroma key (green screen) with tolerance/softness + spill suppression AI background removal (person cut-out, in-browser via MediaPipe) Motion Keyframe animation on ~25 properties with easing Speed ramps — keyframe speed and the engine time-remaps video and the export audio mix (the fast-into-slow-mo reel move) Camera shake and RGB-split/chromatic aberration , both animatable 17 transitions: fades, slides, wipes (4 directions), zoom, iris, spin, blur, whip-pan, glitch , pop Text Kinetic captions: typewriter, word-pop, word-slide, karaoke, letter-pop , wave , bounce , shake Neon glow for that TikTok caption look Font editor: system fonts, drop-in custom fonts ( library/fonts/ ), and any Google Font by name — loaded automatically Gradient fills, outline, background pills, letter-spacing, line-height, weights, italic, uppercase, alignment, soft shadows Animated SVG clips A first-class svg clip kind: CSS- @keyframes -animated SVGs render frame-accurately in preview and export (the compositor freezes the animation at any time). Agents can author their own vector overlays — lower-thirds, confetti, sparkles — as plain .svg files. Starters included. Remake a reference video Give it a reference edit (a reel you like) and get back an edit blueprint : shot boundaries, music beats + BPM, a loudness curve, per-shot energy, the drop — plus the reference's music track extracted into your media, ready to rebuild the same idea with your own footage. Zero extra dependencies (ffmpeg does the decoding; onset/tempo detection is plain Node). node analyze.js ref.mp4 , POST /api/analyze , or the fablecut_analyze_reference MCP tool. Asset library library/ folders surface as tabs in the UI: Elements (overlay art), Sound FX , SVG — drop files in, the open editor refreshes live Export Fast export: browser renders every frame + an offline audio mix, ffmpeg encodes a frame-accurate CRF-18 MP4 (keeps rendering if you switch tabs) Realtime MediaRecorder fallback when ffmpeg isn't available Quick start git clone https://github.com/ronak-create/FableCut.git cd FableCut node server.js # → http://localhost:7777 Requirements: Node 18+ and a Chromium-based browser. ffmpeg on PATH is optional but recommended (fast export + upload remuxing). AI background removal fetches its model from a CDN on first use. Drop media into the window (or ./media/ ), drag clips onto the timeline, edit, export. Driving it with an AI agent Everything an agent needs is in CLAUDE.md — the complete schema, semantics and recipes. Point any capable model at that file and it can operate the editor end to end. Three equivalent control surfaces: MCP (best for Claude Code / Claude Desktop) — register the bundled zero-dependency MCP server once: claude mcp add -s user fablecut -- node " <path-to>/fablecut/mcp-server.js " Tools: fablecut_status (auto-starts the editor), fablecut_docs , fablecut_get_project , fablecut_set_project , fablecut_patch_project , fablecut_import_media , fablecut_analyze_reference . The surface is token-efficient by design : agents patch the timeline with small ops ( fablecut_patch_project ) instead of round-tripping the whole document, read a compact one-line-per-clip summary ( fablecut_get_project {compact:true} ), and fetch only the manual sections they need ( fablecut_docs {section:"props"} ). The file — read project.json , modify, bump revision , write. The UI live-reloads. REST — GET/PUT /api/project , POST /api/upload , GET /api/library , SSE at /api/events . See CLAUDE.md for the full list. Example: ask Claude Code "cut these six clips to the beat markers, add a teal-orange grade, put a word-pop caption on top and a whoosh on every cut" — and watch the timeline rebuild itself. Or hand it a reference: "here's a reel I like — analyze it and remake it with my clips, same music" . The agent calls fablecut_analyze_reference , gets the blueprint (cuts, beats, BPM, energy, drop, extracted music), and rebuilds the structure shot-for-shot with your footage. Conflict-safe concurrent editing : the UI, the MCP tools, and direct project.json writes all agree on a revision counter. If you edit a clip in the UI while an agent is mid-task, the agent's next write is rejected (409 from the REST API / a conflict error from fablecut_set_project ) instead of silently overwriting your change. The UI similarly detects when an agent write supersedes a not-yet-saved local tweak and tells you with a toast instead of dropping it silently. Project layout server.js zero-dependency HTTP server: static hosting, REST API, SSE, ffmpeg export pipeline app.js the editor: timeline UI, compositor, keyframes, text engine, SVG rasterizer, chroma key, exporters index.html single-page UI style.css dark editor theme mcp-server.js stdio MCP server exposing the editor to AI agents analyze.js reference-video analyzer: shots, beats/BPM, energy, drop, music extraction (module + CLI) CLAUDE.md the agent manual (schema + recipes) — also served by fablecut_docs project.json your timeline (created on first run; gitignored) media/ project footage (gitignored) analysis/ cached edit blueprints from /api/analyze (gitignored) library/ default assets: elements/ sfx/ svg/ fonts/ exports/ finished renders (gitignored) Authoring animated SVG overlays SVGs animate with plain CSS @keyframes . One convention: never hardcode animation-delay — set --d: 0.4s instead, and the compositor drives time by pausing all animations and rebasing their delays. Full rules + a skeleton in CLAUDE.md ; working examples in library/svg/ . Notes The repo ships with 20 Google Fonts ( library/fonts/ , OFL — see LICENSES.md there) and a set of self-authored SVG overlays and animated elements ( library/elements/ , library/svg/ , MIT like the rest of the repo). library/sfx/ is yours to fill (gitignored): sound-effect sites typically don't allow redistributing their files in a public repo, so FableCut doesn't — library/sfx/README.md lists good free sources. Export runs in the browser because the compositor is the browser; agents ask you to click Export (or render directly with ffmpeg from media/ ). License MIT