LeClap

السجل الرسمي الوسائط والتصميم

Compose and render video from one JSON template. Deterministic, runs locally, no generative model.

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).

NPM package @leclap/mcp
Claude Code
claude mcp add leclap -e 'LECLAP_MCP_OUTPUT_DIR=<LECLAP_MCP_OUTPUT_DIR>' -e 'LECLAP_MCP_MEDIA_DIR=<LECLAP_MCP_MEDIA_DIR>' -e 'LECLAP_MCP_RENDER_TIMEOUT_MS=<LECLAP_MCP_RENDER_TIMEOUT_MS>' -e 'LECLAP_MCP_ALLOW_REMOTION=<LECLAP_MCP_ALLOW_REMOTION>' -e 'LECLAP_MCP_REMOTION_ENTRY=<LECLAP_MCP_REMOTION_ENTRY>' -- npx -y @leclap/mcp@0.3.4
إعداد JSON (Claude Desktop وCursor وVS Code)
{
    "mcpServers": {
        "leclap": {
            "command": "npx",
            "args": [
                "-y",
                "@leclap/mcp@0.3.4"
            ],
            "env": {
                "LECLAP_MCP_OUTPUT_DIR": "<LECLAP_MCP_OUTPUT_DIR>",
                "LECLAP_MCP_MEDIA_DIR": "<LECLAP_MCP_MEDIA_DIR>",
                "LECLAP_MCP_RENDER_TIMEOUT_MS": "<LECLAP_MCP_RENDER_TIMEOUT_MS>",
                "LECLAP_MCP_ALLOW_REMOTION": "<LECLAP_MCP_ALLOW_REMOTION>",
                "LECLAP_MCP_REMOTION_ENTRY": "<LECLAP_MCP_REMOTION_ENTRY>"
            }
        }
    }
}

متغيرات البيئة

  • LECLAP_MCP_OUTPUT_DIR Directory rendered videos are written to. Defaults to ~/.leclap/renders.
  • LECLAP_MCP_MEDIA_DIR Allowlisted directory the server may read source media from. Defaults to ~/.leclap/media.
  • LECLAP_MCP_RENDER_TIMEOUT_MS Per-render timeout in milliseconds. Defaults to 600000.
  • LECLAP_MCP_ALLOW_REMOTION Opt in to the Remotion clip renderer, which executes local JavaScript. Off by default.
  • LECLAP_MCP_REMOTION_ENTRY Path to a Remotion entry point used by render_remotion_clip when it is enabled.

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  1. LeClap
  2. 🎥 Demo
  3. ⏱ Try it in 30 seconds
  4. 🎞 Template in, video out
  5. 🤔 Why LeClap?
  6. 📦 Packages
  7. 📚 Read next
  8. 🤝 Contributing & licence

LeClap

Your video from one JSON template: camera, effects, music, transitions, rendered on the device. No server, no upload.

Try it · Examples · Comparison · Docs · Showcase

🎥 Demo

Click the frame: the film plays on leclap.dev, with captions.

⏱ Try it in 30 seconds

Node 24.11 or later. FFmpeg is optional: the CLI brings ffmpeg-static along and uses it when there is no ffmpeg on your PATH.

npx @leclap/cli init hello --no-remotion --no-mcp
cd hello && npm install && npm run render

That writes build/output.mp4: three seconds of "Hello, LeClap" on a navy card, from the template.json next to it. Edit the JSON, render again.

