画像・動画の生成後、素材の整理やカット編集だけを別のアプリでやり直すと、制作の流れが途切れます。私たちは、その工程を一つのローカルプロジェクトで扱えるように、オープンソースの BeatDesign を作っています。
BeatDesignには、発想を広げる Canvas と、完成動画を組み立てる Editor があります。両方が同じAssetsを参照するため、キャンバスで選んだ素材をタイムラインで編集できます。ブラウザ上でMP4の書き出しまで進められます。
実際の画面
以下はBeatDesignの画面です。生成モデルの出力例や性能比較ではありません。
Canvas： プロンプト、画像、動画、音声などをノードとして配置し、制作案を分岐できます。
Editor： 共有Assetsからクリップを置き、トリミング、分割、順序変更、音量調整、画像の重ね合わせ、SRT字幕の調整ができます。
エージェントとはどうつながる？
BeatDesignは、プロジェクト、Assets、Canvas、生成、編集を操作するためのローカルMCPツールを29個用意しています。Claude CodeやCodexなどのMCP対応エージェントから、同じプロジェクトを操作できます。エージェントが並べたカットはEditorで確認し、手で直せます。
ローカルの素材を読み込み、配置し、編集・書き出しするだけならAPIキーは不要です。AIによる生成や解析を使う場合は、モデルへの接続と利用料金が必要です。ローカルファイルを選んだだけでモデル側へ送信される設計ではありません。
起動する
Node.js 22以上、pnpm 10以上、macOSまたはWindows上の新しいChromeを用意します。
git clone https://github.com/BeatAPI/BeatDesign.git
cd BeatDesign
pnpm install
pnpm db:push
pnpm dev
起動後は http://127.0.0.1:3020 を開きます。エージェントから操作する場合は、pnpm dev:agent または pnpm mcp と、エージェント側のMCP接続設定が必要です。接続例はリポジトリにあります。
現時点のライセンスはApache 2.0です。まずは手元の素材で短い動画を一本作り、CanvasからEditorまでの流れを試してみてください。
開示：筆者はBeatDesignとBeatAPIを提供するチームの一員です。上の画像は実際の製品画面です。