Video

StudioMeyer MCP Stack の一部 — マヨルカ島で開発 🌴 · ご利用の際は ⭐ をお願いします

私たちからひとこと

私たちはこの2年間、自分たちのためにツールやシステムを作ってきました。このリポジトリが小さく、スターが少ないのは、新しいからではありません。これまで作ってきたものを公開することに、つい最近決めたからです。生まれたばかりの実験ではなく、長い道のりの先に最近のコミットがあります。

私たちはものづくりと共有が大好きです。ソーシャルメディアの戦術や成長の裏技、スターやフォロワーの追求は好みません。だからこのリポジトリは小規模です。コードは実際に使われており、問題には回答しています。ご自身で判断してください。

役に立った場合は、共有、テスト、フィードバックで応援していただけるとうれしいです。改善できる点があれば、Issueを作成していただくのが最も役立ちます。これを使って何か作ったら、[email protected] までぜひお知らせください。本当に励みになります。

マヨルカ島パルマの小さなスタジオより。

機能

ツール	操作	説明
video_record	cinema, scroll, multi-device	フレーム単位のキャプチャで、ウェブサイトを60fpsで録画
video_edit	speed, crop, reverse, keyframe, pip	ズーム／パン、PiP、スローモーションでクリップを編集
video_color	grade, effect, lut, chroma	カラーグレーディング、22種類のLUTプリセット、グリーンスクリーン
video_audio	extract, music, ducking, mix, voice	音声の抽出とミキシング、9種類のボイスエフェクト
video_text	subtitles, caption, overlay, animate	SRTの焼き込み、Whisperによる自動キャプション、15種類のテキストアニメーション
video_compose	concat, intro, social, beat-sync, templates	クリップの結合、SNS向けフォーマット変換、ビート同期
video_speech	generate, voices, narrated	ElevenLabs/OpenAI TTS、ナレーション付き動画の作成
video_screenshot	capture, detect	要素を認識するスクリーンショット、ページ機能の検出

主な特長

• 60fps のフレーム単位キャプチャ — Playwright が各フレームをスクリーンショットで撮影し、ffmpeg がエンコードします。フレームのドロップはゼロです。
• シネマティックなイージングカーブ — cinematic や showcase を含む 16 種類のイージングオプションで、非常に滑らかなスクロールを実現します。
• スマートスクリーンショット — 15 種類以上の UI 要素（チャットウィジェット、料金セクション、予約フォームなど）を自動検出します。
• ナレーション付き動画 — URL とスクリプトを指定するだけで、AI 音声ナレーションと同期したプロ品質の動画を作成できます。
• 22 種類の LUT プリセット — 映画品質のカラーグレーディング（ティール＆オレンジ、ノワール、ヴィンテージ、サイバーパンクなど）。
• ソーシャルメディア形式でのエクスポート — ワンクリックで Instagram Reel、TikTok、YouTube Short、LinkedIn 向けに変換できます。
• デュアルトランスポート — Stdio（デフォルト）または、永続的なマイクロサービスとしてデプロイするための HTTP モードに対応しています。

前提条件

• Node.js >= 18
• ffmpeg と ffprobe（起動時に検証、クロスプラットフォーム対応）
• Playwright のブラウザー（npx playwright install chromium）
• 任意：ElevenLabs TTS 用の ELEVENLABS_API_KEY
• 任意：Whisper 字幕と OpenAI TTS 用の OPENAI_API_KEY

ffmpeg が PATH 外にある場合は、FFMPEG_PATH と FFPROBE_PATH に バイナリの絶対パスを設定してください。どちらの環境変数も、起動時および 実行時のすべての起動箇所で適用されます。

クイックスタート

Claude Code を使用する場合（stdio）

{
  "mcpServers": {
    "video": {
      "command": "npx",
      "args": ["-y", "@studiomeyer/mcp-video"]
    }
  }
}

npx を使用する場合

npx @studiomeyer/mcp-video

ソースから実行する場合

git clone https://github.com/studiomeyer-io/mcp-video.git
cd mcp-video
npm install
npx playwright install chromium
npm run build
npm start

HTTP モード

# Start as HTTP microservice
npx @studiomeyer/mcp-video --http --port=9847

# Or via environment variables
MCP_HTTP=1 MCP_PORT=9847 npx @studiomeyer/mcp-video