If the title is missing, the ffmpeg on your PATH was built without drawtext (Homebrew's current build is one). npx leclap diagnose lists what your FFmpeg can and can't do.

Rather not install anything? Open the same template in the web builder, where it renders in the tab through WebAssembly. The template travels in the URL fragment, which browsers don't send to servers. leclap studio template.json prints that link for any template.

🎞 Template in, video out

Three templates from this repo and what they render to. Click a frame to play the render.

TemplateRenderWhat it shows
footage-edit.json
4 KB of JSONFive recorded clips, five edits: a portrait clip over its own blur, a keyframed pan under a LUT, a speed ramp, a freeze frame, a B-roll cutaway.
before-after.json
a PR review clipThe video an agent attaches to a pull request: the change named, the old behaviour, a wipe to the new one, what to check.
effects-tour.json
ten chapters, one templateSeven minutes of kinetic type, camera moves, transitions, captions, light effects, looks, footage edits, sound and music.

All 59 samples, with their templates, are on the showcase. Each effect, one frame at a time, in the gallery.

🤔 Why LeClap?

Four ways to get a video out of JavaScript, and when each one is the right call. Claims about the others come from their own docs; a "—" means their docs don't say. The full comparison has the sources and the caveats, ours first.

LeClapRemotioneditlyfluent-ffmpeg
What it isA JSON template compiled to FFmpegVideos written as React componentsDeclarative editing, as a CLI and a Node APIA chainable Node API over the ffmpeg CLI
You writeJSON, validated against a schemaReact (TypeScript)A JSON5 spec or CLI flagsChained method calls
Node✅✅ also Lambda and Vercel✅ needs ffmpeg, ffprobe, headless GL✅ needs ffmpeg, ffprobe
Browser✅ WebAssembly✅ WebCodecs, since 4.0.491——
React Native, on-device✅ FFmpeg linked into the app———
Same input, same output✅ per platform¹✅ if animations derive from the frame number——
Agent tooling✅ @leclap/mcp: schema, validate, render✅ a system prompt for LLMs writing React——
LicenceMITFree for individuals, non-profits and for-profit companies up to 3 employees; paid aboveMITMIT, archived in May 2025
Pick it whenThe render happens in an app, or a program writes the videoYou think in components, render on servers, or want the ecosystemYou want a slideshow from the terminalYou already use it; its README says it's unmaintained

¹ Per platform, not across them: Node and the browser encode with libx264, Android with libopenh264, iOS with h264_videotoolbox, and the on-device build drops boxblur and rewrites eq to lutyuv. Same composition, different pixels.

Remotion wins more of this than a comparison table usually admits: LeClap vs Remotion spells out where.

📦 Packages

PackageOne line
ffmpeg-video-composerThe engine: compile() a JSON template on Node, in the browser or in React Native.
@leclap/cliThe leclap command: init, render, validate, snapshot, verify, studio, diagnose.
@leclap/mcpThe engine as tools an agent can call: read the schema, validate a template, render it.

The rest of the monorepo is private: the creative kit (templates, fonts, media), the web builder (React, FFmpeg in WebAssembly), the Expo app (camera to render, on the phone) and the Rust engine that links FFmpeg into it. Working on the repo itself: CONTRIBUTING.md and AGENTS.md.

🤝 Contributing & licence

Issues and PRs welcome: start with CONTRIBUTING.md. The code is MIT.

The LeClap name and logo are trademarks of Alexandre Mogère. Fork and reuse the code freely, but give your fork a different name and don't imply endorsement. See TRADEMARK.md.

الأسئلة الشائعة

ما هو LeClap؟

Compose and render video from one JSON template. Deterministic, runs locally, no generative model.

كيف أثبّت LeClap؟

يعمل على جهازك. في Claude Code: claude mcp add leclap -e 'LECLAP_MCP_OUTPUT_DIR=<LECLAP_MCP_OUTPUT_DIR>' -e 'LECLAP_MCP_MEDIA_DIR=<LECLAP_MCP_MEDIA_DIR>' -e 'LECLAP_MCP_RENDER_TIMEOUT_MS=<LECLAP_MCP_RENDER_TIMEOUT_MS>' -e 'LECLAP_MCP_ALLOW_REMOTION=<LECLAP_MCP_ALLOW_REMOTION>' -e 'LECLAP_MCP_REMOTION_ENTRY=<LECLAP_MCP_REMOTION_ENTRY>' -- npx -y @leclap/mcp@0.3.4. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج LeClap إلى مفتاح API؟

لا يذكر إدراجه في السجل أي مفتاح أو سر إلزامي. قد تتطلب بعض الميزات حسابًا لدى الخدمة التي يتصل بها.

هل LeClap مفتوح المصدر؟

نعم. شيفرته متاحة على GitHub بترخيص MIT.

من يصون LeClap؟

ينشره heristop. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.