Show HN: FableCut – 一款 AI 智能体可驱动的浏览器视频编辑器(零依赖)
Show HN: FableCut – A browser video editor AI agents can drive (zero deps)

原始链接: https://github.com/ronak-create/FableCut

FableCut 是一款轻量级的、基于浏览器的非线性视频编辑器,旨在由人类和 AI 智能体共同驱动。与传统工具将项目文件隐藏起来的做法不同,FableCut 将其整个时间轴以 JSON 文档形式开放,允许 AI 模型(通过 MCP、REST 或直接文件操作)以编程方式进行视频编辑、调整关键帧并实时应用特效。 主要功能包括: * **混合编辑:** 人类用户与 AI 智能体可以在同一时间轴上协作,并内置冲突检测功能。 * **专业级控制:** 支持多轨道编辑、调整图层、色度键抠像、变速、节拍检测以及 17 种以上的转场效果。 * **AI 集成:** 智能体可以分析参考视频以提取蓝图(镜头边界、BPM 和能量),并使用你自己的素材进行重构。 * **技术简洁:** 运行在单一的、零依赖的 Node.js 服务器上,并配备支持即时热重载的浏览器 UI。 * **多功能性:** 包含强大的文本引擎用于制作动态字幕、支持动画 SVG,并可通过 ffmpeg 或 MediaRecorder 进行高质量导出。 FableCut 通过使项目界面透明化,颠覆了“AI 视频”的传统模式,使得通过简单的 JSON 操作即可实现复杂的自动化视频制作。

相关文章

原文

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.

FableCut editor

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.

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
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:

  1. 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"}).

  2. The file — read project.json, modify, bump revision, write. The UI live-reloads.

  3. RESTGET/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.

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/.

  • 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/).

MIT

联系我们 contact @ memedata.com