設定

環境変数	デフォルト	説明
VIDEO_OUTPUT_DIR	./output	生成ファイルの保存先ディレクトリ
FFMPEG_PATH	—	PATH にない場合の ffmpeg バイナリの絶対パス
FFPROBE_PATH	—	PATH にない場合の ffprobe バイナリの絶対パス
ELEVENLABS_API_KEY	—	ElevenLabs TTS API キー
OPENAI_API_KEY	—	OpenAI API キー（Whisper + TTS）
MCP_HTTP	false	HTTP トランスポートを有効化
MCP_PORT	9847	HTTP ポート
MCP_HOST	127.0.0.1	HTTP バインドアドレス
MCP_VIDEO_DEBUG	false	デバッグログを有効化
MCP_VIDEO_ALLOW_INTERNAL	false	localhost／プライベート／メタデータ IP に解決される URL を許可するには、1 に設定します。ローカル開発専用 — 本番環境では設定しないでください（SSRF ガード）。

作成できるもの

ユースケース	使用するツール	出力
製品デモ動画	video_record → video_text → video_audio	60fps のウェブサイト録画 + 自動字幕 + BGM
ソーシャルメディア向けクリップ	video_record → video_compose	1 回の録画から Instagram Reel、TikTok、YouTube Short 向けにエクスポート
ナレーション付き解説動画	video_speech → video_color	AI 音声ナレーション + シネマティックなカラーグレーディング
ビフォー・アフター比較	video_screenshot → video_edit	スマートな要素スクリーンショット + PiP 合成
自動 QA	video_record + video_screenshot	ユーザーフローの録画 + 特定要素のスクリーンショット

使用例

ウェブサイトを録画する

Use video_record with type "cinema" to record https://example.com
with a smooth scroll and hover over the navbar.

ナレーション付きの解説動画を作成する

Use video_speech with type "narrated" to create a narrated video of
https://example.com with these segments:
1. "Welcome to our homepage" — pause on hero section
2. "Check out our features" — scroll to features
3. "Get started today" — hover over CTA button

動画に自動で字幕を付ける

Use video_text with type "caption" to add auto-generated captions
to /path/to/video.mp4

ソーシャルメディア向けにエクスポートする

Use video_compose with type "social-all" to convert
/path/to/video.mp4 to all social media formats.

スマートスクリーンショット

Use video_screenshot with type "capture" to screenshot the chat widget
and pricing section on https://example.com

アーキテクチャ

src/
  server.ts            Entry point, 8 consolidated MCP tools
  lib/                 Logger, types, dual transport
  handlers/            Tool handlers (video, editing, post-production, tts, screenshots)
  schemas/             JSON Schema definitions for legacy tool format
  tools/
    engine/            Core engines
      capture.ts       Frame-by-frame recording (Playwright → PNG → ffmpeg)
      encoder.ts       ffmpeg encoding pipeline
      scenes.ts        Scene execution (scroll, hover, click, type, wait)
      cursor.ts        Visible cursor simulation
      smart-screenshot.ts  Element-aware screenshot engine
      tts.ts           ElevenLabs + OpenAI TTS with fallback
      narrated-video.ts    Full narration pipeline
      social-format.ts     Social media format conversion
      concat.ts        Video concatenation with transitions
      lut-presets.ts   22 cinema LUT presets
      ...and more

開発

npm run dev          # Start with tsx (hot reload)
npm run typecheck    # Type check
npm test             # Run tests
npm run check        # Verify ffmpeg/ffprobe installed

StudioMeyer について

StudioMeyer はパルマ・デ・マヨルカを拠点とする AI・デザインスタジオで、世界中のクライアントと仕事をしています。中小企業向けに、カスタムウェブサイトと AI インフラストラクチャを構築しています。本番環境のスタックには Claude Agent SDK、MCP、n8n を採用し、可観測性には Sentry、Langfuse、LangGraph を、さらに社内開発のガードレイヤーを使用しています。

ライセンス

MIT

クレジット

StudioMeyer が開発しました。AI を活用したコンテンツ制作のための、当社のオープンソースツールキットの一部です。

• ai-shield — TypeScript 向け LLM セキュリティミドルウェア
• agent-fleet — Claude Code 向けマルチエージェントオーケストレーション
• darwin-agents — 自己進化型エージェントフレームワーク